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 fordert den Benutzer auf, die 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 zu erteilen.

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

Hinweis: Dies ist eine veraltete Methode. Bitte verwenden Sie stattdessen die neuere navigator.mediaDevices.getUserMedia(). Obwohl technisch nicht veraltet, wird diese alte Callback-Version als solche markiert, da die Spezifikation dringend empfiehlt, die neuere, versprechensbasierte Version zu verwenden.

Syntax

js
getUserMedia(constraints, successCallback, errorCallback)

Parameter

constraints

Ein Objekt, das die Arten von Medien angibt, die angefordert werden sollen, zusammen mit allen Anforderungen für jede Art. Für Details siehe den Abschnitt über die Beschränkungen unter der modernen MediaDevices.getUserMedia() Methode sowie den Artikel Fähigkeiten, Einschränkungen und Einstellungen.

successCallback

Eine Funktion, die aufgerufen wird, wenn die Anfrage 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 alleinigem Argument aufgerufen; dieses Objekt basiert auf DOMException.

Rückgabewert

Keiner (undefined).

Beispiele

Breite und Höhe

Hier ist ein Beispiel für die Verwendung von getUserMedia(), einschließlich Code zur Anpassung an Präfixe verschiedener Browser. Beachten Sie, dass dies der veraltete Weg ist: Siehe den Beispielabschnitt unter der 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

Siehe auch