Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 device.Front cam or Rear cam?.is there needed code for selecting camera?

like image 381
Nisham Mahsin Avatar asked Aug 28 '13 08:08

Nisham Mahsin


2 Answers

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();
like image 80
Stefan Profanter Avatar answered Sep 19 '22 14:09

Stefan Profanter


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.

like image 26
Mikael Holmgren Avatar answered Sep 21 '22 14:09

Mikael Holmgren