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

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
getUserMedia
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch