Wählen Sie die Kamera während der Verwendung von navigate.getUserMedia()

Ich benutze die navigate.getUserMedia() -Methode, um Videos auf meinem Handy zu erfassen und weiter zu bearbeiten. Aber ab sofort wird das Video mit der Frontkamera aufgenommen. Wie schaffe ich es, auf die nach hinten gerichtete Kamera zuzugreifen?Wählen Sie die Kamera während der Verwendung von navigate.getUserMedia()

Im Folgenden finden Sie einige Beispiel-Code, die ich in meiner Anwendung bin mit:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; 
    if (navigator.getUserMedia){ 
    navigator.getUserMedia({video: true}, successCallback, errorCallback);

Vielen Dank im Voraus

Quelle

2013-05-29 Vinay C

Ich denke, diese Frage ist zu allgemein, sie kann vom Hersteller, der Software und dem Modell des Geräts abhängen. – cerkiewny

Aber dieser Code läuft auf einer Vielzahl von Plattformen, .. Problem ist, dass es auf die Frontkamera zugreift, also könnte es einen Weg geben, wie wir es für den Zugriff auf die hintere Kamera spezifizieren können, oder ein Popup von verfügbaren Kameras bekommen und den Benutzer auswählen lassen .. –

Siehe this für weitere Informationen.

welche Kamera verwendet wird, wird an das Gerät links: „User Agenten des Benutzers primären oder Systemstandard Kamera zur Verwendung auf Standard gefördert und/oder Mikrofon (gegebenenfalls) die Medien Strom zu erzeugen.“

Die Frage, die Sie fragen können, ist, wie Sie die Standardkamera ändern können. Aber wie ich im Kommentarabschnitt erwähnt habe, ist dies abhängig von dem verwendeten Betriebssystem des Geräts, dem Hersteller oder sogar dem Modell, und kann ein großes Problem sein.

EDIT (Verbesserung der akzeptierte Antwort basierend auf später ein):

Bitte diesen Blog sehen, wie Sie die Kamera Quelle ändern:

https://www.html5rocks.com/en/tutorials/getusermedia/intro/

Quelle

2013-05-29 09:59:20 cerkiewny

Dieses Beispiel auf simpl.info zeigt die Verwendung von zur Auswahl aus mehreren Videoquellen.

https://simpl.info/getusermedia/sources/

Ich kann bestätigen, dass dies in Chrome funktioniert 32.

Quelle

2014-02-05 06:18:30 freakTheMighty

Dies sollte die richtige Antwort sein. Obwohl nicht auf allen Geräten implementiert, kann ich bestätigen, dass es in Chrome auf Android funktioniert nicht im normalen Browser obwohl auf meinem gs2 (ich kenne es alt). Arbeitet nicht in ios7, aber ich werde dies auf ios8 Beta 3 testen, sobald ich am Montag ins Büro komme. –

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

Quelle

2017-03-20 08:36:23

es wird eine bessere Antwort sein, wenn Sie Ihren Code dort beschreiben! – Deep

Bitte bearbeiten Sie die Antwort! – Deep

Ich werde hier einige Zeilen erklären. ** videoDevices **: ist ein einfaches Array, das die ** ID ** des Wedels und der hinteren Kamera enthält. ** devices.forEach **: listet alle Mediengeräte (Videos und Audio) auf. Wenn ** ** device.kind == "videoinput" ** ist, bedeutet das, dass es sich um ein Videomediengerät handelt. Wir speichern die IDs aller Videogeräte im vorherigen Array ** videoDevices **. ** var constraints ** enthält die Videoauflösung und die Kamera, die wir starten möchten. ** videoDevices [1] = zurück Kamera ** und ** videoDevices [0] = vordere Kamera **. Dann übergeben wir die Einschränkung an die ** getUSerMedia ** -Funktion. –

Sie facingMode verwenden können, um "user" oder "Umwelt" für Vorder- oder Rückseite der Kamera bzw. zu wählen. Nicht sicher Browser-Unterstützung, aber es funktioniert auf Android Chrome 58.

Verwenden

navigator.getUserMedia({video: { facingMode: { exact: "environment" } } }, 
successCallback, errorCallback);

oder Rückfall auf eine andere Kamera

navigator.getUserMedia({video: { facingMode: "environment" } }, 
successCallback, errorCallback);

statt

navigator.getUserMedia({video: true}, successCallback, errorCallback);

zu ermöglichen Von https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Quelle

2017-07-23 08:40:44 user1318499

Das hat mir viel mehr geholfen als jede andere Antwort. So eine einfache Lösung, wirklich. –

Wählen Sie die Kamera während der Verwendung von navigate.getUserMedia()

Antwort

Verwandte Themen