javascript - 使用带有 Javascript 的网络摄像头拍摄快照

Question

制作页面以使用网络摄像头拍摄快照。但突然它停止在每台计算机上工作。我是不是打错了我自己看不到，或者有没有人有解决这个问题的想法？？

• 同时添加了平局

  // Put event listeners into place
  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 },
          image_format= "jpeg",
          jpeg_quality= 85,
          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();
              $("#snap").show();
          }, errBack);
      } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
          navigator.webkitGetUserMedia(videoObj, function(stream){
              video.src = window.URL.createObjectURL(stream);
              video.play();
              $("#snap").show();
          }, errBack);
      } else if(navigator.mozGetUserMedia) { // moz-prefixed
          navigator.mozGetUserMedia(videoObj, function(stream){
              video.src = window.URL.createObjectURL(stream);
              video.play();
              $("#snap").show();
          }, errBack);
      }
  
  
  
  // Get-Save Snapshot - image 
      document.getElementById("snap").addEventListener("click", function() {
          context.drawImage(video, 0, 0, 640, 480);
          // the fade only works on firefox?
          $("#video").fadeOut("slow");
          $("#canvas").fadeIn("slow");
          $("#snap").hide();
          $("#reset").show();
          $("#upload").show();
  

Answer 1

您永远不会在这部分代码中将视频绘制到 Canvas 上。

此外，navigator.getUserMedia 不再是“标准”，它已更新为 navigator.mediaDevices.getUserMedia，它将返回一个 promise 。

var ctx = c.getContext('2d');
var vid = document.createElement('video');

vid.oncanplay = function() {
  c.width = this.videoWidth;
  c.height = this.videoHeight;
  draw();
}

navigator.mediaDevices.getUserMedia({
  video: true
}).then((stream) => {
  vid.srcObject = stream;
  vid.play();
});

function draw() {
  ctx.drawImage(vid, 0, 0);
  requestAnimationFrame(draw);
}

<canvas id="c"></canvas>

和a fiddle for chrome因为它不允许在 SO 片段中使用 gUM。

注意:如果您需要支持旧的实现，请检查官方 WebRTC polyfill，adapter.js