Angular项目QR Scanner无法适配多摄像头设备的正确扫码相机问题

你的核心问题在于当前的相机筛选逻辑过于粗糙——只简单匹配包含"back"/"rear"的后置相机后直接选第一个，但iPhone Pro这类多后置摄像头设备里，不同镜头的对焦能力差异极大：系统默认扫码用的是超广角（Ultra Wide）或主摄（Wide），这类镜头最小对焦距离更近，适合近距离扫码；而你代码选中的第一个后置相机大概率是长焦（Telephoto）镜头，它的对焦距离远，近距离会模糊，自然扫码效率低下。

优化筛选逻辑 #

修改onCamerasFound方法，通过更精准的标签关键词匹配，优先选择适合近距离扫描的镜头：

onCamerasFound(devices: MediaDeviceInfo[]) {
  if (devices.length === 0) return;

  // 先过滤所有后置相机
  const backCameras = devices.filter(device => 
    device.label.toLowerCase().includes('back') || 
    device.label.toLowerCase().includes('rear')
  );

  if (backCameras.length === 0) {
    this.selectedDevice = devices[0];
    return;
  }

  // 优先选择超广角/主摄（适配iOS和Android设备的标签差异）
  const preferredCamera = backCameras.find(device => {
    const lowerLabel = device.label.toLowerCase();
    return lowerLabel.includes('ultra wide') 
      || lowerLabel.includes('wide') 
      || lowerLabel.includes('main') 
      || lowerLabel.includes('primary');
  });

  // 兜底：如果找不到首选镜头，选第一个后置相机
  this.selectedDevice = preferredCamera || backCameras[0];
}

进阶方案：通过硬件能力筛选（可选） #

如果设备标签不规范，无法通过关键词匹配，可以直接读取相机的对焦能力，选择最小对焦距离最短的镜头：

async onCamerasFound(devices: MediaDeviceInfo[]) {
  if (devices.length === 0) return;

  const backCameras = devices.filter(device => 
    device.label.toLowerCase().includes('back') || 
    device.label.toLowerCase().includes('rear')
  );

  if (backCameras.length === 0) {
    this.selectedDevice = devices[0];
    return;
  }

  let bestDevice = backCameras[0];
  let minFocusDistance = Infinity;

  // 遍历后置相机，获取最小对焦距离
  for (const device of backCameras) {
    try {
      // 临时打开相机获取能力
      const stream = await navigator.mediaDevices.getUserMedia({
        video: { deviceId: device.deviceId }
      });
      const videoTrack = stream.getVideoTracks()[0];
      const capabilities = videoTrack.getCapabilities();

      // 检查是否支持对焦距离参数
      if (capabilities.focusDistance && capabilities.focusDistance.min < minFocusDistance) {
        minFocusDistance = capabilities.focusDistance.min;
        bestDevice = device;
      }

      // 关闭临时流
      stream.getTracks().forEach(track => track.stop());
    } catch (err) {
      console.error('获取相机能力失败:', err);
    }
  }

  this.selectedDevice = bestDevice;
}

注意：这个方案需要浏览器支持MediaTrackCapabilities API，且会临时请求相机权限，可能影响用户体验，建议作为备选方案。

额外检查点 #

1. 确保selectedDevice是响应式变量（比如直接赋值触发Angular变更检测），保证zxing-scanner能感知到设备切换。
2. 若部分设备标签无明确关键词，可给用户提供手动选择相机的下拉菜单，作为最终兜底方案。

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