如何通过js调用本地摄像头呢？获取后如何对视频进行截图呢？在这里跟大家做一个简易的Demo来实现以上几个功能。
涉及到的知识点
- navigator.getUserMedia 可以通过该函数来打开摄像头获得流数据
- canvas.drawImage 可以通过该函数来将视频的某帧画到canvas画布上
- canvas.toDataURL 可以通过该函数将canvas画布生成图片url
实现的功能点
- 打开摄像头
- 暂停摄像头
- 对视频进行截图
html简单布局
以下先通过HTML我们来实现一个简单的布局，包括样式和按钮。
H5 canvas 调用摄像头进行绘制
截图
暂停
打开
样子差不多是这样的:
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 = ''
}
};
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();原谅我放荡不羁的命名 ...
具体已经实现的demo可以点击
https://chrunlee.cn/demos/canvas-video/index.html