Impossible de prendre une photo à partir d'une webcam à l'aide de HTML5 et getUserMedia() dans Google Chrome sur la première page de chargement

La prise de référence de cet article sur HTML5Rocks je suis en train de construire un utilitaire pour prendre la photo de la webcam.

Ci-dessous est mon extrait de code 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 />

Sur le clic du bouton btnCapture j'ai démarrer ma webcam et en cliquant à nouveau, il capture la photo de la webcam et le met dans l'image capturedImage.

Ci-dessous mon code 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);

Lorsque le bouton btnCapture est clickd première fois, il appelle la fonction sizeCanvas() à l'ensemble de la toile et de la largeur de l'image & hauteur de vidéo de la largeur & hauteur (c'est à dire 320 & 240). Lorsque le bouton est cliqué deuxième temps cela prend-il encodé en Base64 instantané à partir d'une webcam à l'aide de canvas.toDataURL et la met en image capturedImage.

Il travaille à l'Opéra. Mais dans Google Chrome, il échoue toujours la première fois quand la page est chargée. Mais quand la même page est actualisée, il fonctionne. Essayez de déboguer j'ai trouvé que le code canvas.toDataURL renvoie l'image en Base64 comme data:, pour la première fois en raison de laquelle il est impossible de tirer de l'image qui en résulte erreur de Resource interpreted as Image but transferred with MIME type text/plain: "data:,". dans la console. Aussi, si je n'appelle pas la fonction sizeCanvas puis il travaille d'abord le temps, mais alors la photo n'est pas de la dimension j'ai besoin et est coupée.

Des idées comment je peux le faire fonctionner dans google Chrome, la première fois avec sizeCanvas?

Google Chrome: 24.0.1312.57
Opéra: 12.11

OriginalL'auteur Naveen | 2013-02-14