聚合国内IT技术精华文章,分享IT技术精华,帮助IT从业人士成长

通过WebRTC获取摄像头影像

2013-12-11 12:05 浏览: 930255 次 我要评论(0 条) 字号:

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

获取摄像头影像

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

<video id="video"></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的调用代码如下:

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元素:

<input type="button" id="capture" value="截图" />
<canvas id="canvas"></canvas>

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

video.addEventListener('loadeddata', function() {
console.log(this.videoWidth);
}, false);

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

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。


网友评论已有0条评论, 我也要评论

发表评论

*

* (保密)

Ctrl+Enter 快捷回复