web-dev-qa-db-fra.com

GetUserMedia - mode confronté

J'utilise actuellement une tablette Android et GetUserMedia pour prendre des photos dans mon programme.

Apparemment, la caméra par défaut utilisée par GetUserMedia est la caméra avant. Comment utiliser la caméra arrière par défaut? 

Voici mon code pour GetUserMedia:

        navigator.getUserMedia({
            "audio": false,
            "video": {
                mandatory: {
                    minWidth: this.params.dest_width,
                    minHeight: this.params.dest_height,
                    //facingMode: "environment",
                },
            }
        }, 
        function(stream) {
            // got access, attach stream to video
            video.src = window.URL.createObjectURL( stream ) || stream;
            Webcam.stream = stream;
            Webcam.loaded = true;
            Webcam.live = true;
            Webcam.dispatch('load');
            Webcam.dispatch('live');
            Webcam.flip();
        },
        function(err) {
            return self.dispatch('error', "Could not access webcam.");
        });

J'ai inséré FaceMode dans la partie "obligatoire" mais je n'ai pas fonctionné.

S'il vous plaît aider.

javascriptgetusermedia
9
Mikhail

Mise à jour: facingMode est maintenant disponible dans Chrome pour Android via le fichier adapter.js polyfill!

facingMode est n'est pas encore implémenté dans Chrome pour Android , mais fonctionne de manière native dans Firefox pour Android.

Vous devez cependant utiliser standard contraintes: (utilisez https fiddle pour Chrome):

var gum = mode => 
  navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: mode}}})
  .then(stream => (video.srcObject = stream))
  .catch(e => log(e));

var stop = () => video.srcObject && video.srcObject.getTracks().forEach(t => t.stop());

var log = msg => div.innerHTML += msg + "<br>";
<button onclick="stop();gum('user')">Front</button>
<button onclick="stop();gum('environment')">Back</button>
<div id="div"></div><br>
<video id="video" height="320" autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

La syntaxe { exact: } signifie que la contrainte est requise et que tout échoue si l'utilisateur ne dispose pas de la bonne caméra. Si vous laissez cette option de côté, la contrainte est facultative, ce qui signifie dans Firefox pour Android qu’elle ne fait que modifier la valeur par défaut dans le sélecteur de caméra dans l’invite de permission.

16
jib

En utilisant le code de Peter ( https://stackoverflow.com/a/41618462/7723861 ), j'ai proposé cette solution pour obtenir la caméra arrière:

function handleSuccess(stream) {
  window.stream = stream; // make stream available to browser console
  video.srcObject = stream;
}

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

var DEVICES = [];
var final = null;
navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {

        var arrayLength = devices.length;
        for (var i = 0; i < arrayLength; i++)
        {
            var tempDevice = devices[i];
            //FOR EACH DEVICE, Push TO DEVICES LIST THOSE OF KIND VIDEOINPUT (cameras)
            //AND IF THE CAMERA HAS THE RIGHT FACEMODE ASSING IT TO "final"
            if (tempDevice.kind == "videoinput")
            {
                DEVICES.Push(tempDevice);
                if(tempDevice.facingMode == "environment" ||tempDevice.label.indexOf("facing back")>=0 )
                    {final = tempDevice;}
            }
        }

        var totalCameras = DEVICES.length;
        //If couldnt find a suitable camera, pick the last one... you can change to what works for you
        if(final == null)
        {
            //console.log("no suitable camera, getting the last one");
            final = DEVICES[totalCameras-1];
        };

        //Set the constraints and call getUserMedia
        var constraints = {
        audio: false, 
        video: {
            deviceId: {exact: final.deviceId}
            }
        };

        navigator.mediaDevices.getUserMedia(constraints).
        then(handleSuccess).catch(handleError);

    })
    .catch(function(err) {
        console.log(err.name + ": " + err.message);
});
5
Miojo_Esperto

En déployant notre application Web sur Android via Cordova, j'ai essayé plusieurs solutions pour accéder à la caméra arrière. La solution qui a fonctionné pour moi était:

constraints = {
    audio: false,
    video: {
        width: 400,
        height: 300,
        deviceId: deviceId ? {exact: deviceId} : undefined
    }
};

Récupérer le deviceId via:

navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
        // devices is an array of accessible audio and video inputs. deviceId is the property I used to switch cameras
    })
    .catch(function(err) {
        console.log(err.name + ": " + error.message);
});

J'ai choisi de ne pas utiliser de plugin Cordova, de sorte que, si nous décidions de nous éloigner de Cordova, il n'y aurait pas une migration aussi lourde.

4
Peter Unsworth

Dans la nouvelle version de Chrome (après la v52), les solutions adaper.js ne semblent pas fonctionner. Je résous donc le problème en énumérant d’abord les périphériques. Voici ma solution. Je ne sais pas s'il existe un meilleur moyen de retourner la caméra et d'afficher la vidéo à l'écran. Mais je dois d'abord arrêter la piste et obtenir un nouveau flux. 

let Video = function() {
    let cameras = [];
    let currCameraIndex = 0;
    let constraints = {
        audio: true,
        video: {
          deviceId: { exact: "" }
        }
      };
    let videoCanvas = $('video#gum');


    this.initialize = function() {
      return enumerateDevices()
        .then(startVideo);
    };

    this.flipCamera = function() {
      currCameraIndex += 1; 
      if (currCameraIndex >= cameras.length) {
        currCameraIndex = 0;
      }

      if (window.stream) {
        window.stream.getVideoTracks()[0].stop();
      }
      return startVideo();
    };

    function enumerateDevices() {
      return navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {
          devices.forEach(function(device) {
            console.log(device);
            if (device.kind === "videoinput") {
              cameras.Push(device.deviceId);
            }
          });
          console.log(cameras);
        });
    }

    function startVideo() {
      constraints.video.deviceId.exact = cameras[currCameraIndex];
      return navigator.mediaDevices.getUserMedia(constraints)
        .then(handleSuccess).catch(handleError);
    }

    function handleSuccess(stream) {
      videoCanvas[0].srcObject = stream;
      window.stream = stream;
    }

    function handleError(error) {
      alert(error);
    }
};
1
Yifan Sun

Un joli extrait de dandy que vous pouvez utiliser est:

var front = false;
document.getElementById('flip-button').onclick = function() { front =` !front; };
var constraints = { video: { facingMode: (front? "user" : "environment") } };

Cela devrait fonctionner pour vous, espérons-le.

0
Théodore Tremblot

Cela fonctionnerait pour la caméra arrière:  

navigator.mediaDevices.getUserMedia({
video: {facingMode: "environment",
 height:{<heightValueHere>},
 width : {<widthValueHere>} 
}
})
.then(function(stream){
window.stream = stream;
video.srcObject = stream;

})
0
Nischal Jakhar