js 调用本地摄像头通过canvas进行截图

如何通过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>

样子差不多是这样的:

我们将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);//弹窗报错
})

相关的知识点可以参考:undefined

然后根据页面逻辑实现事件以及其他功能，包括：截图、暂停。

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 = 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可以点击 undefined