javascript - camara - No se puede tomar una foto desde la webcam usando HTML5 y getUserMedia() en Google Chrome en la carga de la primera página

webcam html5

Question

Tomando como referencia este artículo sobre HTML5Rocks , estoy tratando de construir una utilidad para tomar fotos desde la cámara web.

Debajo está mi fragmento de código HTML:

<button type="button" name="btnCapture" id="btnCapture">Start my camera</button><br />
<video autoplay="true" id="video" style="height:240px;width:320px"></video><canvas id="canvas" style="display: none; height:240px;width:320px"></canvas><br />
<img id="capturedImage" src="/blank.gif" style="height:240px;width:320px"><input type="hidden" id="hdnImageBase64" name="hdnImageBase64"><br />

Al hacer clic en el botón btnCapture , inicio mi cámara web y hago clic de nuevo. Captura la foto de la cámara web y la coloca en la imagen capturedImage .

A continuación está mi código JavaScript:

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var localMediaStream = null;
var capturedImage = document.getElementById("capturedImage");
var buttonTextCapturePicture = "Say Cheese!";
function onFailSoHard(e) {
if (e.code == 1) {
alert("Something went wrong! Either your webcam is not connected or you denied access to it.");
} else {
alert("getUserMedia() not supported in your browser. Try using latest version of Google Chrome or Opera.");
}
}
function snapshot() {
if (localMediaStream) {
try {
ctx.drawImage(video, 0, 0);
capturedImage.src = canvas.toDataURL("image/png");
document.getElementById("hdnImageBase64").value = canvas.toDataURL("image/png");
} catch (e) {
alert("Something went wrong while capturing you. Try refreshing the page. " + e);
}
}
}
video.addEventListener("click", snapshot, false);
function sizeCanvas() {
setTimeout( function() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
capturedImage.height = video.videoHeight;
capturedImage.width = video.videoWidth;
}, 50);
}
var button = document.getElementById("btnCapture");
button.addEventListener("click", function(e) {
if (localMediaStream) {
snapshot();
return;
}
if (navigator.getUserMedia) {
navigator.getUserMedia("video", function(stream) {
video.src = stream;
localMediaStream = stream;
sizeCanvas();
button.textContent = buttonTextCapturePicture;
}, onFailSoHard);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia({"video" : true}, function(stream) {
video.src = window.webkitURL.createObjectURL(stream);
localMediaStream = stream;
sizeCanvas();
button.textContent = buttonTextCapturePicture;
}, onFailSoHard);
} else {
onFailSoHard({
target : video
});
}
}, false);

Cuando se hace clic en el botón btnCapture primera vez, llama a la función sizeCanvas() para configurar el lienzo y el ancho y alto de la imagen para el ancho y alto del video (es decir, 320 y 240). Cuando se hace clic en el botón por segunda vez, toma una instantánea codificada de Base64 de la cámara web utilizando canvas.toDataURL y la coloca en la imagen canvas.toDataURL .

Funciona en Opera. Pero en Google Chrome siempre falla la primera vez que se carga la página . Pero cuando la misma página se actualiza, funciona. Intentando depurar encontré que el código canvas.toDataURL devuelve la imagen Base64 como data:, por primera vez debido a que no puede dibujar la imagen, lo que da como resultado un error del Resource interpreted as Image but transferred with MIME type text/plain: "data:,". en la consola. Además, si no llamo a la función sizeCanvas entonces funciona por primera vez, pero luego la imagen no es de la dimensión que requiero y se recorta.

¿Alguna idea de cómo puedo hacer que funcione en Chrome la primera vez con sizeCanvas ?

Google Chrome: 24.0.1312.57 Opera: 12.11

Answer 1

DEMO EN VIVO

Funciona bien en Chrome y FF.

(function() {
var streaming = false,
video = document.querySelector(''#video''),
canvas = document.querySelector(''#canvas''),
photo = document.querySelector(''#photo''),
startbutton = document.querySelector(''#startbutton''),
width = 320,
height = 0;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);

Este código encontré aquí: LINK DEVELOPER MOZILLA

ACTUALIZACIÓN: actualicé mi demostración en vivo a JSFiddle porque getUserMedia() ya no funciona en orígenes inseguros. Para utilizar esta función, debería considerar cambiar su aplicación a un origen seguro, como HTTPS. Ver The Chromium Projects para más detalles.