前端如何显示服务器摄像头,通过WebRTC获取摄像头影像

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

获取摄像头影像

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

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

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

|| navigator.webkitGetUserMedia

|| navigator.mozGetUserMedia;

navigator.getUserMedia接口的原型如下；navigator.getUserMedia(constraints, successCallback, errorCallback);

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

如果要启用视频设备和音频设备(麦克风)，就要传入：{ video