现代浏览器可直接访问摄像头,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 时浏览器会立即提示用户授予网站对摄像头的访问权。
用户讨厌在其机器上收到索要功能强大设备访问权的提示,他们常常会屏蔽权限请求。最好的做法是在首次需要权限时只请求访问摄像头。一旦用户授予了访问权,就不会再次收到提示。但如果用户拒绝授权,您就无法再次获得访问权,除非他们手动更改摄像头权限设置。