浏览器调用getUserMedia()偶发找不到摄像头设备问题咨询

• M1芯片Mac连续互通相机兼容性异常：2020款M1 MacBook Pro运行macOS Monterey及以上版本时，会默认开启连续互通相机功能，当附近配对的iPhone/iPad临时接入/断开时，系统摄像头列表会发生变动，内置摄像头的设备ID会被临时覆盖。Teams、Skype等桌面应用调用摄像头时会主动遍历全量设备列表，可自动切换到可用的内置摄像头；而Chrome、Safari的媒体设备调度逻辑优先读取缓存的默认摄像头ID，缓存未更新时就会找不到对应设备。
• 浏览器媒体设备缓存未更新：为降低权限申请频次和系统开销，Chrome、Safari会对媒体设备枚举结果做10-30分钟的本地缓存。如果缓存生成时正好出现系统摄像头列表异常，缓存就会记录无可用视频输入设备，此时调用getUserMedia不会触发权限申请弹窗，直接抛出找不到设备的错误，等待缓存自动过期后重新枚举设备即可恢复正常，刚好对应半小时自动恢复的现象。
• macOS隐私权限临时冻结：macOS Ventura及以上版本新增了摄像头权限静默检测逻辑，短时间内多次触发摄像头权限申请的非白名单进程会被临时限制权限调用入口。Chrome、Safari默认不在系统权限白名单内，而Teams、Skype属于官方签名的高频摄像头调用应用，被加入白名单不会被限制。

• 临时修复：出现故障时直接重启浏览器即可立即清除媒体设备缓存，无需等待缓存过期。
• 永久修复：
  1. 打开系统设置→通用→AirDrop与接力，关闭「连续互通相机」功能，避免配对移动设备接入导致的摄像头列表异常
  2. 调用getUserMedia前主动刷新设备列表，规避浏览器缓存问题，优化后代码示例如下：

// 先强制枚举刷新设备列表，不依赖浏览器默认缓存
navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    const hasAvailableCamera = devices.some(item => item.kind === 'videoinput');
    if (!hasAvailableCamera) {
      // 未检测到摄像头时延迟重试，或提示用户检查设备
      setTimeout(() => window.location.reload(), 2000);
      return;
    }
    return navigator.mediaDevices.getUserMedia({video: true});
  })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(err => console.error('getUserMedia() failed: ', err));

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