Estoy tratando de tomar una instantánea de una transmisión de video desde una cámara web. La vista previa funciona bien, pero cuando trato de capturarla y convertirla en una imagen, solo se captura una parte muy pequeña. Una parte de 320x150 de la esquina superior derecha.

Ya probado:

• Cambiar la propiedad de visualización de CSS
• Establecer el ancho y la altura del lienzo a la altura del video (que muestra 1200x720, por lo que es correcto
• Cambiar la ubicación del lienzo.

CSS:

 canvas { display: none; position:fixed; top: 0; left:0; width: 100%; height: 100%; } video { height:100%; width:100%; object-fit:cover; }

JavaScript:

 var constraints = { video: {width: {exact: 1280}, height: {exact: 720}} }; navigator.mediaDevices.getUserMedia(constraints).then((stream) => { video.srcObject = stream; }); function take_snapshot(type) { var v = video.videoWidth; var h = video.videoHeight; console.log("width =" +v+ "height= "+h ); //This shows 1200x720 canvas.style.width = v; canvas.style.height = h; canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight); let image_data_url = canvas.toDataURL('image/jpeg'); console.log(image_data_url); // data url of the image var http = new XMLHttpRequest(); var url = 'save.php'; var params = 'image='+image_data_url; http.open('POST', url, true); //Send the proper header information along with the request http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { alert(http.responseText); } } http.send(params); }

HTML:

 <div id ="cameraContainer"> <div id="camera"> <video autoplay="true" id="cameraPreview"></video> <div id="overlay"> <img id="overlayImage" src=""> </div> </div> <div id="buttonContainer"> <div id="button"> <button id="pictureButton" class="btn btn-success btn-block">Maak Foto</button> </div> </div> </div> </div> <canvas id="canvas"></canvas>

La imagen es la misma, cuando se guarda o se muestra. La URL de la imagen de datos también es muy corta (solo 1-20 kb). La altura y el ancho del video son correctos, por lo que el problema parece estar en algún lugar de la función de captura.

Cualquier ayuda sería apreciada.