MediaDeviceInfo: thuộc tính groupId

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Thuộc tính chỉ đọc groupId của giao diện MediaDeviceInfo trả về một chuỗi là định danh nhóm.

Hai thiết bị có cùng định danh nhóm nếu chúng thuộc cùng một thiết bị vật lý; ví dụ, một màn hình có cả camera và microphone tích hợp.

Giá trị

Một chuỗi nhận dạng duy nhất nhóm các thiết bị liên quan mà thiết bị này thuộc về.

Trong ví dụ này, chúng ta tập hợp danh sách các thiết bị là một phần của cùng nhóm với một thiết bị cho trước. Điều này có thể được sử dụng để tạo ra giao diện người dùng tập hợp các thiết bị liên quan lại với nhau cho mục đích trình bày, hoặc để giúp người dùng dễ dàng chọn sử dụng camera và microphone tích hợp trên cùng một màn hình cùng lúc.

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

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

  return devList;
};

Hàm getDeviceGroup() nhận đầu vào là đối tượng MediaDeviceInfo mô tả thiết bị cần xây dựng danh sách nhóm. Hàm bắt đầu bằng cách khởi tạo mảng kết quả devList thành mảng rỗng.

Sau đó navigator.mediaDevices.enumerateDevices() được gọi để lấy danh sách tất cả thiết bị media. Khi promise được giải quyết, chúng ta duyệt qua danh sách bằng forEach(). Với mỗi thiết bị, nếu groupId của nó khớp với groupId của thiết bị chính, chúng ta đẩy đối tượng MediaDeviceInfo vào danh sách.

Cuối cùng, danh sách chứa đối tượng MediaDeviceInfo cho mỗi thiết bị trong cùng nhóm được trả về cho người gọi.

Phiên bản khác của ví dụ này đặt thiết bị được truyền vào ở đầu danh sách kết quả, sau đó thêm bất kỳ thành viên nào khác của nhóm được tìm thấy:

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;
};