如何使用 getUserMedia 通过用户的网络摄像头捕获图像？答案

【问题标题】：How can I capture an image via the user's webcam using getUserMedia?如何使用 getUserMedia 通过用户的网络摄像头捕获图像？
【发布时间】：2015-11-28 19:20:17
【问题描述】：

我想在网络上制作一个程序，该程序将通过用户的网络摄像头捕获图像。

我正在使用getUserMedia Web API。这是我的代码，但它不起作用。如何更改它以捕获网络摄像头图像？

<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>

</script>

有JS：

var video = document.querySelector("#videoElement");

navigator.getUserMedia, elem = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

console.log(navigator.getUserMedia);

if (navigator.getUserMedia) {
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // do something
}

【问题讨论】：

当您说“它不起作用”时，您能否指定您看到的错误以及预期的行为应该是什么？添加一个有效的示例也会有所帮助。
我没有出错，当我看到教程时它要求我的网络摄像头获得许可，但在我的应用程序中什么也没发生。
@PumpkinSeed 这很可能是因为您没有连接网络摄像头或其他程序已经在使用它。

标签： javascript html getusermedia

【解决方案1】：

您可以使用此工作示例

 <!DOCTYPE html>
<html>
  <head>
  </head>
  <body onload="init();">
    <h1>Take a snapshot of the current video stream</h1>
   Click on the Start WebCam button.
     <p>
    <button onclick="startWebcam();">Start WebCam</button>
    <button onclick="stopWebcam();">Stop WebCam</button> 
       <button onclick="snapshot();">Take Snapshot</button> 
    </p>
    <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video>
  <p>

        Screenshots : <p>
      <canvas  id="myCanvas" width="400" height="350"></canvas>  
  </body>
  <script>
      //--------------------
      // GET USER MEDIA CODE
      //--------------------
          navigator.getUserMedia = ( navigator.getUserMedia ||
                             navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia ||
                             navigator.msGetUserMedia);

      var video;
      var webcamStream;
            
      function startWebcam() {
        if (navigator.getUserMedia) {
           navigator.getUserMedia (

              // constraints
              {
                 video: true,
                 audio: false
              },

              // successCallback
              function(localMediaStream) {
                  video = document.querySelector('video');
                 video.srcObject=localMediaStream;
                 webcamStream = localMediaStream;
              },

              // errorCallback
              function(err) {
                 console.log("The following error occured: " + err);
              }
           );
        } else {
           console.log("getUserMedia not supported");
        }  
      }
            
      function stopWebcam() {
          webcamStream.stop();
      }
      //---------------------
      // TAKE A SNAPSHOT CODE
      //---------------------
      var canvas, ctx;

      function init() {
        // Get the canvas and obtain a context for
        // drawing in it
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');
      }

      function snapshot() {
         // Draws current image from the video element into the canvas
        ctx.drawImage(video, 0,0, canvas.width, canvas.height);
      }

  </script>
</html>

【讨论】：

我建议您使用相关代码发布一个新问题，例如您遇到的有据可查的错误..
我收到的错误是Uncaught TypeError: webcamStream.stop is not a function at stopWebcam (snapshot:78) at HTMLButtonElement.onclick (snapshot:21)
检查你的代码......因为我很清楚 webcamStream.stop() 是一个函数......并且正如在你用你的代码发布一个新问题之前所建议的......而不是消息仅错误
出现此错误不允许加载本地资源：blob:null/ae3137ac-05ad-43ee-be8e-40c85984c987
刚刚在 Chrome 中尝试了这个示例，但它不起作用。下面的行将不起作用，因为它表示找不到具有该签名的函数： video.src = window.URL.createObjectURL(localMediaStream);我将其替换为： video.srcObject = localMediaStream;让它工作。虽然停止按钮不起作用，因为 Chrome 说网络摄像头流上没有停止功能。

【解决方案2】：

对 getUserMedia api 进行了更新，现在公开了 takePhoto 和 grabFrame。 grabFrame 方法不那么令人兴奋，因为它完成了我们一直在做的事情，只是从流中返回下一个视频帧，但 takePhoto 会中断流以使用相机“最高可用的摄影相机分辨率”来捕获压缩图像块。更多细节在这里：google devs

var stream, imageCapture; 

function getMediaStream()
{ 
    window.navigator.mediaDevices.getUserMedia({video: true})
    .then(function(mediaStream)
    { 
        stream = mediaStream; 
        let mediaStreamTrack = mediaStream.getVideoTracks()[0];
        imageCapture = new ImageCapture(mediaStreamTrack);
        console.log(imageCapture);
    })
    .catch(error);
}

function error(error)
{ 
    console.error('error:', error); 
}

function takePhoto(img)
{ 
    const img = img || document.querySelector('img');

    imageCapture.takePhoto()
    .then(blob => {
        let url = window.URL.createObjectURL(blob);
        img.src = url;

        window.URL.revokeObjectURL(url); 
    })
    .catch(error);
}; 

/* just call */ 
getMediaStream(); 

/* and when you want to capture an image */ 
takePhoto();

【讨论】：

url.revokeObjectURL(blob); 不。
revokeObjectUrl 打破了这个例子。您应该只在完成 URL 后使用它（即清除 <img> 元素）

【解决方案3】：

getUserMedia IE11 不支持，看看这个链接：https://caniuse.com/#search=getuserMedia

所以如果你仍然想使用 getUserMedia 的核心属性，那么你需要使用 polyfill。看看这个 polyfilllink：https://github.com/addyosmani/getUserMedia.js

【讨论】：