Js調用攝像頭拍照

HTML部分代碼

<!--video用于顯示媒體裝置的視訊流，自動播放-->
<video id="video" autoplay style="width:480px;height:320px"></video>
<div>
  <button id="capture">
    拍照                                                         <!--拍照按鈕-->
  </button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>           <!--繪制video截圖-->      

Js

//通路使用者媒體裝置相容的方法
function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //新版API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏覽器
        navigator.webkitGetUserMedia(constraints, success, error);
    } else if (navigator.mozGetUserMedia) {
        //Firefox浏覽器
        navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
        //舊版API
        navigator.getUserMedia(constraints, success, error);
    }
}

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//成功的回調函數
function success(stream) {
    //相容的webkit核心浏覽器
    var CompatibleURL = window.URL || window.webkitURL
    //将視訊流設定為video元素的源
    video.src = CompatibleURL.createObjectURL(stream);
    video.play();
}

//異常的回調函數
function error(error) {
    console.log(\'通路使用者媒體裝置失敗：\', error.name, error.message);
}

if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    //調用使用者媒體裝置，調用攝像頭
    getUserMedia({ video: { width: 480, height: 320 } }, success, error);
} else {
    alert(\'你的浏覽器不支援通路使用者媒體裝置！\');
}

//綁定拍照按鈕的單擊事件
document.getElementById("capture").addEventListener("click", function () {
    context.drawImage(video, 0, 0, 480, 320);//将video繪制在canvas上
});