Estoy tratando de usar mediaDevices.getUserMedia para recuperar un flujo de medios con orientación vertical, específicamente en una relación de aspecto de 9x16. Puedo hacerlo en Android Chrome y Desktop, pero parece que iOS gira el video cuando se procesa en una etiqueta de video HTML o se graba en MP4.
Aquí están específicamente las restricciones que estoy usando:
navigator.mediaDevices.getUserMedia({ video: { aspectRatio: 9/16, facingMode: 'user', width: { min: 360, ideal: 720, max: 1080 }, height: { min: 640, ideal: 1280, max: 1920 }, deviceId: undefined, resizeMode: 'none' } })Esto me devolverá una pista de video de Media Stream con las propiedades deseadas:
mediaStream.getVideoTracks()[0] { deviceId: "..." facingMode: "user" frameRate: 30 height: 1280 width: 720 }Luego renderizo esa transmisión en una etiqueta de video HTML. Cuando lo hago, el video se renderiza girado para que video.videoWidth = 1280 y video.videoHeight = 720.
Entiendo por otras publicaciones que los videos MP4 y WEBM pueden tener incrustados metadatos de rotación, y eso es probablemente lo que está sucediendo aquí.
Luego uso RecordRTC para grabar el video y el video resultante es de hecho 720x1280, pero rotado de tal manera que al renderizarlo se muestra en formato horizontal.
Estoy tratando de evitar que ocurra esta rotación, para poder grabar un video de retrato en 720x1280 sin rotación. Chrome (Android + escritorio) parece ser capaz de hacer este recorte + escalado por mí, pero iOS no lo hace. ¿Hay alguna solución que alguien haya encontrado para esto?