摘要：能夠前后攝像頭切換，能夠截取當前視頻流圖像兼容各大主流瀏覽器，主要使用的獲取視頻流獲取設備攝像信息之前在本機上測試出現(xiàn)問題，問題在于沒有使用作為測試鏈接，如果使用的話，則項目不能打開攝像頭，這可能與的明文加密有關系如果使用，代碼會報但是這個

能夠前后攝像頭切換，能夠截取當前視頻流圖像

兼容各大主流瀏覽器，

主要使用的api：

// 獲取視頻流
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);

// 獲取設備攝像信息
navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);

之前在本機上測試Chrome出現(xiàn)問題，問題在于沒有使用https作為測試鏈接，如果使用http的話，則項目不能打開攝像頭，這可能與chrome的明文加密有關系

如果使用http，代碼會報
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)
但是這個錯開始并沒有報，開始我直接運行獲取視頻流代碼，項目的代碼仿佛停止運行一般，相應位置的console.log也沒有輸出，這個錯誤也沒有報
后來經(jīng)過調(diào)試，獲取視頻流的代碼放在點擊事件中，錯誤才出來。。

// 多選框更改事件
videoSelect.onchange = getStream;

// 獲取設備音頻輸出設備與攝像設備，這里我只用到了攝像設備
function gotDevices(deviceInfos) {
    console.log("deviceInfos")
    console.log("deviceInfos:", deviceInfos);
    for (let i = 0; i !== deviceInfos.length; i++) {
        let deviceInfo = deviceInfos[i];
        var option = document.createElement("option");
        // console.log(deviceInfo)
        if (deviceInfo.kind === "videoinput") {  // audiooutput  , videoinput
            option.value = deviceInfo.deviceId;
            option.text = deviceInfo.label || "camera " + (videoSelect.length + 1);
              videoSelect.appendChild(option);
        }
    }
}

//訪問用戶媒體設備的兼容方法
function getUserMedia(constrains,success,error){
    if(navigator.mediaDevices.getUserMedia){
        //最新標準API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia){
        //webkit內(nèi)核瀏覽器
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia){
        //Firefox瀏覽器
        navagator.mozGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.getUserMedia){
        //舊版API
        navigator.getUserMedia(constrains).then(success).catch(error);
    }
}

function getStream(){

    if (window.stream) {
        window.stream.getTracks().forEach(function(track) {
            track.stop();
        })
    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
        //調(diào)用用戶媒體設備，訪問攝像頭
        const constraints = {
            audio: true, 
            video: {
                width: { ideal: 1280 },
                height: { ideal: 720 },
                frameRate: { 
                    ideal: 10,
                    max: 15
                },
                deviceId: {exact: videoSelect.value}
            }
        };
        console.log("獲取視頻流");
        getUserMedia(constraints,success,error);
    } else {
        alert("你的瀏覽器不支持訪問用戶媒體設備");
    }
}

//注冊拍照按鈕的單擊事件
document.getElementById("capture").addEventListener("click",function(){
    //繪制畫面
    console.log("點擊事件");
    context.drawImage(video,0,0,480,320);
});

源碼地址