Which Camera Will Open GetUserMedia API In Mobile Device? Front Or Rear?

While using getUserMedia API to access camera in desktop it will open web camera.of course it is help to video communication.but which camera is invoked when it is used in mobile d

Solution 1:

There's a solution where the user can select one of the cameras.

Enable rear camera with HTML5

By evaluating sourceInfo.facing from the following code, you can select a camera ('user' or 'environment') (which works on current chrome >= 30): https://simpl.info/getusermedia/sources/

'use strict';

var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');

navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

function gotSources(sourceInfos) {
  for (var i = 0; i !== sourceInfos.length; ++i) {
    var sourceInfo = sourceInfos[i];
    var option = document.createElement('option');
    option.value = sourceInfo.id;
    if (sourceInfo.kind === 'audio') {
      option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
      audioSelect.appendChild(option);
    } else if (sourceInfo.kind === 'video') {
      option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
      videoSelect.appendChild(option);
    } else {
      console.log('Some other kind of source: ', sourceInfo);
    }
  }
}

if (typeof MediaStreamTrack === 'undefined'){
  alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
  MediaStreamTrack.getSources(gotSources);
}


function successCallback(stream) {
  window.stream = stream; // make stream available to console
  videoElement.src = window.URL.createObjectURL(stream);
  videoElement.play();
}

function errorCallback(error){
  console.log('navigator.getUserMedia error: ', error);
}

function start(){
  if (!!window.stream) {
    videoElement.src = null;
    window.stream.stop();
  }
  var audioSource = audioSelect.value;
  var videoSource = videoSelect.value;
  var constraints = {
    audio: {
      optional: [{sourceId: audioSource}]
    },
    video: {
      optional: [{sourceId: videoSource}]
    }
  };
  navigator.getUserMedia(constraints, successCallback, errorCallback);
}

audioSelect.onchange = start;
videoSelect.onchange = start;

start();

Solution 2:

Unfortunately, you cannot (yet?) select this via the code.

• Mozilla Firefox beta: When the user accepts to share camera, he/she also select what camera to share.

• Chrome beta: I have only been able to use the face camera. Could be configurable, but I do not know how…

EDIT: In chrome it's possible to select the back facing camera programmatically. See the next answer by Probot in this thread.

Solution 3:

The answer is yes, for Android the default camera is the front( <=> user) one. So I developed thes script below to choose between the front camera and the rear Camera

    //----------------------------------------------------------------------
    //  Here we list all media devices, in order to choose between
    //  the front camera and the rear camera.
    //      videoDevices[0] : Front Camera
    //      videoDevices[1] : Back Camera
    //  I used an array to save the devices ID 
    //  which I get with using devices.forEach()
    //  Then I set the video resolution.
    //----------------------------------------------------------------------
    navigator.mediaDevices.enumerateDevices()
    .then(devices => {
      var videoDevices = [0,0];
      var videoDeviceIndex = 0;
      devices.forEach(function(device) {
        console.log(device.kind + ": " + device.label +
          " id = " + device.deviceId);
        if (device.kind == "videoinput") {  
          videoDevices[videoDeviceIndex++] =  device.deviceId;    
        }
      });

      var constraints =  {width: { min: 1024, ideal: 1280, max: 1920 },
      height: { min: 776, ideal: 720, max: 1080 },
      deviceId: { exact: videoDevices[1]  } 
    };
    return navigator.mediaDevices.getUserMedia({ video: constraints });

  })
    .then(stream => {
      if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
        localMediaStream = stream;
      } else if (video.mozSrcObject !== undefined) {
        video.mozSrcObject = stream;
      } else if (video.srcObject !== undefined) {
        video.srcObject = stream;
      } else {
        video.src = stream;
      }})
    .catch(e => console.error(e));