手機調取攝像頭問題（getUserMedia）

先說壞消息，蘋果機沒法玩這個！！！

而且，必須擁有 https 的安全協議！！！

 

而安卓機想完成這個功能倒是很 easy 的，看一眼代碼

主要傳入三個參數，配置對象，成功，失敗

var mediaOpts = {
    audio: false,
    video: true,
}
function successFunc(stream) {
    var video = document.querySelector('video');
    if ("srcObject" in video) {
        video.srcObject = stream
    } else {
        video.src = window.URL && window.URL.createObjectURL(stream) || stream
    }
    video.play();
}
function errorFunc(err) {
    alert(err.name);
}

再使用 getUserMeida 就行了

navigator.getUserMedia(mediaOpts, successFunc, errorFunc);

 

但是，這個方法兼容性非常的非常不妙，所以我們需要加上一堆兼容代碼

// getUserMedia 被標准廢除了，mediaDevices 正在取代中
if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function(constraints) {
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        if (!getUserMedia) {
            return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
        }
        return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
        });
    }
}
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);

　　

至於開啟的是前置還是后置攝像頭，那就有些麻煩了，默認為打開前置攝像頭（自拍的那個攝像頭）。

騰訊的一個 H5 為我提供了這樣的方法：

MediaStreamTrack.getSources(function(sourceInfos) {
    for (var i = 0; i != sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i]; //這里會遍歷audio,video，所以要加以區分 
        if (sourceInfo.kind === 'video') { exArray.push(sourceInfo.id); }
    }
    if (!navigator.getUserMedia) {alert('不支持 getUserMedia 方法')}

    mediaOpts.video = {
        optional: [{
            sourceId: exArray[1]
        }]
    }
    navigator.getUserMedia(mediaOpts, successFunc, errorFunc);
});

官方 MDN 給出的是這樣的辦法：

mediaOpts.video = { facingMode: "environment"} // 或者 "user"

實驗證明，后者並沒有效果。

 

此處可見案例1，案例2 

 

以上，調取設備攝像頭使用局限還是太多，

獲取瀏覽器權限實屬不易，更別提設備權限，微信等 api 提供的也僅是拍照和錄像，

所以要完成實時的 AR 場景現在的 Web 技術還不足夠。

要么轉向 WebApp，要么用其他方案替代（如活動就只要拍照識別，蘋果機使用全景虛擬場景等）。