Not able to access rear camera on webrtc [chrome:54]

Question

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
                }

Answer 1

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.

Answer 2

Have you included adapter.js to polyfill? So you should be able to choose the default camera like this:

 facingMode: { exact: "environment" }

Answer 3

In combination with adapterJS I have following Code:

Step1: Enumerating the devices

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

It iterate through the found devices and saves the found devices which has "back" or "environment" in it.

Step2: The Constraints to set the resolution in Chrome (Excerp):

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}
           ],
       }
     },

This works so far, the back-camera is used and set in the sourceid (deprecated, I know) but if I stop the stream and change the participants resolution, it shows the front cam again. Thats weird, Firefox is quite easy to use...

Does anyone have a solution?

Answer 4

I tried few approaches but couldn't get an exact answer, that is accessing my rare camera by default. I tried an alternative where i coded a css popup modal to open up when the page opens so that i could choose either the front or back camera at the very begining.

However this is not a logical answer to my question but within less time it could solve my problem.

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?