Angular项目ZXing扫码器如何根据距离自动切换相机并更新selectedDevice？

针对iPhone 15 Pro这类多摄像头设备无法自动切换到近距离对焦相机的问题，可以通过主动监听设备列表、筛选适配镜头并动态更新选中设备的方式解决，实现类似系统相机的自动切换逻辑。

核心思路 #

1. 枚举所有可用的视频输入设备，筛选出摄像头
2. 定期检测并优先选择带微距/超广角标识的镜头（这类镜头更适合近距离扫码）
3. 动态更新selectedDevice变量，让ZXing扫描器自动切换到最优设备

具体实现代码 #

组件类逻辑

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MediaDeviceInfo } from 'mediadevices';

@Component({
  selector: 'app-qr-scanner',
  templateUrl: './qr-scanner.component.html',
  styleUrls: ['./qr-scanner.component.css']
})
export class QrScannerComponent implements OnInit, OnDestroy {
  selectedDevice: MediaDeviceInfo | undefined;
  availableDevices: MediaDeviceInfo[] = [];
  private deviceCheckTimer: any;

  ngOnInit(): void {
    this.fetchCameraDevices();
  }

  ngOnDestroy(): void {
    // 组件销毁时清理定时器
    if (this.deviceCheckTimer) {
      clearInterval(this.deviceCheckTimer);
    }
  }

  async fetchCameraDevices() {
    try {
      const allDevices = await navigator.mediaDevices.enumerateDevices();
      this.availableDevices = allDevices.filter(device => device.kind === 'videoinput');
      // 启动设备检测定时器，间隔可按需调整
      this.startDeviceMonitoring();
    } catch (err) {
      console.error('获取摄像头设备失败:', err);
    }
  }

  startDeviceMonitoring() {
    // 每2秒检查一次设备状态，避免频繁切换导致卡顿
    this.deviceCheckTimer = setInterval(() => {
      this.switchToOptimalCamera();
    }, 2000);
  }

  switchToOptimalCamera() {
    // 优先匹配iOS设备的微距/超广角镜头标签（适配多语言场景）
    const targetDevice = this.availableDevices.find(device => 
      device.label.includes('Macro') ||
      device.label.includes('UltraWide') ||
      device.label.includes('微距') ||
      device.label.includes('超广角')
    );

    // 找到目标设备且未选中时，更新selectedDevice
    if (targetDevice && this.selectedDevice?.deviceId !== targetDevice.deviceId) {
      this.selectedDevice = targetDevice;
    } 
    // 无适配镜头时， fallback到第一个可用摄像头
    else if (!targetDevice && this.availableDevices.length > 0 && !this.selectedDevice) {
      this.selectedDevice = this.availableDevices[0];
    }
  }

  onQrCodeScanComplete(result: string) {
    // 扫码成功后停止设备检测，节省性能
    if (this.deviceCheckTimer) {
      clearInterval(this.deviceCheckTimer);
    }
    // 后续扫码结果处理逻辑
    console.log('扫码结果:', result);
  }
}

模板代码（保持原有结构）

<zxing-scanner  
  [device]="selectedDevice" 
  (scanSuccess)="onQrCodeScanComplete($event)"
  style="width: 100%; max-height: 50vh;">
</zxing-scanner>

注意事项 #

• iOS设备的摄像头标签会随系统语言变化，需要多语言关键词覆盖
• 定时器间隔不宜过短，建议1-3秒，避免频繁切换相机造成画面卡顿
• 必须确保用户已授予相机权限，否则无法枚举设备列表
• 扫码成功后建议停止设备检测，减少不必要的资源消耗

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