android - reversa - Habilite la cámara trasera con HTML5

manual para instalar camara de reversa

Question

Estoy trabajando en un proyecto con MVC ASP.Net 4 HTML5 (el navegador predeterminado es google-chrome v29.0.1547.57) Puedo interactuar con estas herramientas y tomar fotografías, pero solo con la cámara frontal, ¿cómo podría habilitar la cámara trasera? la característica de la tableta: Samsung Galaxy Tab 2 Espero que me puedas ayudar

Answer 1

Consulte https://simpl.info/getusermedia/sources/ que muestra cómo puede seleccionar fuentes usando

MediaStreamTrack.getSources(gotSources);

Luego puede seleccionar la fuente y pasarla como opcional en getUserMedia

var constraints = {
  audio: {
    optional: [{sourceId: audioSource}]
  },
  video: {
    optional: [{sourceId: videoSource}]
  }
};
navigator.getUserMedia(constraints, successCallback, errorCallback);

Ahora está completamente disponible en Chrome estable y móvil (a partir de v30)

Answer 2

En Chrome en mi Samsung S8 puedo usar "facingMode" = "environment" para tomar videos de la "cámara trasera". El valor predeterminado parece ser "usuario" (la cámara frontal)

en TypeScript:

    const video = document.getElementById("video");
    const constraints = {
        advanced: [{
            facingMode: "environment"
        }]
    };
    navigator.mediaDevices
        .getUserMedia({
            video: constraints
        })
        .then((stream) => {
            video.src = window.URL.createObjectURL(stream);
            video.play();
        });

ref: MediaTrackConstraints/facingMode

Answer 3

La última vez que desarrollé ese código, aquí está la versión que uso: llamas directamente a la función whichCamera en tu código y especias qué cámara "usuario", "entorno" o "computadora" si estás corriendo en una computadora.

`//----------------------------------------------------------------------
//  whichCamera(Type)
//    For smartphone or tablet :
//     Start the type={user,environment} camera.
//    For computer it''s simple :
//      type = "computer".
//----------------------------------------------------------------------
var streamSrc, cameraType;
function whichCamera(type){

  var cameraFacing;
  cameraType = type;
  if( type == "user")
    cameraFacing = 0;
  else if( type == "environment")
    cameraFacing = 1;
  else if( type == "computer"){
    cameraFacing = 2;
  }
  console.log(type+" index : "+cameraFacing);

  //  Here we list all media devices, in order to choose between
  //  the front and the rear camera.
  //      videoDevices[0] : user Camera
  //      videoDevices[1] : environment Camera
  //  Then set the video resolution.
  navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    var videoDevices, videoDeviceIndex, constraints;
    //  Initialize the array wich will contain all video resources IDs.
    //  Most of devices have two video resources (Front & Rear Camera).
    videoDevices = [0,0];
    //  Simple index to browse the videa resources array (videoDevices).
    videoDeviceIndex = 0;
    //  devices.forEach(), this function will detect all media resources (Audio, Video) of the device
    //  where we run the application.
    devices.forEach(function(device) {
      console.log(device.kind + ": " + device.label +
        " id = " + device.deviceId);
      // If the kind of the media resource is video,
      if (device.kind == "videoinput") {
        //  then we save it on the array videoDevices.
        videoDevices[videoDeviceIndex++] =  device.deviceId;
        console.log(device.deviceId+" = "+videoDevices[videoDeviceIndex-1]);
      }
    });
    console.log("Camera facing ="+cameraFacing+" ID = "+videoDevices[videoDeviceIndex-1]);

    // Here we specified which camera we start,
    //  videoDevices[0] : Front Camera
    //  videoDevices[1] : Back Camera
    if( cameraFacing != "computer"){
      constraints = { deviceId: { exact: videoDevices[cameraFacing]  }};
      return navigator.mediaDevices.getUserMedia({ video:
                                                          constraints,
                                                          width: { min: 1280, ideal: 1600, max: 1920 },
                                                          height: { min: 720, ideal: 1200, max: 1080 }
                                                  }
                                                );
    }else
      return navigator.mediaDevices.getUserMedia({ video: true });
    })
    //  Then we retrieve the link to the video stream.
    .then(stream => {
      if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
        localMediaStream = stream;
        console.log(localMediaStream +" = "+ stream)
      } else if (video.mozSrcObject !== undefined) {
        video.mozSrcObject = stream;
        console.log(video.mozSrcObject +" = "+ stream)
      } else if (video.srcObject !== undefined) {
        video.srcObject = stream;
        console.log(video.srcObject +" = "+ stream)
      } else {
        video.src = stream;
        console.log(video.src +" = "+ stream)
      }
      streamSrc = stream;
    })
    .catch(e => console.error(e));

}

Answer 4

Se puede encontrar una demostración en https://webrtc.github.io/samples/src/content/devices/input-output/ . Esto permitirá el acceso a la cámara delantera y trasera.

Muchas demostraciones que encontrará dependen de la función obsoleta:

MediaStreamTrack.getSources() 

A partir de Chrome 45 y FireFox 39, deberá usar la función:

MediaDevices.enumerateDevices()

Ejemplo:

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.");
  return;
}

// List cameras and microphones.

navigator.mediaDevices.enumerateDevices()
  .then(function(devices) {
    devices.forEach(function(device) {
      console.log(device.kind + ": " + device.label +
        " id = " + device.deviceId);
    });
  })
  .catch(function(err) {
    console.log(err.name + ": " + error.message);
  });

Se puede encontrar documentación adicional aquí: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

Answer 5

        //----------------------------------------------------------------------
        //  Here we list all media devices, in order to choose between
        //  the front and the back camera.
        //      videoDevices[0] : Front Camera
        //      videoDevices[1] : Back Camera
        //  I used an array to save the devices ID 
        //  which i get using devices.forEach()
        //  Then 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));