El elemento del lienzo distorsiona mi imagen y se acerca al centro izquierdo. Como se ve aquí.

https://i.ibb.co/ZMCcM88/Captura de pantalla-116.png

Lo de arriba es como debería verse, lo de abajo es como queda.

Mi console.log () muestra que los tamaños de video y lienzo son iguales y nada debe estar distorsionado o salir mal.

https://i.ibb.co/p0cHDXf/Screenshot-118.png

Mi código se ve así

Modelo

 <div> <video ref="video" class="full-width" autoplay playsinline > <canvas ref="canvas" class="full-width" height="240" > </div>

Guion

 export default defineComponent({ name: "CameraPage", setup() { const imageCaptured = ref(false); const video = ref(null); const canvas = ref(null); const initCamera = () => { navigator.mediaDevices .getUserMedia({ video: true, }) .then((stream) => { video.value.srcObject = stream; }); }; const captureImage = () => { canvas.width = video.value.getBoundingClientRect().width; canvas.height = video.value.getBoundingClientRect().height; let context = canvas.value.getContext("2d"); context.drawImage(video.value, 0, 0, canvas.width, canvas.height); imageCaptured.value = "True"; }; onMounted(() => { initCamera(); }); return { initCamera, onMounted, captureImage, video, canvas, imageCaptured, }; }, });

¿Qué estoy haciendo que está distorsionando la imagen? ¿Obtengo algo en el método drawImage() que está mal? ¿Es el "ancho completo" y la "altura" en los atributos html del lienzo?

Solo quiero "tomar una captura de pantalla" de la transmisión de video y hacer que se vea básicamente como una foto.

Estoy tan cerca pero tan lejos.