浏览器调用系统摄像头

最近做了一个项目需要调用系统浏览器,故记录相关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里的图片扔给服务端了,具体见我下一篇博客吧。

本文链接:https://56way.com/p/93.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。