如何在React JSX下拉菜单中展示console log输出的音视频设备信息

现有代码已经能通过navigator.mediaDevices.enumerateDevices()正常枚举设备、在控制台打印带deviceId的设备信息，不需要重写设备获取逻辑，仅需把原本打印日志的位置替换为DOM渲染逻辑，就能把设备值绑定到页面下拉框。

操作步骤 #

• 先在页面中预留对应类型的下拉菜单DOM节点，作为渲染目标

  <!-- 摄像头选择下拉框 -->
  <select id="videoDeviceSelect"></select>
  <!-- 麦克风选择下拉框 -->
  <select id="audioDeviceSelect"></select>
  

• 定位原有代码中console.log(deviceId)的输出位置，将打印逻辑替换为选项生成逻辑
  附常见的已跑通的原有设备枚举代码结构参考：

  // 原有已验证可正常运行的设备获取逻辑
  async function getMediaDevices() {
    // 申请设备权限（原代码已跑通，无需修改）
    await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    // 获取所有连接的媒体设备
    const deviceList = await navigator.mediaDevices.enumerateDevices();
  
    // 原有代码此处执行console打印，仅能在调试台看到deviceId
    deviceList.forEach(device => {
      console.log(device.deviceId)
    })
  }
  

• 在枚举设备的流程内，新增下拉选项渲染逻辑，替换原有console打印段：

  // 获取页面下拉框DOM节点
  const videoSelect = document.querySelector('#videoDeviceSelect');
  const audioSelect = document.querySelector('#audioDeviceSelect');
  // 清空下拉框冗余旧选项
  videoSelect.innerHTML = '';
  audioSelect.innerHTML = '';
  
  deviceList.forEach(device => {
    const option = document.createElement('option');
    // 将控制台输出的deviceId绑定为选项的value值
    option.value = device.deviceId;
    // 选项展示文本做兜底处理，避免空值
    option.textContent = device.label || `未识别设备 ${device.deviceId.slice(0, 5)}`;
  
    // 按设备类型插入对应下拉框
    if (device.kind === 'videoinput') {
      videoSelect.appendChild(option);
    }
    if (device.kind === 'audioinput') {
      audioSelect.appendChild(option);
    }
  })
  

实操注意事项 #

• 需保证渲染逻辑在DOM节点加载完成后执行，否则会出现找不到下拉框节点的空指针报错
• 如果设备label显示为空，是未完成用户设备授权导致的，这部分逻辑原有可运行代码已覆盖，枚举设备前已完成权限申请的流程不受影响
• 如需适配设备热插拔场景，可监听navigator.mediaDevices.ondevicechange事件，触发后重新执行上述渲染流程，保证下拉选项和实际连接设备同步

内容的提问来源于stack exchange，提问作者anonymousowl