媒体设备枚举

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

写作背景：

前几节我们都是使用的默认的音视频设备来进行媒体数据的输出，我们这一节就将系统中可以使用的音频输入、输出设备及视频输入设备列举出来并进行切换。

涉及 API：

枚举设备的 API 是 navigator.mediaDevices.enumerateDevices()，它将会异步回调给我们一个 MediaDeviceInfo 数组，每个 MediaDeviceInfo 将包含一个设备的 deviceId ，设备名称 label ，设备的类型 kind 。设备类型包括：audioinput（音频输入），audiooutput（音频输出），videoinput（视频输入）。

// 获取当前计算机可列举的音频输入|输出|视频输入设备
navigator.mediaDevices
  .enumerateDevices()
  .then((devices) => {
  for (const device of devices) {
    if (device.kind === "audioinput") {
      audioInputDevices.push(device);
    } else if (device.kind === "audiooutput") {
      audioOutputDevices.push(device);
    } else if (device.kind === "videoinput") {
      videoDevices.push(device);
    }
  }
})
  .then(() => {
  resolve({ audioInputDevices, audioOutputDevices, videoDevices });
});

注：当用户选择完设备后最好支持保存配置，省去下次调整，因为用户的偏好和设备时候故障都会影响到用户的实际使用。

HTMLMediaElement.setSinkId()API 是一个实验功能，可以通过传入一个音频输出设备的 deviceId 来切换不同的音频输出设备：

const handleChangeAudioOutputDevice = (value: string) => {
  selectedAudioOutputDevice.value = value;
  video
    // @ts-ignore
    .value!.setSinkId(value)
    .then(() => {
      console.log(`音频输出设备设置成功${value}`);
    })
    .catch((error: Error) => {
      console.log(error);
    });
};

注：实际开发时在 HTMLMediaElement 接口中没能找到 setSinkId 函数，但功能正常，这里先使用 @ts-ignore将下一行的错误忽略。

启动设备：

在这里我们要扩展约束条件，以支持使用默认选择的各设备：

const openDevice = () => {
  const constraints: MediaStreamConstraints = {
    audio: {
      deviceId: selectedAudioInputDevice.value
        ? { exact: selectedAudioInputDevice.value }
        : undefined,
    },
    video: {
      deviceId: selectedVideoDevice.value
        ? { exact: selectedVideoDevice.value }
        : undefined,
    },
  };
  ...
};

注：

1. 强烈推荐使用 TypeScript 来开发，并指定真实的类型来得到优秀的代码提示；
2. 其他步骤同前几节的方式，也可以看文末的完整代码。

完整代码：Resolution.vue

结语：

我们通过 enumerateDevices 的到了系统中已存在的音频输入、输出设备及视频的输入设备，在视频会议等软件中也需要支持多种设备的切换来满足不同的场景。

明天继续~