Impossibile scattare foto dalla webcam utilizzando HTML5 e getUserMedia() in Google Chrome al caricamento della prima pagina

Question

Prendendo riferimento a this article on HTML5Rocks Sto cercando di creare un'utilità per scattare foto dalla webcam.

Qui di seguito è il mio HTML frammento di codice:

<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 /> 

Su clic del pulsante btnCapture inizio la mia webcam e cliccando nuovamente Cattura la foto dalla webcam e lo mette nell'immagine capturedImage.

Qui di seguito è il mio codice 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); 

Quando il pulsante btnCapture è clickd prima volta che chiama la funzione sizeCanvas() per impostare la tela e larghezza dell'immagine & altezza e la larghezza & l'altezza del video (vale a dire 320 & 240) . Quando si fa clic sul pulsante per la seconda volta, si acquisisce l'istantanea codificata Base64 dalla webcam utilizzando canvas.toDataURL e la si inserisce nell'immagine capturedImage.

Funziona in Opera. Ma in Google Chrome fallisce sempre la prima volta quando viene caricata la pagina. Ma quando la stessa pagina viene aggiornata funziona. Cercando di eseguire il debug, ho scoperto che il codice canvas.toDataURL restituisce l'immagine Base64 come data:, per la prima volta a causa della quale non è possibile disegnare l'immagine che genera un errore di Resource interpreted as Image but transferred with MIME type text/plain: "data:,". nella console. Inoltre, se non chiamo la funzione sizeCanvas, la prima volta funziona, ma l'immagine non è della dimensione richiesta e viene ritagliata.

Qualche idea su come posso farlo funzionare in Chrome la prima volta con sizeCanvas?

Google Chrome: 24.0.1312.57 Opera: 12,11

Answer 1

LIVE DEMO

funziona bene in Chrome e 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); 
    } 
); 

Questo codice che ho trovato qui: LINK DEVELOPER MOZILLA

UPDATE: ho aggiornato il mio Demo Live per JSFiddle perché getUserMedia() non è più funziona sulle origini insicuri. Per utilizzare questa funzione, dovresti considerare di passare la tua applicazione a un'origine sicura, come HTTPS. Vedi The Chromium Projects per maggiori dettagli.