Question

我正在尝试使用webrtc和threejs进行webAR演示，同时通过我的Android移动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
                }

Answer 1

最新的空间支持＆＃34; facingMode＆＃34;在约束中。但是，Chrome还不支持＆＃34; facingMode＆＃34;。＆＃34;的SourceID＆＃34;不推荐使用，最新规范＆＃34; deviceId＆＃34; insed＆＃34; sourceId＆＃34;。我写了demo。

Answer 2

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

 facingMode: { exact: "environment" }

Answer 3

结合adapterJS，我有以下代码：

步骤1：枚举设备

 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++;
       }
   }
}

它遍历找到的设备并保存找到的具有“后退”或“环境”的设备。

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很容易使用......

有没有人有解决方案？

Answer 4

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

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

Answer 5

The correct one is not

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

but

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

, I suppose.

And does not open both the front and back open at the same time

Would you please re-confirm it?

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

5 个答案: