本文主要介绍，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];try{video.src=window.URL.createObjectURL(stream);}catch(e){ video.srcObject = 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>
