浏览器调用系统摄像头
最近做了一个项目需要调用系统浏览器,故记录相关api如下,在线demo点击这里
要想调用系统摄像头有以下注意事项:
具体的实现原理就是调用 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里的图片扔给服务端了,具体见我下一篇博客吧。
发表评论