Estoy creando un componente de cámara simple en React, con una funcionalidad similar a las de Messenger o Snapchat. Usé CSS para hacer que la transmisión de video respondiera e implementé la función dibujarImagen para capturarla. El problema es que captura todo el rango de la cámara en lugar de solo la ventana gráfica. La diferencia se ve principalmente cuando se toma una foto verticalmente en el móvil, porque aunque la transmisión de video se recorta, la imagen capturada también muestra partes recortadas y se condensa. Sé que probablemente se puede arreglar cambiando los parámetros de drawImage() pero aún no encontré una solución que funcione.

Aplicación.js

 const getVideo = () => { navigator.mediaDevices .getUserMedia({ video: { width: window.screen.width, height: window.screen.height} }) .then(stream => { let video = videoRef.current; video.srcObject = stream; video.play(); }) .catch(err => { console.error(err); }) } const takePhoto = () => { const width = window.innerWidth; const height = window.innerHeight; let video = videoRef.current; let photo = photoRef.current; photo.width = width; photo.height = height; let ctx = photo.getContext('2d'); ctx.drawImage(video, 0, 0, width, height); setHasPhoto(true) }

aplicación.css

 .camera video { width: 100%; object-fit: cover; height: 100vh; }