MediaDevices: devicechange Ereignis
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Das devicechange
-Ereignis wird an eine MediaDevices
Instanz gesendet, wann immer ein Mediengerät wie eine Kamera, ein Mikrofon oder ein Lautsprecher mit dem System verbunden oder davon entfernt wird.
Dieses Ereignis ist nicht abfangbar und wird nicht weitergeleitet.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("devicechange", (event) => {});
ondevicechange = (event) => {};
Ereignistyp
Ein generisches Event
.
Beispiel
In diesem Beispiel erstellen wir eine Funktion namens updateDeviceList()
, die einmal aufgerufen wird, wenn MediaDevices.getUserMedia()
erfolgreich einen Stream erhält, und dann jedes Mal aufgerufen wird, wenn sich die Geräteliste ändert. Es zeigt im Browserfenster zwei Listen an: eine für Audiogeräte und eine für Videogeräte, mit dem Geräte-Label (Name) und ob es sich um ein Eingabegerät oder ein Ausgabegerät handelt. Da das Beispiel einen Handler für das devicechange
-Ereignis bereitstellt, wird die Liste jedes Mal aktualisiert, wenn ein Mediengerät an das Gerät angeschlossen oder davon getrennt wird, auf dem das Beispiel ausgeführt wird.
Wir richten globale Variablen ein, die Referenzen auf die <ul>
Elemente enthalten, die verwendet werden, um die Audio- und Videogeräte aufzulisten:
const audioList = document.getElementById("audioList");
const videoList = document.getElementById("videoList");
Abrufen und Zeichnen der Geräteliste
Schauen wir uns nun updateDeviceList()
selbst an. Diese Methode wird jedes Mal aufgerufen, wenn wir die aktuelle Liste der Mediengeräte abrufen und dann die angezeigten Listen der Audio- und Videogeräte mit diesen Informationen aktualisieren möchten.
function updateDeviceList() {
navigator.mediaDevices.enumerateDevices().then((devices) => {
audioList.textContent = "";
videoList.textContent = "";
devices.forEach((device) => {
const elem = document.createElement("li");
const [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
elem.innerHTML = `<strong>${device.label}</strong> (${direction})`;
if (type === "audio") {
audioList.appendChild(elem);
} else if (type === "video") {
videoList.appendChild(elem);
}
});
});
}
updateDeviceList()
besteht vollständig aus einem Aufruf der Funktion
enumerateDevices()
auf dem
MediaDevices
Objekt, das im
navigator.mediaDevices
Eigenschaft referenziert wird, sowie dem Code, der ausgeführt wird, wenn das
promise
von enumerateDevices()
erfüllt wird. Der
Erfüllungs-Handler wird aufgerufen, wenn die Geräteliste bereit ist. Die Liste wird in den
Erfüllungs-Handler als ein Array von MediaDeviceInfo
Objekten übergeben, von denen jedes ein Medien-Eingabegerät oder -Ausgabegerät beschreibt.
Eine forEach()
Schleife wird verwendet, um alle
Geräte zu durchsuchen. Für jedes Gerät erstellen wir ein neues <li>
Objekt, das zur Anzeige für den Nutzer verwendet wird.
Die Zeile
let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
verdient besondere Beachtung. Diese verwendet die Destrukturierung, um die Werte der ersten drei Elemente im Array, das von
String.match()
zurückgegeben wird, den Variablen kind
, type
und
direction
zuzuweisen. Wir tun dies, weil der Wert von
MediaDeviceInfo.kind
ein einzelner String ist, der den Medientyp und die Richtung enthält, in der die Medien fließen, wie "audioinput" oder "videooutput". Diese Zeile zieht dann den Typ ("audio" oder "video") und die Richtung ("input" oder "output") heraus, sodass sie verwendet werden können, um den in der Liste angezeigten Text zu erstellen.
Sobald der Text zusammengesetzt ist, der den Gerätenamen in Fettdruck und die Richtung in
Klammern enthält, wird er an die entsprechende Liste angehängt, indem
appendChild()
entweder auf audioList
oder
videoList
aufgerufen wird, je nach Gerätetyp.
Umgang mit Änderungen der Geräteliste
Wir rufen updateDeviceList()
an zwei Stellen auf. Die erste ist im
getUserMedia()
Promise-Erfüllungs-
Handler, um die Liste beim Öffnen des Streams initial zu füllen. Die zweite ist im
Ereignis-Handler für dieses devicechange
Ereignis:
navigator.mediaDevices.ondevicechange = (event) => {
updateDeviceList();
};
Mit diesem Code wird jedes Mal, wenn der Benutzer eine Kamera, ein Mikrofon oder ein anderes
Mediengerät anschließt oder ein- oder ausschaltet, updateDeviceList()
aufgerufen, um
die Liste der angeschlossenen Geräte neu zu zeichnen.
Ergebnis
Spezifikationen
Specification |
---|
Media Capture and Streams # event-mediadevices-devicechange |
Media Capture and Streams # dom-mediadevices-ondevicechange |