Tengo una transmisión de cámara web que está llegando y estamos usando las siguientes opciones para las restricciones:

 const maxSize = 1920; stream.getTracks()[0].getTracks()[0].applyConstraints({ width: { exact: maxSize, }, height: { exact: maxSize, }, aspectRatio: { exact: 1.0, } });

Si verifico después para asegurarme de que las restricciones se han aplicado usando:

 const settings = this.stream.getTracks()[0].getSettings(); console.log('video settings: ', settings);

Puedo ver que el ancho y la altura son ambos de 1920 y la relación de aspecto es de 1,0. La cámara web puede subir hasta 4000x3000.

Luego estoy transmitiendo eso a una etiqueta de video que tiene una altura y un ancho de 1920px.

 <div class='container'> <video id="selfie-video" width="1920" height="1920" /> </div>

 .container { width: 1080px; height: 1920px; overflow: hidden; } #selfie-video { margin: 0; padding: 0; object-fit: cover; width: 1920px; height: 1920px; left: -420px; position: absolute; top: 0; }

Estoy mostrando esto en una pantalla que está configurada en modo vertical 1080x1920. Cuando pruebo esto en Chrome, no tengo ningún problema a menos que presione F11 y ponga Chrome en modo de pantalla completa o si lo abre en electron. Tan pronto como Chrome entra en modo de pantalla completa o lo abres en electron, el ancho se limita a 1080px. Permite que el ancho sea inferior a 1080 px pero no superior. Puedo configurarlo en algo loco como 4000px de ancho y simplemente se ignora por completo. Lo mismo ocurre con la altura, puede establecer la altura hasta 1920 px de altura, pero si se pasa de eso, simplemente se ignora.

Esto hace que la imagen se aplaste porque 1920 px de ancho se reduce a 1080 px.

La razón por la que hacemos 1920x1920 es porque permitimos que la gente gire la imagen, así que usamos css para hacer una transform: rotate(90deg); por lo que debe ser 1920px para ambas dimensiones.

No puedo encontrar ninguna documentación o explicación de por qué sucede esto. No hay problemas con el desbordamiento en ningún otro tipo de elemento que no sea este <video> .