无法访问 webrtc 上的后置摄像头 [chrome:54]答案

【问题标题】：Not able to access rear camera on webrtc [chrome:54]无法访问 webrtc 上的后置摄像头 [chrome:54]
【发布时间】：2016-11-24 06:40:52
【问题描述】：

我正在尝试使用 webrtc 和 threejs 进行 webAR 演示，同时通过我的 android mobile chrome:54 访问摄像头，前置摄像头默认打开。

我检查并尝试通过参考有关堆栈溢出的所有问题来解决此问题，甚至尝试更改数组值但没有运气。谁能告诉我如何通过调整此代码来访问后置摄像头？

    var THREEx = THREEx || {}


  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  window.URL = window.URL || window.webkitURL;

  /**
   * Grab camera
   */
  THREEx.WebcamGrabbing = function() {


    // create video element
    var domElement = document.createElement('video')
    domElement.setAttribute('autoplay', true)

    // window.domElement = video
    domElement.style.zIndex = -1;
    domElement.style.position = 'absolute'


    domElement.style.top = '0px'
    domElement.style.left = '0px'
    domElement.style.width = '100%'
    domElement.style.height = '100%'


    function onResize() {
      // is the size of the video available ?
      if (domElement.videoHeight === 0) return

      var videoAspect = domElement.videoWidth / domElement.videoHeight
      var windowAspect = window.innerWidth / window.innerHeight

    }

    window.addEventListener('resize', function(event) {
      onResize()
    })

    setInterval(function() {
      onResize()
    }, 500)

    // get the media sources
    navigator.mediaDevices.enumerateDevices().then(function(sourceInfos) {
      // define getUserMedia() constraints
      var constraints = {
          video: true,
          audio: false,
        }
        // to mirror the video element when it isnt 'environment'
        // domElement.style.transform   = 'scaleX(-1)'

      // it it finds the videoSource 'environment', modify constraints.video
      for (var i = 0; i != sourceInfos.length; ++i) {
        var sourceInfo = sourceInfos[i];
        if (sourceInfo.kind == "video" && sourceInfo.facing == "environment") {
          constraints.video = {
              optional: [{
                sourceId: sourceInfo.id
              }]
            }
            // not to mirror the video element when it is 'environment'
            // domElement.style.transform   = ''
        }
      }

      // try to get user media
      navigator.getUserMedia(constraints, function(stream) {
        domElement.src = URL.createObjectURL(stream);
      }, function(error) {
        console.error("Cant getUserMedia()! due to ", error);
      });
    });

    this.domElement = domElement
  }

我尝试将其添加到约束中。又是同样的结果。

var constraints = {
                        video: {facingMode: { exact: "environment" }},
                        audio: false
                }

【问题讨论】：

标签： javascript google-chrome three.js webrtc getusermedia

【解决方案1】：

最新的 spac 支持约束中的“面临模式”。但是，Chrome 还不支持“面对模式”。 “sourceId”已弃用，最新规范“deviceId”由“sourceId”替代。我写了demo。

【讨论】：

【解决方案2】：

您是否已将 adapter.js 包含到 polyfill 中？所以你应该可以像这样选择默认相机：

 facingMode: { exact: "environment" }

【讨论】：

谢谢您的回复，能详细点吗？我刚刚将 adapter.js 文件和 facesMode: { exact: "environment" } 添加到我现有的代码 [updated question] 中。我猜我哪里错了，结果似乎和以前一样。
经过一些研究，我发现很少有人建议使用adapter.js，你能告诉我如何在这种情况下使用它吗？
太令人惊讶了，我可以发誓我有一个适用于相同星座的工作解决方案，但我今天已经对其进行了测试，现在我也在寻找一个工作解决方案。 - 你找到方法了吗，@andy ram？枚举设备正在工作，您可以使用带有后端设备的变量作为视频约束中的值...

【解决方案3】：

结合adapterJS我有以下代码：

Step1：枚举设备

 navigator.mediaDevices.enumerateDevices()
   .then(gotDevices)
.catch(errorCallback);

var videodeviceId ;
var videolabel;
function gotDevices(deviceInfos) {
   var camcount = 1;   //used for labeling if the device label is not enumerated
   for (var i = 0; i !== deviceInfos.length; ++i) {
       if (deviceInfos[i].kind === 'videoinput') {
         videolabel=deviceInfos[i].label.split(' ')[1];
         //alert(deviceInfos[i].label + '//' +deviceInfos[i].deviceId);
         if (deviceInfos[i].label.match(/back/g) ||
             deviceInfos[i].label.match(/environment/g)) {
           videodeviceId= deviceInfos[i].deviceId;
         }
         else {
           videodeviceId= deviceInfos[i].deviceId;
         }
         camcount++;
       }
   }
}

它遍历找到的设备并保存找到的设备，其中包含“back”或“environment”。

Step2：在 Chrome 中设置分辨率的约束（摘录）：

var options = {
     localMediaConstraints: {
         audio: false,
            video: {
           optional: [ // Try width step by step until maximum
               {sourceId: videodeviceId},
               {minWidth: 320},
               {minWidth: 640},
               {minWidth: 800},
               {minWidth: 1024},
               {minWidth: 1280},
               {minWidth: 1600},
               {minWidth: 1920},
               {minWidth: 2560}
           ],
       }
     },

到目前为止，这工作，使用后置摄像头并在 sourceid 中设置（不推荐使用，我知道）但是如果我停止流并更改参与者分辨率，它会再次显示前置摄像头。真奇怪，Firefox 好用啊……

有人有解决办法吗？

【讨论】：

这似乎应该作为一个单独的问题发布

【解决方案4】：

我尝试了几种方法，但无法得到确切的答案，即默认访问我稀有的相机。我尝试了另一种方法，我编写了一个 css 弹出模式以在页面打开时打开，以便我可以在一开始就选择前置或后置摄像头。

然而，这不是我的问题的合乎逻辑的答案，但它可以在更短的时间内解决我的问题。

【讨论】：

【解决方案5】：

正确的不是

for (var i = 0; i != sourceInfos.length; ++i) {
   constraints = {//};
}
navigator.getUserMedia(constraints, function(stream) {//});

但是

for (var i = 0; i != sourceInfos.length; ++i) {
   constraints = {//};
   navigator.getUserMedia(constraints, function(stream) {//});
}

，我想。

还有does not open both the front and back open at the same time

请您再确认一下好吗？

【讨论】：