Not Able To Access Rear Camera On Webrtc [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 fi

Solution 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.

Solution 2:

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

 facingMode: { exact: "environment" }

Solution 3:

In combination with adapterJS I have following Code:

Step1: Enumerating the devices

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

var videodeviceId ;
var videolabel;
functiongotDevices(deviceInfos) {
   var camcount = 1;   //used for labeling if the device label is not enumeratedfor (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):

varoptions= {
     localMediaConstraints: {
         audio:false,
            video: {
           optional: [ //Trywidthstepbystepuntilmaximum
               {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?

Solution 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.

Solution 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?