如何设置浏览器调用摄像头（电脑网页摄像头权限开启方法）

如何通过js调用本地摄像头呢？获取后如何对视频进行截图呢？在这里跟大家做一个简易的Demo来实现以上几个功能。涉及到的知识点navigator.getUserMedia可以通过该函数来打开摄像头获

如何通过js调用本地摄像头呢？获取后如何对视频进行截图呢？在这里跟大家做一个简易的Demo来实现以上几个功能。

涉及到的知识点navigator.getUserMedia 可以通过该函数来打开摄像头获得流数据canvas.drawImage 可以通过该函数来将视频的某帧画到canvas画布上canvas.toDataURL 可以通过该函数将canvas画布生成图片url实现的功能点打开摄像头暂停摄像头对视频进行截图html简单布局

以下先通过HTML我们来实现一个简单的布局，包括样式和按钮。

H5 canvas 调用摄像头进行绘制 html,body{ width:100%; height:100%; padding: 0px; margin: 0px; overflow: hidden; } #canvas{ width:500px; height:300px; } #video{ width:500px; height:300px; } .btn{ display:inline-block; text-align: center; background-color: #333; color:#eee; font-size:14px; padding:5px 15px; border-radius: 5px; cursor:pointer; }

您的浏览器不支持H5 ,请更换或升级! 截图暂停打开

样子差不多是这样的:

hahiahia 空白一片

我们将video进行了隐藏，然后加上了几个按钮，还有canvas以及最底部的图片展示区域（用来存放截图图片）。

js实现功能

这里先贴下核心代码：

navigator.getUserMedia({ video : {width:500,height:300}},function(stream){ LV.video.srcObject = stream; LV.video.onloadedmetadata = function(e) { LV.video.play(); };},function(err){ alert(err);//弹窗报错})

相关的知识点可以参考:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

然后根据页面逻辑实现事件以及其他功能，包括：截图、暂停。

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; var events = { open : function(){ LV.open(); }, close : function(){ console.log(LV.timer); clearInterval(LV.timer); }, screenshot : function(){ //获得当前帧的图像并拿到数据 var image = canvas.toDataURL(\\’jpeg\\’); document.getElementById(\\’show\\’).innerHTML = \\\' 如何设置浏览器调用摄像头（电脑网页摄像头权限开启方法） \\’ } }; var LV = { video : document.getElementById(\\’video\\’), canvas : document.getElementById(\\’canvas\\’), timer : null, media : null, open :function(){ if(!LV.timer){ navigator.getUserMedia({ video : {width:500,height:300} },function(stream){ LV.video.srcObject = stream; LV.video.onloadedmetadata = function(e) { LV.video.play(); }; },function(err){ alert(err);//弹窗报错 }) } if(LV.timer){ clearInterval(LV.timer); } //将画面绘制到canvas中 LV.timer = setInterval(function(){ LV.ctx.drawImage(LV.video,0,0,500,300); },15); }, init : function(){ LV.ctx = LV.canvas.getContext(\\’2d\\’); //绑定事件 document.querySelectorAll(\\’[filter]\\’).forEach(function(item){ item.onclick = function(ev){ var type = this.getAttribute(\\’filter\\’); events[type].call(this,ev); } }); return LV; } }; LV.init();