html5打开摄像头并用canvas模拟拍照

前台代码：

<video id="video" width="640" height="480" autoplay></video><button id="snap">Snap Photo</button><canvas id="canvas" width="640" height="480"></canvas>

var aVideo=document.getElementById('video');                var aCanvas=document.getElementById('canvas');                var ctx=aCanvas.getContext('2d');                                navigator.getUserMedia  = navigator.getUserMedia ||                          navigator.webkitGetUserMedia ||                          navigator.mozGetUserMedia ||                          navigator.msGetUserMedia;//获取媒体对象（这里指摄像头）              navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息                                function gotStream(stream) {                        video.src = URL.createObjectURL(stream);                        video.onerror = function () {                          stream.stop();                        };                        stream.onended = noStream;                        video.onloadedmetadata = function () {                          alert('摄像头成功打开！');                        };                }                function noStream(err) {                        alert(err);      }

document.getElementById("snap").addEventListener("click", function() {                                ctx.drawImage(aVideo, 0, 0, 640, 480);//将获取视频绘制在画布上});