获取摄像头和麦克风权限_获得对摄像头的访问权

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

获得对摄像头的访问权

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

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

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

<video id="player" controls autoplay>video><script>    var player = document.getElementById('player');  var handleSuccess = function(stream) {    player.srcObject = stream;  };  navigator.mediaDevices.getUserMedia({video: true})      .then(handleSuccess);script>

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

从摄像头获取快照

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

操作流程如下：

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

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

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

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

<video id="player" controls autoplay>video><button id="capture">Capturebutton><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">Capturebutton><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 时浏览器会立即提示用户授予网站对摄像头的访问权。

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