无法访问 webrtc 上的后置摄像头 [chrome:54] [英] Not able to access rear camera on webrtc [chrome:54]

问题描述

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

I'm trying out webAR demos using webrtc and threejs, while accessing the camera through my android mobile chrome:54 the front camera opens up by default.

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

I checked and tried to fix the issue by referring to all the questions regarding this on stack overflow, even tried to change the array values but no luck. Can anyone please tell me how to access the rear camera by tweaking this code?

    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
  }

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

I tried adding this into the constraints. Yet again the same result.

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

推荐答案

最新的 spac 在约束中支持faceMode".但是，Chrome 尚不支持faceMode".sourceId"已弃用，sourceId"的最新规范deviceId".我写了演示.

Latest spac support "facingMode" in constraints. but, Chrome does not yet support a "facingMode". "sourceId" deprecated, latest spec "deviceId" insted of "sourceId". I wrote demo.

这篇关于无法访问 webrtc 上的后置摄像头 [chrome:54]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！