我之前做音视频会议项目的时候，也踩过一模一样的坑！移动端浏览器在音频输出设备的枚举上，确实和PC端差很多，尤其是蓝牙、耳机这类外设，经常不显示在枚举列表里，下面给你梳理下原因和可行的解决办法：

为什么你现在枚举不到完整的设备列表？ #

主要是这几个原因：

• 浏览器权限与激活限制：大部分移动端浏览器在没有活跃媒体流的前提下，不会返回完整的设备列表，只会显示"Default"。PC端因为系统权限模型不同，所以没这个限制。
• 系统与浏览器的兼容性：iOS Safari、Android Chrome、微信内置浏览器这些，对Web Audio API的支持细节差异很大，比如iOS会把音频输出设备的控制权更多握在系统手里，不会完全开放给浏览器；Android部分浏览器需要用户先触发媒体操作才会暴露设备。
• 蓝牙设备的特殊处理：不管iOS还是Android，蓝牙音频设备通常需要用户先手动连接，并且浏览器有活跃的媒体播放/录制行为后，才会被枚举到。

具体解决步骤和代码示例 #

1. 先激活媒体流再枚举设备

先获取一个静音的音频流，让浏览器认为有活跃媒体操作，再去枚举设备，这一步能解决大部分“只显示Default”的问题：

const useSpeakerDevices = () => {
  const [speakerDevices, setSpeakerDevices] = useState([]);

  const getSpeakerDevices = useCallback(async () => {
    if (!navigator.mediaDevices?.enumerateDevices) return [];
    
    // 先获取一个静音的音频流，激活媒体权限
    try {
      await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
    } catch (err) {
      // 这里可以处理权限拒绝的情况，比如提示用户开启权限
      console.log("获取媒体流失败，可能影响设备枚举", err);
    }

    const allDevices = await navigator.mediaDevices.enumerateDevices();
    return allDevices.filter(device => device.kind === "audiooutput");
  }, []);

  useEffect(() => {
    const updateDevices = async () => {
      const audioDevices = await getSpeakerDevices();
      setSpeakerDevices(audioDevices);
    };
    updateDevices();

    // 监听设备变化，比如用户连接/断开蓝牙设备
    navigator.mediaDevices.addEventListener('devicechange', updateDevices);
    return () => {
      navigator.mediaDevices.removeEventListener('devicechange', updateDevices);
    };
  }, [getSpeakerDevices]);

  return speakerDevices;
};

2. 用setSinkId切换音频输出设备

即使枚举列表里只有"Default"，有时候你依然可以切换设备——比如用户在系统设置里切到蓝牙后，你可以尝试用setSinkId来设置输出设备，或者直接枚举到的设备ID：

// 假设你有一个audio元素或者媒体流的AudioTrack
const switchAudioOutput = async (deviceId) => {
  const audioElement = document.getElementById('your-audio-element');
  try {
    await audioElement.setSinkId(deviceId);
    console.log("音频输出设备切换成功");
  } catch (err) {
    console.log("切换失败，可能设备不支持", err);
  }
};

// 调用的时候，传入设备的deviceId，比如从枚举列表里拿到的
// switchAudioOutput(speakerDevices[0].deviceId);

3. 针对不同平台的特殊处理

• iOS Safari: 必须由用户主动触发（比如点击按钮）才能获取媒体权限，而且需要iOS 14.5及以上版本才支持setSinkId。另外，iOS上即使枚举不到蓝牙设备，当用户在系统控制中心切换到蓝牙后，浏览器的音频会自动跟随系统输出，你可以监听devicechange事件来更新设备列表。
• Android Chrome: 确保用户已经连接蓝牙设备，并且浏览器已经获取过媒体权限。可以在页面加载后，引导用户点击一个按钮来触发媒体流获取，再枚举设备。

最后总结 #

移动端浏览器的音频输出设备兼容确实是个头疼的问题，核心思路就是：

1. 必须先通过用户交互触发媒体流获取，激活浏览器的媒体权限；
2. 结合devicechange事件实时更新设备列表；
3. 用setSinkId来切换设备，即使枚举列表里只有Default，有时候也能生效（尤其是用户已经在系统层面切换了设备的情况下）。

如果还是拿不到全部设备，也可以做一个兜底提示，引导用户先在系统设置里切换音频输出，再回到页面操作，体验上虽然差点，但至少能解决问题。