getUserMedia（）-在手機上選擇后置攝像頭

Question

這是我的問題。

我正在制作一個使用JS-OCR拍照和檢測單詞的小應用程序。 它運作良好，但是我只能使用前置攝像頭。 我的想法是僅使用后置攝像頭，沒有必要選擇切換攝像頭。

我正在閱讀有關getUserMedia()函數的信息，但無法解決問題。 這是所涉及的代碼（函數searchForRearCamera() ）：

function searchForRearCamera() {
    var deferred = new $.Deferred();

    //         Check that the browser supports getUserMedia.
    // If it doesn't show an alert, otherwise continue.
    if (navigator.getUserMedia) {
        // Request the camera.
        navigator.getUserMedia(
            // Constraints
            {
                video: true
            },

            // Success Callback
            function (localMediaStream) {

            },

            // Error Callback
            function (err) {
                // Log the error to the console.
                console.log('The following error occurred when trying to use getUserMedia: ' + err);
            }
        );

    } else {
        alert('Sorry, your browser does not support getUserMedia');
    }

    //MediaStreamTrack.getSources seams to be supported only by Chrome

    if (MediaStreamTrack && MediaStreamTrack.getSources) {

        MediaStreamTrack.getSources(function (sources) {
            var rearCameraIds = sources.filter(function (source) {
                return (source.kind === 'video' && source.facing === 'environment');
            }).map(function (source) {
                return source.id;
            });

            if (rearCameraIds.length) {
                deferred.resolve(rearCameraIds[0]);
            } else {
                deferred.resolve(null);
            }
        });
    } else {
        deferred.resolve(null);
    }

    return deferred.promise();
}

這是演示

Answer 1

navigator.getUserMedia早已被棄用。 立即使用navigator.mediaDevices.getUserMedia 。

要獲取后置攝像頭，可以使用MediaConstraint：video：facingMode屬性。 可用值為'user' （前置攝像頭）和'environment' （后置攝像頭）。

 navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'environment' } }) .then(stream => vid.srcObject = stream) .catch(console.error); 

 <video muted autoplay id="vid"></video> 

或作為一個小玩意，因為null來源的StackSnippet的iframe可能會阻止對gUM的請求。