MediaDevices: devicechange Ereignis

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("devicechange", (event) => { })

ondevicechange = (event) => { }

Ein generisches Event.

In diesem Beispiel erstellen wir eine Funktion namens updateDeviceList(), die einmal aufgerufen wird, wenn MediaDevices.getUserMedia() erfolgreich einen Stream erhält, und wird dann immer aufgerufen, wenn sich die Geräteliste ändert. Sie zeigt im Browserfenster zwei Listen an: eine mit Audiogeräten und eine mit Videogeräten, jeweils mit dem Gerätenamen (Label) und der Angabe, ob es sich um ein Eingangs- oder Ausgangsgerät handelt. Da das Beispiel einen Handler für das devicechange-Ereignis bereitstellt, wird die Liste aktualisiert, sobald ein Mediengerät an das Gerät angeschlossen wird oder davon entfernt wird, auf dem das Beispiel läuft.

<p>Click the start button below to begin the demonstration.</p>
<div id="startButton" class="button">Start</div>
<video id="video" width="160" height="120" autoplay></video><br />

<div class="left">
  <h2>Audio devices:</h2>
  <ul class="deviceList" id="audioList"></ul>
</div>
<div class="right">
  <h2>Video devices:</h2>
  <ul class="deviceList" id="videoList"></ul>
</div>

<output></output>

body {
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
}

video {
  margin-top: 20px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  width: 160px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
}

h2 {
  margin-bottom: 4px;
}

.left {
  float: left;
  width: 48%;
  margin-right: 2%;
}

.right {
  float: right;
  width: 48%;
  margin-left: 2%;
}

.deviceList {
  border: 1px solid black;
  list-style-type: none;
  margin-top: 2px;
  padding: 6px;
}

// UI elements
const videoElement = document.querySelector("#video");
const logElement = document.querySelector("output");
const startButton = document.querySelector("#startButton");

function log(msg) {
  logElement.innerText += `${msg}\n`;
}

startButton.addEventListener(
  "click",
  () => {
    const constraints = {
      video: {
        width: 160,
        height: 120,
        frameRate: 30,
      },
      audio: {
        sampleRate: 44100,
        sampleSize: 16,
        volume: 0.25,
      },
    };

    navigator.mediaDevices
      .getUserMedia(constraints)
      .then((stream) => {
        videoElement.srcObject = stream;
        updateDeviceList();
      })
      .catch((err) => {
        log(`${err.name}: ${err.message}`);
      });
  },
  false,
);

Wir richten globale Variablen ein, die Referenzen zu den <ul>-Elementen enthalten, die verwendet werden, um die Audio- und Videogeräte aufzulisten:

const audioList = document.getElementById("audioList");
const videoList = document.getElementById("videoList");

Sehen wir uns nun updateDeviceList() selbst an. Diese Methode wird jedes Mal aufgerufen, wenn wir die aktuelle Liste der Mediengeräte abrufen wollen und dann die angezeigten Listen der Audio- und Videogeräte mit diesen Informationen aktualisieren wollen.

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 in der navigator.mediaDevices-Eigenschaft referenziert ist, sowie dem Code, der ausgeführt wird, wenn das promise, das von enumerateDevices() zurückgegeben wird, erfüllt wird. Der Fulfillment-Handler wird aufgerufen, wenn die Geräteliste bereit ist. Die Liste wird in den Fulfillment-Handler als ein Array von MediaDeviceInfo-Objekten übergeben, die jeweils ein Ein- oder Ausgabegerät beschreiben.

Eine forEach()-Schleife wird verwendet, um alle Geräte zu durchsuchen. Für jedes Gerät erstellen wir ein neues <li>-Objekt, das verwendet wird, um es dem Benutzer anzuzeigen.

Die Zeile let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); verdient besondere Beachtung. Dies nutzt Destructuring Assignment, um die Werte der ersten drei Einträge im Array, das von String.match() zurückgegeben wird, den Variablen kind, type und direction zuzuweisen. Dies machen wir, weil der Wert von MediaDeviceInfo.kind ein einzelner String ist, der sowohl den Medientyp als auch die Richtung enthält, in die die Medien fließen, wie "audioinput" oder "videooutput". Diese Zeile extrahiert dann den Typ ("audio" oder "video") und die Richtung ("input" oder "output"), sodass sie verwendet werden können, um die in der Liste angezeigte Zeichenfolge zu erstellen.

Sobald die Zeichenfolge erstellt ist, die den Gerätenamen in Fettdruck und die Richtung in Klammern enthält, wird sie durch Aufrufen von appendChild() der passenden Liste (audioList oder videoList, je nach Gerätetyp) hinzugefügt.

Wir nennen updateDeviceList() an zwei Stellen. Die erste befindet sich im Fulfillment-Handler des getUserMedia()-Promises, um die Liste initial zu füllen, wenn der Stream geöffnet wird. Der zweite ist im Ereignishandler 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 eines ein- oder ausschaltet, updateDeviceList() aufgerufen, um die Liste der verbundenen Geräte neu zu zeichnen.