HTML5調用攝像頭並拍照

利用html5特性，調用攝像頭，並利用canvas拍照

先簡單的添加需要的控制項<video id="video" autoplay=""style='width:640px;height:480px'></video><button id='picture'>PICTURE</button> <canvas id="canvas" width="640" height="480"></canvas>並在script中定義var video = document.getElementById("video");var context = canvas.getContext("2d")var errocb = function () {                          console.log('sth wrong!');                     }

然後，簡單的說就是利用html5的api navigator.getUserMedia來開啟設備的攝像頭，瀏覽器上會出現圖示中的提示if (navigator.getUserMedia) { // 標準的API                navigator.getUserMedia({ "video": true }, function (stream) {                    video.src = stream;                    video.play();                }, errocb);} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API                navigator.webkitGetUserMedia({ "video": true }, function (stream) {                    video.src = window.webkitURL.createObjectURL(stream);                    video.play();                }, errocb); }

網上有些例子中，navigator.getUserMedia第一個參數是『video』，這可能是早期的版本，現在必須是obj還有關於getUserMedia和webkitGetUserMedia 的判斷，網上有這麼寫的navigator.getUserMedia = (navigator.getUserMedia ||                            navigator.webkitGetUserMedia ||                            navigator.mozGetUserMedia ||                            navigator.msGetUserMedia);但要注意，他們綁定video.src的方法不一樣，本人沒有測過createObjectURL是否通用

拍照功能就是簡單的調用canvas中的drawImage即可document.getElementById("picture").addEventListener("click", function () {                context.drawImage(video, 0, 0, 640, 480); });所有script代碼如圖示

然後瀏覽器中就能看到攝像頭，點擊picture，就會在把當前攝像頭的圖片就會出現在右邊了