0

Guys i have been trying to get access to both front and rear camera for chrome using webrtc and its perfectly working, i'm able to switch between both front and rear cameras. However, by default chrome picks up the front camera, is there any way i can make chrome pick up the rear camera when the browser opens up?

var videoSelect = document.querySelector('select#videoSource');
var selectors = [videoSelect];

function gotDevices(deviceInfos) {
  // Handles being called several times to update labels. Preserve values.
  var values = selectors.map(function(select) {
    return select.value;
  });
  selectors.forEach(function(select) {
    while (select.firstChild) {
      select.removeChild(select.firstChild);
    }
  });
  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
   if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1);
      videoSelect.appendChild(option);
    } else {
      console.log('Some other kind of source/device: ', deviceInfo);
    }
  }
  selectors.forEach(function(select, selectorIndex) {
    if (Array.prototype.slice.call(select.childNodes).some(function(n) {
      return n.value === values[selectorIndex];
    })) {
      select.value = values[selectorIndex];
    }
  });
}

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

I tried accessing the array in descending order to get the back camera first, but did not help

for (var  i = deviceInfos.length - 1; i >= 0; i--) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
           ....... //code follows

Update: I also tried adding these lines into the above code but again the same response, opens up the front cam by default

for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];


   if (deviceInfo.kind === 'videoinput' && deviceInfo.facing == "environment") {
    videoSourceId = deviceInfo.id;


    } else {
      console.log('Some other kind of source/device: ', deviceInfo);
    }
  }
//other code

var constraints = {
    video: { optional: [{sourceId: videoSourceId}] }
  };
  navigator.mediaDevices.getUserMedia(constraints).
      then(gotStream).then(gotDevices).catch(handleError);
}

PS: I tried using facingMode: "environment" in the other code, but is there any scope for that here ?

andy ram
  • 213
  • 3
  • 21
  • I don't understand, if you're able to switch between front and back camera, then it sounds like you are able to chose front camera and you are able to chose back camera, so why aren't you able to chose back camera after a browser restart? Please clarify your question. The order you read an array in seems irrelevant. See also http://stackoverflow.com/q/40779564/918910 – jib Nov 26 '16 at 17:23
  • @jib, i meant when the page loads i want the mobile to use its rare camera. Currently when the page loads the front cam opens up, upon that as a user i have to click on a button to choose the rare camera, which is not needed in my scenario. Rare cam is my first preference. – andy ram Nov 26 '16 at 17:38
  • You're using user terms. SO is for programming questions. If there's a problem with your code to open the camera when the page loads, you need to show us the code for us to comment. – jib Nov 26 '16 at 21:14
  • @jib, I understand what you are saying. My question is simply this, how to make the chrome pick up the back camera by default ? i've already shared the code above which is accessing the front camera. – andy ram Nov 27 '16 at 07:11
  • The code you shared only returns a list of available devices. You need to call `getUserMedia` somewhere. Without seeing that code, it's not clear to me from your question what's wrong. – jib Nov 27 '16 at 16:01
  • OKay, here is the fiddle of webcamgrabbing code which i have used. https://jsfiddle.net/bofwe7z1/ – andy ram Nov 27 '16 at 17:38

2 Answers2

1

How about using constraints ?

For the BACK camera:

{audio:false,video:{facingMode:{exact:"environment"}}}

For the FRONT camera:

{audio:false,video:{facingMode:"user"}}
PYK
  • 3,674
  • 29
  • 17
0

Check for the facing in deviceInfo label and set the default value.

if(deviceInfo.label.indexOf('back') > 0) { option.selected = true; }
Renuka Kulkarni
  • 335
  • 2
  • 8