MediaDeviceInfo：groupId 属性

基线广泛可用

此功能已得到良好确立，并在许多设备和浏览器版本中都能正常工作。它已在浏览器中可用，自 2017 年 9 月.

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中可用。

groupId 是 MediaDeviceInfo 接口的只读属性，它返回一个表示组标识符的字符串。

如果两个设备属于同一物理设备，则它们具有相同的组标识符；例如，带内置摄像头和麦克风的显示器。

值

唯一标识此设备所属的相关设备组的字符串。

规范

规范
媒体捕获和流 # dom-mediadeviceinfo-groupid

示例

在此示例中，我们组装了一个设备列表，这些设备与给定设备属于同一组。这可能用于生成一个用户界面，该界面将关联的设备组合在一起以供显示，或者让用户可以轻松地选择同时使用同一显示器上的内置摄像头和麦克风。

const getDeviceGroup = (mainDevInfo) => {
  let devList = [];

  navigator.mediaDevices.enumerateDevices().then((devices) => {
    devices.forEach((device) => {
      if (device.groupId === mainDevInfo.groupId) {
        devList.push(device);
      }
    });
  });

  return devList;
};

getDeviceGroup() 函数以描述要为其构建组列表的设备的 MediaDeviceInfo 对象作为输入。该函数首先将结果数组 devList 初始化为空数组。

然后调用 navigator.mediaDevices.enumerateDevices() 以获取所有媒体设备的列表。一旦 Promise 解析，我们使用 forEach() 遍历列表。对于每个设备，如果其 groupId 与主设备的 groupId 匹配，则我们将 MediaDeviceInfo 对象推送到列表中。

最后，列表（现在包含同一组中每个设备的 MediaDeviceInfo 对象）将返回给调用方。

这可以轻松地更改为从返回的列表中省略传入的设备，或将其放置在列表的顶部，方法是比较两个对象的 deviceId 值，仅当它不匹配时才将设备推送到结果列表中。

此版本的示例将传入的设备放在结果列表的顶部，然后添加找到的任何其他组成员

const getDeviceGroup = (mainDevInfo) => {
  let devList = [mainDevInfo];

  navigator.mediaDevices.enumerateDevices().then((devices) => {
    devices.forEach((device) => {
      if (
        device.groupId === mainDevInfo.groupId &&
        device.deviceId !== mainDevInfo.deviceId
      ) {
        devList.push(device);
      }
    });
  });

  return devList;
};

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。