getUserMedia только на клике

Я пытаюсь захватить видео/фото с веб-камеры. Я работаю над скриптом, но я хотел бы начать доступ к камере только при нажатии кнопки. С помощью этого скрипта он начнется немедленно (я не хочу). Как я могу связать это событие нажатием кнопки?getUserMedia только на клике

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

источник

2013-06-23 Recif

У вас есть хорошая помощь - возможно, стоит отметить ответ, чтобы дать вспомогательные пункты. – sandover

Вы можете попробовать что-то вроде этого:

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

источник

2013-06-23 16:25:45 fycth

Не работает для меня ... :-( – Recif

Вы должны вызвать 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>

источник

2013-10-09 21:56:55 jrullmann

Попробуйте этот код. Также попробуйте запустить это из виртуального каталога.

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

источник

2014-10-28 06:50:10

ответ

Смежные вопросы