JS 如何通过WebRTC接口获取摄像头影像并截图

内容摘要

这篇文章主要为大家详细介绍了JS 如何通过WebRTC接口获取摄像头影像并截图，具有一定的参考价值，可以用来参考一下

文章正文

这篇文章主要为大家详细介绍了JS 如何通过WebRTC接口获取摄像头影像并截图，具有一定的参考价值，可以用来参考一下。

WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API，
目前已经是W3C的推荐标准。本文主要阐述如何通过WebRTC的接口获取摄像头影像并截图。

获取摄像头影像

要播放摄像头的影像，首先需要一个video标签：

获取摄像头影像主要是通过navigator.getUserMedia这个接口，在caniuse.com上查询一下这个接口的支持情况，
可以看到目前只有Chrome和Firefox支持得比较好，而且都要加上自家的前缀，移动端几乎全线不可用。

getUserMedia支持情况

为了便于使用这个接口，先做一下兼容性处理：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.getUserMedia接口的原型如下；

navigator.getUserMedia(constraints, successCallback, errorCallback);

第一个参数是Object类型，里面包含了需要启用的多媒体设备，例如要启用视频设备（摄像头），就要传入：

{ video: true }

如果要启用视频设备和音频设备（麦克风），就要传入：

{ video: true, audio: true }

另外两个参数分别是启用成功和失败时的回调函数。启用成功的时候，successCallback的第一个参数为视频流对象，
可以进一步通过window.URL.createObjectURL接口把视频流转换为对象URL；启用失败的时候，
errorCallback的第一个参数是错误对象（Chrome）或错误信息字符串（Firefox）。navigator.getUserMedia的调用代码如下：

JS代码如下：


/**
 * 
 * @param 
 * @arrange （www.idcnote.com）
 **/
var video = document.getElementById('video');
navigator.getUserMedia({
    video: true
}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
    video.play();
}, function(error) {
    alert(error.name || error);
});

浏览器执行这段代码的时候，会提示用户是否允许使用摄像头，允许之后，网页上就可以实时显示摄像头影像了。如果不允许，就会触发错误事件。

截图

截图的原理是把影像的某一帧传入到canvas中绘制，先创建截图按钮以及canvas元素：

canvas中绘制图片的接口是drawImage。它有四个参数，分别是绘制坐标（x、y）与图片尺寸（宽、高）。图片尺寸跟视频尺寸一致，但视频尺寸必须在video加载完成后才能获取： JS代码如下：


/**
 * 
 * @param 
 * @arrange （www.idcnote.com）
 **/
video.addEventListener('loadeddata', function() {
    console.log(this.videoWidth);
}, false);

很遗憾，上述代码在Firefox中获取到的值是0。即使在playing事件中，获取到的也还是0。所以，没其他办法的情况下只好通过setTimeout监听： JS代码如下：


/**
 * 
 * @param 
 * @arrange （www.idcnote.com）
 **/
function bindCapture() {
    var videoWidth = video.videoWidth, videoHeight = video.videoHeight;
    if (videoWidth && videoHeight) {
        var canvas = document.getElementById('canvas');
        canvas.width = videoWidth;
        canvas.height = videoHeight;
        document.getElementById('capture').addEventListener(
            'click',
            function() {
                canvas.getContext('2d').drawImage(
                    video, 0, 0, videoWidth, videoHeight
                );
            },
            false
        );
    } else {
        setTimeout(bindCapture, 200);
    }
}
bindCapture();

至此，截图功能完成。

后记

如果在一个浏览器中启用了摄像头，那么在其他浏览器中再启用它就会触发错误事件，但同一个浏览器的标签页和窗口则没有问题。执行navigator.getUserMedia的时候，Firefox除了“允许”、“不允许”以外，还提供了一个“暂不”的选项，如果用户选择了这个选项，既不会触发成功事件也不会触发错误事件。如果要提供保存截图的功能，最好是把图片发送到服务器后由服务器提供下载地址，网上提供的本地保存的方法体验都不好，尤其是Firefox。

注：关于JS 如何通过WebRTC接口获取摄像头影像并截图的内容就先介绍到这里，更多相关文章的可以留意

代码注释

上一篇 JS通过开发者工具监控事件触发示例下一篇 Javascript的类继承探讨

作者：喵哥笔记

学的不仅是技术，更是梦想！