本文主要介绍，js+canvas+video ，调用本地摄像头，实现拍照效果，代码如下，供大家参考学习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video width="200px" id="video" height="150px"></video>
<canvas width="200px" id="canvas" height="150px"></canvas>
<p>
<button id="start">打开摄像头</button>
<button id="snap">截取图像</button>
<button id="close">关闭摄像头</button>
</p>
</body>
<script>
// 声明变量
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
video = document.getElementById("video"),
snap = document.getElementById("snap"),
close = document.getElementById("close"),
start = document.getElementById("start"),
MediaStreamTrack;
// 点击打开摄像头
start.addEventListener('click', function () {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
// audio: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
video.src=(window.URL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}else if(navigator.getMedia){
navigator.getMedia({
video: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=stream.getTracks()[1];
video.src=(window.webkitURL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}
});
// 截图
snap.addEventListener('click', function () {
context.drawImage(video, 0, 0,200,150);
});
// 关闭按钮
close.addEventListener('click', function () {
MediaStreamTrack && MediaStreamTrack.stop();
});
</script>
</html>