用HTML5打开摄像头
网上很多关于用HTML5打开本地摄像头的文章，但各有瑕疵。根据我自己的亲身体验，我分享一下我用HTML5打开摄像头的经验。废话不多说，直接看代码。
HTML代码：<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
接下来是js代码：
打开摄像头：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);
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上测试成功的。
还有一点，如果没成功，很可能是你不小心关闭了chrome打开摄像头的权限，你重新启用权限就可以啦！
页:
[1]