前面两篇文章，分别用了不同的api获取到了摄像头和桌面应用的数据。在一些设备中，流媒体插件比较多，比如有些设备有多个的摄像头，多个的音频输入或输出口，我们需要把这些设备都枚举出来，在会议直播的时候，能够顺利的切换这些音视频设备。

webrtc中，同样提供了api，我们可以很方便的就把这些设备枚举出来，同样的采用js的形式，枚举出

navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);

在gotDevices 函数下，打印出设备信息。

[
    {
        "deviceId": "default",
        "kind": "audioinput",
        "label": "默认 - 麦克风 (Realtek High Definition Audio)",
        "groupId": "be497dd153d15bb110fe000dee3693f10c15489a9f96637040fd394f2bb6f2f3"
    },
    {
        "deviceId": "communications",
        "kind": "audioinput",
        "label": "通讯 - 麦克风 (Realtek High Definition Audio)",
        "groupId": "be497dd153d15bb110fe000dee3693f10c15489a9f96637040fd394f2bb6f2f3"
    },
    {
        "deviceId": "ea09ef21cea50ddaff97c7cd143f76e9a014beced2953f2b5001a1b4e7b602ab",
        "kind": "audioinput",
        "label": "麦克风 (Realtek High Definition Audio)",
        "groupId": "be497dd153d15bb110fe000dee3693f10c15489a9f96637040fd394f2bb6f2f3"
    },
    {
        "deviceId": "0050e0919c91c7dfdef80fa4f95a8fd83ed10c1f812d0abf6fa850fe38397dbd",
        "kind": "videoinput",
        "label": "USB CAMERA (1224:2a25)",
        "groupId": "542c5a03e82fa0aea5ed7eaee18ec59fb1da615f66dcd7116798f7c60744d6aa"
    },
    {
        "deviceId": "86daf71563cd55c4cc46b7f5d68decc78750dd0b2b2c1f12c112fb145e0e60c4",
        "kind": "videoinput",
        "label": "screen-capture-recorder",
        "groupId": "fca0e2b85163420a28ed924981ad0a4622bfa5cf6c4ea2d815c485ac87489567"
    },
    {
        "deviceId": "default",
        "kind": "audiooutput",
        "label": "默认 - 扬声器 (Realtek High Definition Audio)",
        "groupId": "be497dd153d15bb110fe000dee3693f10c15489a9f96637040fd394f2bb6f2f3"
    },
    {
        "deviceId": "communications",
        "kind": "audiooutput",
        "label": "通讯 - 扬声器 (Realtek High Definition Audio)",
        "groupId": "be497dd153d15bb110fe000dee3693f10c15489a9f96637040fd394f2bb6f2f3"
    },
    {
        "deviceId": "936623be763eb701c037d266f873f156092c9b883548e0908faf6a2937501d01",
        "kind": "audiooutput",
        "label": "扬声器 (Realtek High Definition Audio)",
        "groupId": "be497dd153d15bb110fe000dee3693f10c15489a9f96637040fd394f2bb6f2f3"
    }
]

kind的类型有三种，分别是audioinput，audiooutput和videoinput。代表了音视频的输入输出。我们把枚举的音视频的输入输出口，按分类放在不同的下拉框中，通过不同的选择来切换不同的输入输出口。

function gotDevices(deviceInfos) {
  // 枚举所有的输入输出口，并放到下拉框中
  console.log(deviceInfos);
  const values = selectors.map(select => select.value);
  selectors.forEach(select => {
    while (select.firstChild) {
      select.removeChild(select.firstChild);
    }
  });
  for (let i = 0; i !== deviceInfos.length; ++i) {
    const deviceInfo = deviceInfos[i];
    const option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
      option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
      audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
      option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
      audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
      option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
      videoSelect.appendChild(option);
    } else {
      console.log('Some other kind of source/device: ', deviceInfo);
    }
  }
  selectors.forEach((select, selectorIndex) => {
    if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
      select.value = values[selectorIndex];
    }
  });
}

在下拉框中option.value = deviceInfo.deviceId; 我们保存的是deviceId，等下我们切换的时候，直接给deviceId，输入输出口同样跟着换了。

function start() {
  if (window.stream) {
    window.stream.getTracks().forEach(track => {
      track.stop();
    });
  }
  //获取deviceId，变化不同的输入口
  const audioSource = audioInputSelect.value;
  const videoSource = videoSelect.value;
  const constraints = {
    audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
    video: {deviceId: videoSource ? {exact: videoSource} : undefined}
  };
  navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
}

版权声明：本文为CSDN博主「go2coding」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_40425640/article/details/124341142