Navigator: getUserMedia()-Methode

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Die veraltete Navigator.getUserMedia()-Methode bittet den Benutzer um Erlaubnis zur Nutzung von bis zu einem Videoeingabegerät (wie einer Kamera oder einem geteilten Bildschirm) und bis zu einem Audioeingabegerät (wie einem Mikrofon) als Quelle für einen MediaStream.

Wenn die Erlaubnis erteilt wird, wird ein MediaStream, dessen Video- und/oder Audiotracks von diesen Geräten stammen, an den angegebenen Success-Callback übergeben. Wird die Erlaubnis verweigert, existieren keine kompatiblen Eingabegeräte oder tritt ein anderer Fehler auf, wird der Fehler-Callback mit einem Objekt ausgeführt, das beschreibt, was schiefgelaufen ist. Wenn der Benutzer stattdessen überhaupt keine Wahl trifft, wird kein Callback ausgeführt.

Hinweis: Dies ist eine veraltete Methode. Bitte verwenden Sie stattdessen die neuere Methode navigator.mediaDevices.getUserMedia(). Auch wenn sie technisch nicht als veraltet gilt, wird diese alte Callback-Version als solche bezeichnet, da die Spezifikation dringend empfiehlt, die neuere, Promise-zurückgebende Version zu verwenden.

Syntax

js
getUserMedia(constraints, successCallback, errorCallback)

Parameter

constraints

Ein Objekt, das die Arten von Medien spezifiziert, die angefordert werden sollen, sowie alle Anforderungen für jede Art. Details finden Sie im Abschnitt constraints unter der modernen Methode MediaDevices.getUserMedia() sowie im Artikel Capabilities, constraints, and settings.

successCallback

Eine Funktion, die aufgerufen wird, wenn der Antrag auf Medienzugang genehmigt wird. Die Funktion wird mit einem Parameter aufgerufen: dem MediaStream-Objekt, das den Medienstrom enthält. Ihr Callback kann dann den Stream dem gewünschten Objekt zuweisen (wie einem <audio>- oder <video>-Element), wie im folgenden Beispiel gezeigt:

js
function successCallback(stream) {
  const video = document.querySelector("video");
  video.srcObject = stream;
  video.onloadedmetadata = (e) => {
    // Do something with the video here.
  };
}
errorCallback

Wenn der Aufruf fehlschlägt, wird die im errorCallback angegebene Funktion mit einem Objekt als einziges Argument aufgerufen; dieses Objekt basiert auf DOMException.

Rückgabewert

Keiner (undefined).

Beispiele

Breite und Höhe

Hier ist ein Beispiel für die Nutzung von getUserMedia(), einschließlich Code zur Bewältigung der Präfixe verschiedener Browser. Beachten Sie, dass dies die veraltete Methode ist: Siehe den Beispiele-Abschnitt unter der Methode MediaDevices.getUserMedia() für moderne Beispiele.

js
navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia(
    { audio: true, video: { width: 1280, height: 720 } },
    (stream) => {
      const video = document.querySelector("video");
      video.srcObject = stream;
      video.onloadedmetadata = (e) => {
        video.play();
      };
    },
    (err) => {
      console.error(`The following error occurred: ${err.name}`);
    },
  );
} else {
  console.log("getUserMedia not supported");
}

Spezifikationen

Specification
Media Capture and Streams
# dom-navigator-getusermedia

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch