怎么让浏览器调用摄像头怎么设置浏览器允许打开摄像头

文章插图

如何通过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 = http://www.mnbkw.com/jxjc/171667/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 = http://www.mnbkw.com/jxjc/171667/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();

怎么让浏览器调用摄像头 怎么设置浏览器允许打开摄像头

怎么让浏览器调用摄像头怎么设置浏览器允许打开摄像头