getUserMedia() - 在移动设备上选择后置摄像头答案

【问题标题】：getUserMedia() - selecting rear camera on mobilegetUserMedia() - 在移动设备上选择后置摄像头
【发布时间】：2018-10-15 07:54:20
【问题描述】：

这是我的问题。

我正在制作一个使用 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();
}

这是DEMO

【问题讨论】：

如果 sn-p 无法运行，则无需使用 sn-p。只需将代码缩进 4 个空格。也就是说，请阅读minimal reproducible example并减少不必要的代码
嗨@mplungjan，感谢您的回复。解决了，下次学习。 ;)

标签： javascript

【解决方案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);

&lt;video muted autoplay id="vid"&gt;&lt;/video&gt;

或as a fiddle，因为空源 StackSnippet 的 iframe 可能会阻止对 gUM 的请求。

【讨论】：