浏览器调用系统摄像头

最近做了一个项目需要调用系统浏览器，故记录相关api如下，在线demo点击这里

要想调用系统摄像头有以下注意事项:

1. https的web环境。

2. chrome或者firefox浏览器。

3. 用户需要安装摄像头，并且允许页面访问摄像头

4. 移动端貌似是没有浏览器支持的。。。
   

具体的实现原理就是调用 navigator.mediaDevices.getUserMedia,(之前有个navigator.getUserMedia已废弃)，然后把这摄像头的流作为一个video标签的源输出就好了.

api简介如下：

MediaDevices.getUserMedia()方法提醒用户对通过摄像头或者屏幕共享和（或者）麦克风来获取视频和（或者）音频进行许可。如果用户给予许可，就返回一个Promise 对象，MediaStream对象作为此Promise对象的Resolved［成功］状态的回调函数参数，相应的，如果用户拒绝了许可，或者没有媒体可用的情况下，PermissionDeniedError 或者NotFoundError作为此Promise的Rejected［失败］状态的回调函数参数。注意，由于用户不会被要求必须作出允许或者拒绝的选择，所以返回的Promise对象可能既不会触发resolve 也不会触发 reject。

示例代码如下：

var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });

p.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(mediaStream);
  video.onloadedmetadata = function(e) {
    // Do something with the video here.
  };
});

p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.

额我的示例demo用的旧的api。。。。真尴尬。。。

截取摄像头视频，就是把这个video元素扔到一个canvas里，mdn示例链接

示例代码如下

function catpureWebCam(){    
var context = canvas.getContext("2d")    
var video = document.getElementById("video_stream");    
console.log(video);    
context.drawImage(video, 0, 0, 337,245);       
}

然后我们就可以把canvas里的图片扔给服务端了，具体见我下一篇博客吧。