2013-06-23 79 views
2

我試圖從網絡攝像頭捕捉視頻/照片。我已經創建了一個腳本,但我只想在點擊按鈕時啓動攝像頭訪問。有了這個腳本,它將立即開始(我不想)。我怎樣才能綁定這個事件點擊請?getUserMedia on click

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); 
      } 

      // Trigger photo take 
      document.getElementById("snap").addEventListener("click", function() { 
       context.drawImage(video, 0, 0, 487, 365); 
      }); 
     }, false); 
+0

你有一些很好的幫助 - 應該可以標記答案,給予幫手點。 – sandover

回答

0

你可以嘗試這樣的事情:

<html> 
<head> 
<script type="text/javascript"> 
function doGetUserMedia() { 
      // 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); 
      } 

      // Trigger photo take 
      document.getElementById("snap").addEventListener("click", function() { 
       context.drawImage(video, 0, 0, 487, 365); 
      }); 
     } 
</script> 
</head> 
<body> 
<button onclick="doGetUserMedia()">Click me</button> 
</body> 
</html> 
+0

不適用於我... :-( – Recif

2

你需要調用getUserMedia在點擊處理程序,而不是DOM內容加載的事件中。

我把你的問題的代碼,並修改了它:

  • 使它成爲整個HTML文檔的一部分,所以我可以測試它
  • 裹啓動相機功能的代碼,稱爲startCamera
  • 添加了「啓動相機」按鈕。點擊按鈕即可啓動相機,但這對我來說並不合適。
  • 增加了一個點擊監聽器「啓動攝像頭」按鈕,只需執行startCamera功能

下面的代碼:

<html> 
    <body> 
     <canvas id="canvas"></canvas> 
     <video id="video"></video> 
     <button id="startCamera">Start camera</button> 
     <button id="snap">Take snapshot</button> 
    <script> 
     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 
      function startCamera() { 
       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); 
       } 
      } 

      // Trigger photo take 
      document.getElementById("snap").addEventListener("click", function() { 
       context.drawImage(video, 0, 0, 487, 365); 
      }); 
      // Trigger starting the camera 
      document.getElementById("startCamera").addEventListener("click", function() { 
       startCamera(); 
      }); 
     }, false); 
    </script> 
    </body> 
</html> 
2

試試這個代碼。另外嘗試從虛擬目錄運行。

<html> 
<head> 
<script type="text/javascript"> 
function doGetUserMedia() { 
      // Grab elements, create settings, etc. 
      var canvas = document.getElementById("canv"), 
       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); 
      } 

      // Trigger photo take 
      document.getElementById("snap").addEventListener("click", function() { 
       context.drawImage(video, 0, 0, 487, 365); 
      }); 
     } 
</script> 
</head> 
<body> 
<button onclick="doGetUserMedia()">Start Camera</button> 
<video id="video" width="487" height="365"></video> 
<button id="snap">Take snapshot</button> 
<canvas id="canv" width="487" height="365"></canvas> 
</body> 
</html>