¿Qué cámara abrirá la API getUserMedia en un dispositivo móvil? ¿Delantero o trasero?

Después de tanto batallar pudimos hallar la respuesta de este apuro que muchos usuarios de nuestro espacio han presentado. Si tienes algo que aportar no dudes en compartir tu conocimiento.

Solución:

Existe una solución en la que el usuario puede seleccionar una de las cámaras.

Habilitar la cámara trasera con HTML5

Evaluando sourceInfo.facing del siguiente código, puede seleccionar una cámara (‘usuario’ o ‘entorno’) (que funciona en Chrome actual> = 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  else if (sourceInfo.kind === 'video') 
      option.text = sourceInfo.label  else 
      console.log('Some other kind of source: ', sourceInfo);
    
  


if (typeof MediaStreamTrack === 'undefined')
  alert('This browser does not support MediaStreamTrack.nnTry 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();

Desafortunadamente, no puede (¿todavía?) Seleccionar esto a través del código.

• Mozilla Firefox beta: cuando el usuario acepta compartir cámara, también selecciona qué cámara compartir.

• Chrome beta: solo he podido usar la cámara facial. Podría ser configurable, pero no sé cómo…

EDITAR: En Chrome, es posible seleccionar la cámara trasera mediante programación. Vea la siguiente respuesta de Probot en este hilo.

La respuesta es sí, para Android la cámara predeterminada es la frontal ( <=> usuario) uno. Así que desarrollé el siguiente script para elegir entre los cámara frontal y el cámara trasera

    //----------------------------------------------------------------------
    //  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));

Si entiendes que ha sido de ayuda este artículo, sería de mucha ayuda si lo compartieras con otros desarrolladores de este modo nos ayudas a difundir este contenido.

---

---

Utiliza Nuestro Buscador