如何通过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>
样子差不多是这样的:
hahiahia 空白一片
我们将video进行了隐藏，然后加上了几个按钮，还有canvas以及最底部的图片展示区域（用来存放截图图片） 。
js实现功能
这里先贴下核心代码：
navigator.getUserMedia({video : {width:500,height:300}},function(stream){LV.video.srcObject = stream;LV.video.onloadedmetadata = https://www.scwdwl.com/n/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=https://www.scwdwl.com//”//’+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();
【电脑网页摄像头权限开启方法 如何设置浏览器调用摄像头】
- 电脑一键还原软件排行 电脑还原软件有哪些
- 电脑流氓软件排名 电脑c盘清理大师怎么卸载
- 网页设计需要学什么
- 电脑缺少HEVC编解码器 avi解码是什么
- 最火的动态壁纸app 电脑屏幕保护软件
- 可以播放rmvb格式视频 电脑rmvb用什么播放器可以看
- 电脑为什么打不开
- 为什么电脑连不上无线网
- 淘宝直播用什么摄像头
- 电脑为什么这么卡