2.4.5 监听媒体设备变化_WebRTC技术详解：从0到1构建多人视频会议系统-QQ阅读男生玄幻网

书名：WebRTC技术详解：从0到1构建多人视频会议系统
作者名：栗伟
本章字数：326字
更新时间：2021-04-20 11:41:31

2.4.5　监听媒体设备变化

大部分计算机都支持设备运行时热插拔，比如随时插拔USB摄像头、蓝牙耳机或者外接音箱。

为了在应用程序中监测媒体设备的变化，WebRTC提供了devicechange事件和ondevicec-hange事件句柄，与navigator.mediaDevices结合即可实时监控媒体设备的热插拔。

代码清单2-39展示了devicechange事件的两种处理方法。

代码清单2-39　devicechange事件用法示例

// 方法1：使用addEventListener监听事件
navigator.mediaDevices.addEventListener('devicechange', (event) => {
  updateDeviceList();
});
// 方法2：使用ondevicechange事件句柄
navigator.mediaDevices.ondevicechange = (event) => {
  updateDeviceList();
}

代码清单2-40结合使用devicechange和navigator.mediaDevices，当摄像头设备发生变化时，重新监测摄像头设备并更新HTML的下拉列表。

代码清单2-40　监测摄像头

// 更新select元素
function updateCameraList(cameras) {
  const listElement = document.querySelector('select#availableCameras');
  listElement.innerHTML = '';
  cameras.map(camera => {
    const cameraOption = document.createElement('option');
    cameraOption.label = camera.label;
    cameraOption.value = camera.deviceId;
  }).forEach(cameraOption => listElement.add(cameraOption));
}
// 根据指定的设备类型，获取设备数组
async function getConnectedDevices(type) {
  const devices = await navigator.mediaDevices.enumerateDevices();
  return devices.filter(device => device.kind === type)
}
// 获取初始状态的摄像头
const videoCameras = getConnectedDevices('videoinput');
updateCameraList(videoCameras);
// 监听事件并更新设备数组
navigator.mediaDevices.addEventListener('devicechange', event => {
  const newCameraList = getConnectedDevices('videoinput');
  updateCameraList(newCameraList);
});