Navigator: getUserMedia() Methode
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Die veraltete Methode Navigator.getUserMedia() fordert den Benutzer auf, die Erlaubnis zu erteilen, bis zu einem Videoeingabegerät (wie eine Kamera oder geteilten Bildschirm) und bis zu einem Audioeingabegerät (wie ein Mikrofon) als Quelle für einen MediaStream zu verwenden.
Wenn die Erlaubnis erteilt wird, wird ein MediaStream, dessen Video- und/oder Audiotracks von diesen Geräten stammen, dem angegebenen Erfolgs-Callback übergeben. Wenn die Erlaubnis verweigert wird, keine kompatiblen Eingabegeräte vorhanden sind oder eine andere Fehlerbedingung eintritt, wird der Fehler-Callback mit einem Objekt ausgeführt, das beschreibt, was schiefgelaufen ist. Wenn der Benutzer hingegen keine Wahl trifft, wird kein Callback ausgeführt.
Hinweis:
Dies ist eine veraltete Methode.
Bitte verwenden Sie stattdessen die neuere Methode navigator.mediaDevices.getUserMedia().
Obwohl technisch nicht veraltet, wird diese alte Callback-Version als solche markiert, da die Spezifikation stark empfiehlt, die neuere, versprechensbasierte Version zu verwenden.
Syntax
getUserMedia(constraints, successCallback, errorCallback)
Parameter
constraints-
Ein Objekt, das die Arten von Medien angibt, die angefordert werden sollen, sowie alle Anforderungen für jeden Typ. Weitere 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 die Anforderung für den Medienzugriff 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:jsfunction 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
errorCallbackangegebene Funktion mit einem Objekt als einziges Argument aufgerufen; dieses Objekt ist anDOMExceptionangelehnt.
Rückgabewert
Keiner (undefined).
Beispiele
Breite und Höhe
Hier ist ein Beispiel für die Verwendung von getUserMedia(), einschließlich Code zur Bewältigung von Präfixen verschiedener Browser. Beachten Sie, dass dies die veraltete Art ist, es zu tun: siehe den Abschnitt Beispiele unter der modernen Methode MediaDevices.getUserMedia() für aktuelle Beispiele.
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
| Spezifikation |
|---|
| Media Capture and Streams # dom-navigator-getusermedia |
Browser-Kompatibilität
Siehe auch
MediaDevices.getUserMedia(), das diese veraltete Methode ersetzt.- WebRTC - die Einführungsseite zur API
- Media Capture and Streams API - die API für die Medienstromobjekte
- Webcam-Fotos aufnehmen - ein Tutorial zur Verwendung von
getUserMedia()zum Aufnehmen von Fotos anstatt Video.