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

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

2022年1月16日 11:36:57 • 投稿 • 我要推广

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

涉及到的知识点

navigator.getUserMedia 可以通过该函数来打开摄像头获得流数据
canvas.drawImage 可以通过该函数来将视频的某帧画到canvas画布上
canvas.toDataURL 可以通过该函数将canvas画布生成图片url

实现的功能点

打开摄像头
暂停摄像头
对视频进行截图

html简单布局

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>H5 canvas 调用摄像头进行绘制</title>     <style>         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;         }     </style> </head> <body>     <video id="video" autoplay="true" style="background-color:#ccc;display:none;"></video>     <div style="width:500px;height:300px;margin:30px auto;">         <canvas id="canvas" width="500px" height="300px">您的浏览器不支持H5 ,请更换或升级!</canvas>         <span class="btn" filter="screenshot">截图</span>         <span class="btn" filter="close">暂停</span>         <span class="btn" filter="open">打开</span>     </div>     <div style="width:500px;height:300px;margin:40px auto;" id="show"></div> </body> </html>

样子差不多是这样的: 如何设置浏览器调用摄像头（电脑网页摄像头权限开启方法）-1

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 = '<img src="'+image+'" style="width:500px;height:300px;" />'         }     };     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();

原谅我放荡不羁的命名 …

秒鲨号所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体)，仅供学习参考。用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权，请联系我们反馈！本站将在三个工作日内改正。