使用agora-rtc-sdk-ng/react切换音视频设备时setDevice超时问题

核心问题根因 #

• 音频轨道处于禁用状态时调用setDevice：你的mute方法调用了setEnabled(false)禁用轨道，此时轨道处于非活跃状态，调用setDevice无法正常完成设备初始化流程，就会触发超时
• 全局设备监听事件绑定错误：你直接在hook的顶层作用域给AgoraRTC.onCameraChanged、AgoraRTC.onMicrophoneChanged赋值，这两个是全局事件，hook多次渲染或者多个实例调用时会覆盖原有回调，甚至引发重复触发切换的竞态问题
• 设备切换逻辑存在索引错误：createMicrophoneAndCameraTracks返回的tracks数组中，索引0是音频轨道、索引1是视频轨道，但你在AgoraRTC.onCameraChanged的判断逻辑里错误使用了tracks?.[0].getTrackLabel()，拿音频轨道标签和摄像头设备标签比对，会触发异常逻辑干扰设备切换
• 设备切换时无错误捕获：切换设备的异步逻辑没有加try/catch，无法捕获setDevice抛出的具体错误，也没有降级处理逻辑
• 虚拟音频设备兼容性：你测试用的Krisp麦克风属于虚拟音频输入设备，部分浏览器对虚拟设备的getUserMedia授权存在限制，会导致设备获取超时

修复步骤 #

1. 补充轨道状态判断、错误捕获和并发锁
   调用setDevice之前先判断轨道的enabled状态，同时加切换锁避免用户快速操作引发并发冲突，麦克风切换的useEffect修改如下：

// 新增切换状态锁
const [isSwitching, setIsSwitching] = useState(false)

useEffect(() => {
  if (!tracks || !microphoneDevice || isSwitching) return
  ;(async () => {
    setIsSwitching(true)
    try {
      console.log('i came here', microphoneDevice)
      // 先判断音频轨道是否启用，未启用则先启用再切换
      if (!tracks[0].enabled) {
        await tracks[0].setEnabled(true)
      }
      await tracks[0].setDevice(microphoneDevice.deviceId)
      console.log('Newmic', microphoneDevice)
    } catch (err) {
      console.error('切换麦克风失败:', err)
      // 降级处理：切回默认麦克风
      const mics = await AgoraRTC.getMicrophones()
      mics[0] && setMicrophoneDevice(mics[0])
    } finally {
      setIsSwitching(false)
    }
  })()
}, [microphoneDevice, tracks, isSwitching])

摄像头的切换逻辑也要同步补充状态判断、错误捕获和并发锁。

2. 修正全局设备事件的绑定时机和索引错误
   把全局设备事件的绑定放到useEffect里，组件卸载时清除回调，同时修正摄像头监听的轨道索引：

useEffect(() => {
  AgoraRTC.onCameraChanged = async (changedDevice) => {
    if (changedDevice.state === 'ACTIVE') {
      setCameraDevice(changedDevice.device)
      // 修复轨道索引：摄像头对应tracks[1]不是tracks[0]
    } else if (changedDevice.device.label === tracks?.[1].getTrackLabel()) {
      const oldCameras = await AgoraRTC.getCameras()
      oldCameras[0] && setCameraDevice(oldCameras[0])
    }
  }
  AgoraRTC.onMicrophoneChanged = async (changedDevice) => {
    if (changedDevice.state === 'ACTIVE') {
      setMicrophoneDevice(changedDevice.device)
    } else if (changedDevice.device.label === tracks?.[0].getTrackLabel()) {
      const oldMicrophones = await AgoraRTC.getMicrophones()
      oldMicrophones[0] && setMicrophoneDevice(oldMicrophones[0])
    }
  }
  // 卸载时清空回调避免内存泄漏和覆盖
  return () => {
    AgoraRTC.onCameraChanged = () => {}
    AgoraRTC.onMicrophoneChanged = () => {}
  }
}, [tracks])

3. 优化冗余逻辑
   删除init方法中重复注册的user-left事件监听，避免重复执行用户移除逻辑。

4. 虚拟设备兼容性处理
   测试时优先使用实体麦克风验证逻辑，针对虚拟麦克风可以在调用createMicrophoneAndCameraTracks的时候传入更宽松的音频配置，避免设备检测超时：

const useMicrophoneAndCameraTracks = createMicrophoneAndCameraTracks(
  { echoCancellation: true, noiseSuppression: true },
  { frameRate: 30 }
)

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