如何在Web应用中区分移动设备特殊摄像头与普通摄像头？

核心方案：用标准API指定拍摄方向 #

直接在getUserMedia的约束中设置facingMode: 'environment'，这是浏览器原生支持的标准方法，绝大多数设备会直接返回系统默认的后置主摄，不需要手动枚举设备列表：

async function getDefaultRearCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment' }
    });
    const videoTrack = stream.getVideoTracks()[0];
    // 这里可对获取到的摄像头轨道做后续处理
    return videoTrack;
  } catch (err) {
    console.error('访问后置摄像头失败:', err);
  }
}

针对多后置摄像头设备的过滤逻辑 #

如果像iPhone 15这类设备返回多个后置摄像头（主摄、长焦、鱼眼等），可以通过摄像头的能力参数筛选：

1. 先枚举所有后置摄像头
2. 获取每个摄像头的fieldOfView（视野范围）参数
3. 过滤掉视野过大的鱼眼（通常>120°）和视野过小的长焦（通常<60°），保留中间区间的主摄

代码示例：

async function pickMainRearCamera() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  // 先筛选出所有后置摄像头（部分设备label含'back'，或可通过facingMode判断）
  const rearCameras = devices.filter(device => 
    device.kind === 'videoinput' && device.label.includes('back')
  );

  // 获取每个摄像头的能力参数
  const cameraInfos = await Promise.all(rearCameras.map(async device => {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: { deviceId: device.deviceId }
      });
      const track = stream.getVideoTracks()[0];
      const capabilities = track.getCapabilities();
      stream.getTracks().forEach(track => track.stop());
      return { ...device, capabilities };
    } catch (err) {
      return null;
    }
  })).then(infos => infos.filter(Boolean));

  // 筛选视野范围在60°-120°之间的主摄（可根据实际设备微调区间）
  const mainCamera = cameraInfos.find(camera => {
    const fov = camera.capabilities.fieldOfView;
    return fov && fov >= 60 && fov <= 120;
  });

  return mainCamera ? mainCamera.deviceId : null;
}

临时应急方案：标签关键词匹配（慎用） #

如果上述方法失效，可以临时通过设备标签的关键词匹配，比如找包含'wide'、'main'、'主摄'这类字样的设备，但要注意不同设备、不同语言环境的标签差异很大，这个方案稳定性差，不推荐长期使用。

未来方向 #

W3C正在推进MediaDevices的扩展提案，后续会提供标准化的摄像头类型标识（明确区分主摄、长焦、鱼眼等），届时可以直接通过标准API精准获取目标摄像头。

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