MediaDevices: событие devicechange

Событие devicechange отправляется экземпляру MediaDevices всякий раз, когда медиаустройство, такое как камера, микрофон или динамик, подключается или отключается от системы.

Это событие не отменяется и не распространяется.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика событий.

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

ondevicechange = (event) => {};

Общее Event.

В этом примере мы создаём функцию updateDeviceList(), которая вызывается один раз, когда MediaDevices.getUserMedia() успешно получает поток, а затем вызывается каждый раз, когда список устройств изменяется. Она отображает в окне браузера два списка: один для аудиоустройств и один для видеоустройств, с меткой устройства (названием) и указанием, является ли это устройство устройством ввода или вывода. Так как пример предоставляет обработчик события devicechange, список обновляется каждый раз, когда к устройству, на котором запущен образец, подключается или отключается медиаустройство.

Мы настраиваем глобальные переменные, которые содержат ссылки на элементы <ul>, используемые для перечисления аудио- и видеоустройств:

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

Теперь давайте посмотрим на updateDeviceList(). Этот метод вызывается всякий раз, когда нам нужно получить текущий список медиаустройств и обновить отображаемые списки аудио- и видеоустройств, используя эту информацию.

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() состоит целиком из вызова функции enumerateDevices() объекта MediaDevices, на который ссылается свойство navigator.mediaDevices, а также кода, выполняемого, когда promise, возвращаемый enumerateDevices(), выполняется. Обработчик выполнения вызывается, когда список устройств готов. Список передаётся в обработчик выполнения в виде массива объектов MediaDeviceInfo, каждый из которых описывает одно медиаустройство ввода или вывода.

Цикл forEach() используется для просмотра всех устройств. Для каждого устройства мы создаём новый объект <li>, используемый для отображения его пользователю.

Строка let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i); заслуживает особого внимания. Она использует деструктурирующее присваивание для присвоения значений первых трёх элементов массива, возвращаемого String.match(), переменным kind, type и direction. Мы делаем это, потому что значение MediaDeviceInfo.kind представляет собой одну строку, содержащую тип медиа и направление потока медиа, например, "audioinput" или "videooutput". Эта строка затем извлекает тип ("audio" или "video") и направление ("вход" или "выход"), чтобы их можно было использовать для построения строки, отображаемой в списке.

После сборки строки, содержащей имя устройства в жирном шрифте и направление в скобках, она добавляется в соответствующий список путём вызова appendChild() для audioList или videoList, в зависимости от типа устройства.

Мы вызываем updateDeviceList() в двух местах. Первое — в обработчике выполнения обещания getUserMedia() для первоначального заполнения списка при открытии потока. Второе — в обработчике событий для этого события devicechange:

navigator.mediaDevices.ondevicechange = (event) => {
  updateDeviceList();
};

С этим кодом каждый раз, когда пользователь подключает камеру, микрофон или другое медиаустройство, или включает или выключает его, мы вызываем updateDeviceList() для перерисовки списка подключенных устройств.