如何通过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();
【电脑网页摄像头权限开启方法 如何设置浏览器调用摄像头】
- 怎么制作压缩包或者文件的网址链接 如何制作自己的网页链接
- 涂了硅胶不能开机急急急急急急急 使用电脑硅胶 中毒了
- 联通送的摄像头怎么样
- 消防灯一直闪是有摄像头吗
- 平板电脑是pc端还是手机端
- 行李箱太紧会压坏电脑吗
- 小度的摄像头一直开着吗
- 笔记本电脑有显卡吗
- 电脑是谁发明的
- 手机摄像头mp是什么意思