获得对摄像头的访问权

现代浏览器可直接访问摄像头，Warning: 直接访问摄像头是一项强大功能，需要征得用户的同意，并且网站需要托管在安全来源 (HTTPS) 上。

获得对摄像头的访问权
我们可以利用 WebRTC 规范中名为 getUserMedia() 的 API 直接访问摄像头。此时系统将提示用户授予麦克风和摄像头的访问权。

如果授权成功，该 API 将返回一个 MediaStream，其中包含来自摄像头的数据，然后我们可以将数据附加到一个元素、播放它以显示实时预览或将其附加到一个以获取快照。

要从摄像头获取数据，我们只需在传递给 getUserMedia() API 的约束对象中设置 video: true。

这段代码本身的用处并不大。我们所能做的就是获取视频数据并进行播放。

从摄像头获取快照
要从摄像头获取原始数据，我们需要获取 getUserMedia() 创建的照片信息流，然后处理数据。不同于 Web Audio，并没有专用的照片信息流处理 API 可用来处理网络视频，因此我们需要稍微用点歪招才能从用户的摄像头采集快照。

操作流程如下：

1、创建一个 canvas 对象，用来绘制来自摄像头的图帧

2、获得对摄像头照片信息流的访问权

3、将其附加到一个 video 元素

4、如果想精确地采集某一帧，可以利用 drawImage() 将 video 元素中的数据添加到 canvas 对象。

<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="snapshot" width=320 height=240></canvas>
<script>
  var player = document.getElementById('player'); 
  var snapshotCanvas = document.getElementById('snapshot');
  var captureButton = document.getElementById('capture');


  var handleSuccess = function(stream) {
    
    
    // Attach the video stream to the video element and autoplay.
    player.srcObject = stream;
  };


  captureButton.addEventListener('click', function() {
    
    
    var context = snapshot.getContext('2d');
    // Draw the video frame to the canvas.
    context.drawImage(player, 0, 0, snapshotCanvas.width, 
        snapshotCanvas.height);
  });


  navigator.mediaDevices.getUserMedia({
    
    video: true})
      .then(handleSuccess);
</script>

将来自摄像头的数据存储在 canvas 对象中后，就可以对其进行多种处理。您可以：

1、将其直接上传至服务器

2、将其存储在本地

3、对图像应用好玩的特效

不需要时停止从摄像头流式传输视频
最好在不再需要时停止使用摄像头。这样做不仅可以节约电池电量和处理能力，还能增加用户对应用的体验。

要停止访问摄像头，只需在 getUserMedia() 返回的照片信息流的每个视频磁轨上调用 stop()

<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="snapshot" width=320 height=240></canvas>
<script>
  var player = document.getElementById('player'); 
  var snapshotCanvas = document.getElementById('snapshot');
  var captureButton = document.getElementById('capture');
  var videoTracks;

  var handleSuccess = function(stream) {
    
    
    // Attach the video stream to the video element and autoplay.
    player.srcObject = stream;
    videoTracks = stream.getVideoTracks();
  };

  captureButton.addEventListener('click', function() {
    
    
    var context = snapshot.getContext('2d');
    context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height);

    // Stop all video streams.
    videoTracks.forEach(function(track) {
    
    track.stop()});
  });

  navigator.mediaDevices.getUserMedia({
    
    video: true})
      .then(handleSuccess);
</script>

如果用户之前未授予网站对摄像头的访问权，则调用 getUserMedia 时浏览器会立即提示用户授予网站对摄像头的访问权。

用户讨厌在其机器上收到索要功能强大设备访问权的提示，他们常常会屏蔽权限请求。最好的做法是在首次需要权限时只请求访问摄像头。一旦用户授予了访问权，就不会再次收到提示。但如果用户拒绝授权，您就无法再次获得访问权，除非他们手动更改摄像头权限设置。

获得对摄像头的访问权

猜你喜欢