android - from - video camera html5




Activer la caméra arrière avec HTML5 (4)

Je travaille sur un projet avec MVC ASP.Net 4 HTML5 (le navigateur par défaut est google-chrome v29.0.1547.57) Je peux interagir avec ces outils et prendre des photos, mais uniquement avec une caméra frontale. Comment activer la caméra arrière? la caractéristique de la tablette: Samsung Galaxy Tab 2 J'espère que vous pouvez m'aider


Consultez https://simpl.info/getusermedia/sources/ qui montre comment vous pouvez sélectionner les sources en utilisant

MediaStreamTrack.getSources(gotSources);

Vous pouvez ensuite sélectionner la source et la transmettre en option dans getUserMedia.

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

Il est maintenant entièrement disponible dans Stable Chrome et mobile (à partir de v30)


Dans Chrome sur mon Samsung S8, je peux utiliser "facingMode" = "environnement" pour prendre la vidéo de la "caméra arrière". Le défaut semble être "utilisateur" (la caméra frontale)

dans 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


Une démo est disponible à l' https://webrtc.github.io/samples/src/content/devices/input-output/ . Cela permettra d'accéder à la fois à la caméra avant et à la caméra arrière.

De nombreuses démos que vous trouverez dépendent de la fonction obsolète:

MediaStreamTrack.getSources() 

À partir de Chrome 45 et FireFox 39, vous devrez utiliser la fonction:

MediaDevices.enumerateDevices()

Exemple:

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

Vous trouverez plus de documentation ici: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices


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




android-camera