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上測試成功的。