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上
});