在javascript中點擊按鈕時捕捉圖像

Question

我想在點擊按鈕時啓動相機，並通過javascript顯示預覽。

function emitStream() { 
    // Asking permission to get the user media. 
    // If permission granted, assign the stream to the HTML 5 video element. 
    navigator.webkitGetUserMedia({ 
     video: true, 
     audio: true 
    }, function(stream) { 
     that._video = document.querySelector('video'); 
     that._video.src = window.URL.createObjectURL(stream); 
    }); 


    function takePicture() { 
     // Assigning the video stream to the canvas to create a picture. 
     that._canvas = document.querySelector('canvas'); 
     var context = that._canvas.getContext('2d'); 
     context.clearRect(0, 0, 0, 0); 
     context.drawImage(that._video, 0, 0, 400, 300); 
    } 
} 

Answer 1

該代碼被髮布或David Walsh - Camera and Video Control with HTML5 ..嘗試下面的代碼編寫----

window.addEventListener("DOMContentLoaded", function() { 
     // Grab elements, create settings, etc. 
     var canvas = document.getElementById("canvas"), 
      context = canvas.getContext("2d"), 
      video = document.getElementById("video"), 
      videoObj = { "video": true }, 
      errBack = function(error) { 
       console.log("Video capture error: ", error.code); 
      }; 

     // Put video listeners into place 
     if(navigator.getUserMedia) { // Standard 
      navigator.getUserMedia(videoObj, function(stream) { 
       video.src = stream; 
       video.play(); 
      }, errBack); 
     } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
      navigator.webkitGetUserMedia(videoObj, function(stream){ 
       video.src = window.webkitURL.createObjectURL(stream); 
       video.play(); 
      }, errBack); 
     } 
     else if(navigator.mozGetUserMedia) { // Firefox-prefixed 
      navigator.mozGetUserMedia(videoObj, function(stream){ 
       video.src = window.URL.createObjectURL(stream); 
       video.play(); 
      }, errBack); 
     } 
    }, false); 

的觸發如下：---

document.getElementById("snap").addEventListener("click", function() { 
    context.drawImage(video, 0, 0, 640, 480); 
});