如何确定已连接的设备？navigator.mediaDevices.enumerateDevices 的进阶指南

javascript

2024-03-25 09:14:26

识别已连接的设备：利用 navigator.mediaDevices.enumerateDevices 的强大功能

作为 Web 开发人员，我们经常需要获取有关用户设备上可用设备的信息。借助 navigator.mediaDevices.enumerateDevices API，我们可以轻松获取相机、麦克风和扬声器等设备的列表。

然而，有时仅获取可用设备列表还不够。我们需要知道哪些设备实际上是已连接或活动的。本文将深入探讨如何通过 navigator.mediaDevices.enumerateDevices 准确确定当前已连接的设备。

问题：设备连接状态的隐患

在某些情况下，即使设备已断开连接，navigator.mediaDevices.enumerateDevices 仍会将其列在可用设备列表中。例如，索尼的 Image Edge 软件已知会阻止操作系统正确检测到断开连接的相机。

解决方法：获取活动设备

为了获取当前活动的设备，我们可以采用以下步骤：

调用 enumerateDevices()： 首先，我们使用 navigator.mediaDevices.enumerateDevices() 获取可用设备的列表。
过滤设备： 接下来，我们遍历列表，仅选择具有 "active" 属性为 true 的设备。这些设备就是活动的。
验证连接状态： 对于每个活动的设备，我们使用 navigator.mediaDevices.getUserMedia() 获取 MediaStream。
检查流状态： 我们检查 MediaStream 的 "active" 和 "enabled" 属性。如果两者都为 true，则设备已连接。
排除断开连接的设备： 如果任何属性为 false，则设备已断开连接。

代码示例

navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    // 过滤活动设备
    const activeDevices = devices.filter(device => device.active);

    activeDevices.forEach(device => {
      navigator.mediaDevices.getUserMedia({ video: { deviceId: device.deviceId } })
        .then(stream => {
          // 检查流状态
          if (stream.active && stream.getVideoTracks()[0].enabled) {
            console.log(`${device.label} 已连接`);
          } else {
            console.log(`${device.label} 已断开连接`);
          }
        })
        .catch(error => {
          console.error(`获取 ${device.label} 的流时出错：`, error);
        });
    });
  })
  .catch(error => {
    console.error(`获取设备时出错：`, error);
  });