前端攻城狮也可以自拍啦！WebRTC（Web Real-Time Communication，网页实时通信），是一个支持

WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。

1、getUserMedia

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

获取摄像头影像主要是通过navigator.getUserMedia这个接口，这个接口的支持情况已经逐渐变好了：点这里

不过，使用的时候还是要加上前缀的，兼容代码：

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

语法：

navigator.getUserMedia(constraints, successCallback, errorCallback);

参数说明：

constraints：Object类型，指定了请求使用媒体的类型
succeCallback：启用成功时的函数，它传入一个参数，为视频流对象，可以进一步通过window.URL.createObjectURL()接口把视频流转换为对象URL。
errorCallback：启动失败时的函数。它传入一个参数，为错误对象（chrome）或错误信息字符串（Firefox），可能值：

PERMISSION_DENIED：用户拒绝提供信息。
NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。
MANDATORY_UNSATISFIED_ERROR：无法发现指定的硬件设备。

例如：要启用视频设备（摄像头），可这样：

navigator.getUserMedia({   
  video: true  
});

如果要同时启用视频设备和音频设备，可这样：

navigator.getUserMedia({   
  video: true,   
  audio: true  
});

2、获取摄像头

var URL = window.URL || window.webkitURL; // 获取到window.URL对象    
navigator.getUserMedia({   
  video: true   
}, function(stream) {   
  video.src = URL.createObjectURL(stream);// 将获取到的视频流对象转换为地址   
  video.play();      
}, function(error) {   
  console.log(error.name || error);   
});

3、截图

除了实时直播外，我们还可以做实时截图效果，这时我们需要利用元素来画图，代码如下：



var canvas = document.getElementById('canvas');   
var ctx = canvas.getContext('2d');   
var width = video.width;   
var height = video.height;   
canvas.width = width;   
canvas.height = height;

ctx.drawImage(video, 0, 0, width, height);

4、保存图片

当然，截图后，你也可以保存下来：

下载图片   

var url = canvas.toDataURL('image/png');  
document.getElementById('download').src = url;

5、完整实例

实例代码（由于安全限制问题，请将代码复制到本地运行）：

  
   
     
       
       
    
      #canvas,#video {
        float: left;   
        margin-right: 10px;   
        background: #fff;   
      }       
      .box {   
        overflow: hidden;   
        margin-bottom: 10px;   
      }
    
     
     
    
      
      
    
    直播
    截图

当点击直播按钮时，电脑会提示用户是否允许使用摄像头，允许之后，网页上就可以实时显示摄像头影像了。如果不允许，就会触发错误事件。