Nie można pobrać zdjęcia z kamery internetowej przy użyciu HTML5 i getUserMedia() w przeglądarce Google Chrome przy ładowaniu pierwszej strony

Question

Korzystając z numeru this article on HTML5Rocks Próbuję utworzyć narzędzie do robienia zdjęć z kamery internetowej.

Poniżej jest mój kod HTML fragment:

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

Na kliknięcie przycisku btnCapture zacznę moją kamerę i klikając go ponownie To oddaje zdjęcie z kamery i umieszcza go w obrazie capturedImage.

Poniżej jest mój kod 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); 

Gdy przycisk btnCapture jest clickd raz pierwszy wywołuje funkcję sizeCanvas() aby ustawić obszar roboczy i szerokość obrazu & wysokości do szerokości & wysokości filmu (czyli 320 & 240) . Po dwukrotnym kliknięciu przycisku wykonuje się kodowanie obrazu Base64 z kamery internetowej przy użyciu canvas.toDataURL i umieszcza go w obrazie capturedImage.

Działa w Operze. Ale w Google Chrome zawsze kończy się niepowodzeniem za pierwszym razem, gdy strona jest ładowana. Ale kiedy ta sama strona jest odświeżana, działa. Próbując debugować, stwierdziłem, że kod canvas.toDataURL po raz pierwszy zwraca obraz Base64 jako data:,, dzięki czemu nie jest w stanie narysować obrazu, który powoduje błąd w konsoli Resource interpreted as Image but transferred with MIME type text/plain: "data:,".. Również jeśli nie zadzwonię do funkcji sizeCanvas, to działa ona po raz pierwszy, ale wtedy obraz nie jest wymaganego wymiaru i zostaje przycięty.

Jakieś pomysły, w jaki sposób mogę sprawić, by działał w Chrome po raz pierwszy z sizeCanvas?

Google Chrome: 24.0.1312.57 Opera: 12,11

Answer 1

LIVE DEMO

działa dobrze w Chrome i 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); 
    } 
); 

Ten kod znalazłem tutaj: LINK DEVELOPER MOZILLA

UPDATE: I uaktualniony Moje Live Demo do JSFiddle ponieważ getUserMedia() już nie pracuje na niepewnych źródeł. Aby skorzystać z tej funkcji, należy rozważyć zmianę aplikacji na bezpieczne źródło, takie jak HTTPS. Aby uzyskać więcej informacji, patrz The Chromium Projects.