GetUserMedia - facingmode

Ich bin derzeit mit einem Android-tablet und GetUserMedia zu nehmen Bilder in meinem Programm.

Offenbar die Standard-Kamera verwendet, die von GetUserMedia ist die front-Kamera. Wie verwende ich die Rückseite der Kamera wie ein Standard?

Hier ist mein code für die 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.");
        });

Ich eingefügt facingMode in der "Pflicht" - Teil, aber hat nicht funktioniert.

Bitte helfen.

InformationsquelleAutor Mikhail | 2015-08-19

getusermedia javascript

Mit Peter ' s code (https://stackoverflow.com/a/41618462/7723861) ich kam mit dieser Lösung, um die Kamera hinten:

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

Diese Art von arbeiten für einige Fälle, aber für iOS11 dies fehl. Stattdessen bin ich mit constraints.video.facingMode = { exact: "environment" }

InformationsquelleAutor Miojo_Esperto

4

Den Einsatz unserer web-app auf android durch Cordova, ich habe versucht, mehrere Lösungen für den Zugriff auf die hintere Kamera. Die Lösung, die für mich gearbeitet wurde:
```
constraints = {
    audio: false,
    video: {
        width: 400,
        height: 300,
        deviceId: deviceId ? {exact: deviceId} : undefined
    }
};
```
Abrufen der Geräte-id durch:
```
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);
});
```
Ich entschied mich, nicht zu verwenden Sie ein Cordova-plugin, so dass, wenn wir wählen, um Weg von Cordova, es wäre nicht so eine kräftige migration.

wie Sie wissen, was man von den Kameras in enumerateDevices ist vorne und was ist hinten? Ich denke, die erste ist Benutzer zugewandten (Vorderseite) und die zweite ist hinten, aber (wo) ist das angegeben?
In einigen Fällen können wir uns verlassen auf dem Gerät.Bezeichnung 'Kamera 1, vor' oder 'Kamera 0, Blick zurück'. Aber ich habe auch gesehen, einige Handys, wo dies nicht berichtet, z.B. auf D852 LG Gerät.Etiketten für die Kamera-Geräte sind leere strings.

InformationsquelleAutor Peter Unsworth

Einen ziemlich dandy-snippet, das Sie verwenden können, ist:

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

Sollte diese Arbeit für Sie hoffentlich.

InformationsquelleAutor Théodore Tremblot

In der neueren version von Chrome (nach v52) adaper.js Lösungen scheinen nicht zu arbeiten. Also ich löse das problem durch das auflisten der Geräte. Hier ist meine Lösung. Ich bin nicht sicher, ob es einen besseren Weg, um drehen Sie die Kamera um und zeigen Sie das video auf dem Bildschirm. Aber ich muss aufhören den track zuerst und bekommen einen neuen stream.

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

InformationsquelleAutor Yifan Sun

Dies würde die Arbeit für hintere Kamera :

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

})

InformationsquelleAutor Nischal Jakhar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.