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);//将获取视频绘制在画布上
});

这样就成功啦！
但是！！！还有一点要注意，这在很多人那里都没有提到的，就是，打开摄像头一定要上server上打开，否则没办法使用！因为打开的是属于网络的webcam，需要在server上打开。

目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头，我这个是在chrome上测试成功的。

转载于:https://www.cnblogs.com/weixing/p/6555681.html