js獲取本地攝像頭並拍照

/*
 * 獲取本地設備列表
 * label爲設備名稱、deviceId爲設備ID
 * 注意：設備名稱需要瀏覽器賦予權限才能獲取到，新版的火狐瀏覽器和谷歌瀏覽器均能賦予權限
 */
navigator.mediaDevices.enumerateDevices()
.then(function (devices) {
    devices.forEach(function (device) {
        //打印設備類型、設備名稱、設備ID
        console.log(device.kind + ":" + device.label + "  id=" + device.deviceId);
        //根據設備名稱，去獲取特定的攝像頭
        if (device.label.indexOf("Logitech") != -1){
            getCamera(device.deviceId);
        }
    });
}).catch(function (err) {
    console.log(err.name + ":" + err.message);
})


/*
 * 初次使用，沒有瀏覽器賦予攝像頭權限，獲取不到設備名稱，在這裏發起一次攝像頭調用
 * 根據瀏覽器彈框提示，賦予攝像頭永久權限
 * 瀏覽器賦予權限後，前面就能夠獲取到設備名稱label，能夠正常獲取video視頻，此處就不再調用
 */
var v = document.querySelector("video");
if (v == null){
    getCamera_lvke("");
}

/*
 * 根據設備ID獲取特定的攝像頭，並將視頻流展示到頁面
 */
function getCamera(deviceId) {
    var constraints;
    if (deviceId != ''){//傳入的設備ID不爲空，設置特定的設備ID
        constraints = {
            audio: false,
            video: { deviceId: { exact: deviceId}}
        }
    } else {//傳入的設備ID爲空，不設定設備ID，video開啓就行
        constraints = {
            audio: false,
            video: true
        }
    }

    //創建video標籤
    var video = document.createElement('video');
    //設置video元素參數
    video.setAttribute('autoplay', 'autoplay');
    video.style.width = '198px';
    video.style.height = '148px';
    video.setAttribute("id","lvke_cam");

    //將創建的video標籤放入頁面上指定的div內
    document.getElementById("passenger_camera").appendChild(video);
    //獲取攝像頭
    navigator.mediaDevices.getUserMedia(constraints)
        .then(function (mediaStream) {
            //將獲取到的視頻流放入video標籤內展示
            var video = document.getElementById('lvke_cam');
            if ("srcObject" in video) {
                video.srcObject = mediaStream;
            } else {
                video.src = window.URL.createObjectURL(mediaStream);
            }
            video.onloadedmetadata = function(e){
                video.play();
            }
        }).catch(function (err) {
        console.log(err.message);
    })
}


//拍照
function capture(){
    //創建canvas標籤
    var canvas = document.createElement('canvas');
    //設置canvas寬高
    canvas.width = 1280;
    canvas.height = 960;
    var context = canvas.getContext('2d');
    //獲取之前獲取到的視頻video標籤
    var video = document.getElementById('lvke_cam');
    //利用video畫圖
    context.drawImage(video, 0, 0, 1280, 960);
    //將canvas圖像轉換爲base64字符串，設置格式以及壓縮比例
    var datauri =  canvas.toDataURL('image/jpeg', 90 / 100 );
    //將base64字符串放入頁面圖片顯示區域，顯示拍照的圖片
    $("#PassengerPic").attr("src",datauri);
}