如何通过js调用本地摄像头？获取后如何截图视频？在这里，我和大家一起做一个简单的演示，实现以上功能。
涉及的知识点
navigator.getUserMedia
可以通过该函数来打开摄像头获得流数据
canvas.drawI***ge
可以通过该函数来将视频的某帧画到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; ***rgin: 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;***rgin: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;***rgin:40px auto;" id="show"></div></body></html>
样子差不多是这样的:
看起来是这样的:
Hahia空是白色的。
我们隐藏了视频，然后添加了几个按钮，以及画布和底部图片显示区(用来存储截图)。
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/media devices/getuser media。
然后根据页面逻辑实现事件等功能，包括截图和暂停。
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 i***ge = canvas.toDataURL('jpeg'); document.getElementById('show').innerHTML = '<img src="'+i***ge+'" 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.drawI***ge(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();
原谅我放荡不羁的命名…
本文来自西绿柿投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/488694.html
微信扫一扫 
