WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API。
1、getUserMedia
要播放摄像头的影像,首先需要一个video标签:
1 |
|
获取摄像头影像主要是通过navigator.getUserMedia
这个接口,这个接口的支持情况已经逐渐变好了:点这里
不过,使用的时候还是要加上前缀的,兼容代码:
1 2 3 |
|
1 |
|
参数说明:
constraints
:Object类型,指定了请求使用媒体的类型succeCallback
:启用成功时的函数,它传入一个参数,为视频流对象,可以进一步通过window.URL.createObjectURL()
接口把视频流转换为对象URL。errorCallback
:启动失败时的函数。它传入一个参数,为错误对象(chrome)或错误信息字符串(Firefox),可能值:
PERMISSION_DENIED:用户拒绝提供信息。
NOT_SUPPORTED_ERROR:浏览器不支持硬件设备。
MANDATORY_UNSATISFIED_ERROR:无法发现指定的硬件设备。
例如:要启用视频设备(摄像头),可这样:
1 2 3 |
|
如果要同时启用视频设备和音频设备,可这样:
1 2 3 4 |
|
2、 获取摄像头
1 2 3 4 5 6 7 8 9 |
|
3、 截图
除了实时直播外,我们还可以做实时截图效果,这时我们需要利用<canvas>
元素来画图,代码如下:
1 2 3 4 5 6 7 8 9 10 |
|
4、 保存图片
当然,截图后,你也可以保存下来:
1 2 3 4 |
|
5、 完整实例
实例代码(由于安全限制问题,请将代码复制到本地运行):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
|