Agora切换摄像头报错：Cannot read properties of undefined (reading 'deviceId')

核心报错原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'deviceId')报错，本质是代码执行到deviceId = devices.cameras[deviceIndex].deviceId;时，devices.cameras[deviceIndex]返回了undefined，无法读取其下的deviceId属性。

可能的具体触发场景 #

• devices.cameras数组未完成初始化
  你需要先确认是否已经正确调用Agora的设备枚举接口完成摄像头列表查询，且是在枚举完成的回调之后才调用changeStreamSource函数。如果在设备列表还没获取完成时就触发切换逻辑，devices.cameras可能是空数组，对应下标自然取不到有效值。
  可以先加调试代码确认设备列表状态：

console.log('当前摄像头列表：', devices?.cameras, '传入的下标：', deviceIndex)

• 传入的deviceIndex超出数组下标范围
  比如当前设备仅有2个摄像头，数组合法下标为0、1，若传入的deviceIndex为2就会触发报错。常见触发情况包括：设备热插拔（如外接摄像头拔出）后没有更新devices.cameras数组就传入了旧下标、切换逻辑没有限制下标最大值不超过devices.cameras.length - 1。
• devices对象作用域异常
  确认devices对象是否是全局变量，或者是否已经正确传入changeStreamSource的作用域内，若devices本身未定义也会触发类似报错。

修复代码 #

在赋值deviceId前先加边界校验，避免非法参数触发报错：

function changeStreamSource (deviceIndex, deviceType) {
  console.log('Switching stream sources for: ' + deviceType); 
  var deviceId;
  var existingStream = false; 
  if (deviceType === "video") {
    // 新增边界校验逻辑
    if (!devices || !devices.cameras || deviceIndex >= devices.cameras.length || !devices.cameras[deviceIndex]) {
      console.error('无效的摄像头切换参数，设备列表长度：', devices?.cameras?.length || 0, '传入下标：', deviceIndex);
      return;
    }
    deviceId = devices.cameras[deviceIndex].deviceId; 
  }  
   
  localStreams.camera.stream.switchDevice(deviceType, deviceId, function(){  
    console.log('successfully switched to new device with id: ' + JSON.stringify(deviceId));
    // set the active device ids
    if(deviceType === "audio") {
      localStreams.camera.micId = deviceId;
    } else if (deviceType === "video") {
      localStreams.camera.camId = deviceId;
    } else {
      console.log("unable to determine deviceType: " + deviceType);
    }
  }, function(){
    console.log('failed to switch to new device with id: ' + JSON.stringify(deviceId));
  });
}

额外优化建议 #

• 每次有设备热插拔、页面从后台切回前台时，都要重新调用Agora的设备枚举接口更新devices.cameras数组，保证列表和实际设备状态一致
• 切换摄像头的触发入口，要根据最新的devices.cameras长度限制可传入的deviceIndex最大值，避免传入非法下标

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