如何在Web端利用或规避iPhone/Mac的Continuity Camera功能？

一、调用Continuity Camera（使用iPhone作为摄像头） #

Continuity Camera在Web环境中会被识别为普通视频输入设备，无需专属API，只需通过媒体设备枚举找到对应iPhone摄像头，指定设备ID即可请求媒体流：

async function getContinuityCameraStream() {
  // 枚举所有媒体设备
  const devices = await navigator.mediaDevices.enumerateDevices();
  // 定位iPhone对应的摄像头（标签通常包含"iPhone"或"Continuity Camera"）
  const continuityCamera = devices.find(device => 
    device.kind === 'videoinput' && 
    (device.label.includes('iPhone') || device.label.includes('Continuity Camera'))
  );

  if (!continuityCamera) {
    throw new Error('未检测到Continuity Camera设备');
  }

  // 请求该设备的视频流
  return navigator.mediaDevices.getUserMedia({
    video: { deviceId: continuityCamera.deviceId }
  });
}

// 使用示例
getContinuityCameraStream()
  .then(stream => {
    document.getElementById('video').srcObject = stream;
  })
  .catch(err => console.error('获取摄像头流失败:', err));

二、规避Continuity Camera自动触发（解决Chrome报错问题） #

当iPhone靠近Mac时，Chrome可能会优先请求Continuity Camera，即便已在chrome://settings/content/camera中指定FaceTime摄像头，仍可能抛出Uncaught (in promise) DOMException: Could not start video source错误。可通过强制指定FaceTime摄像头ID规避，以下是优化后的实现：

async function getPreferredCameraStream(preferredLabel = 'FaceTime') {
  const devices = await navigator.mediaDevices.enumerateDevices();
  // 筛选偏好的摄像头设备
  const preferredDevice = devices.find(device => 
    device.kind === 'videoinput' && device.label.includes(preferredLabel)
  );

  // 若无偏好设备，降级选择第一个可用摄像头
  const deviceId = preferredDevice ? preferredDevice.deviceId : undefined;

  return navigator.mediaDevices.getUserMedia({
    video: { deviceId: deviceId ?? { ideal: true } }
  });
}

// 使用示例
getPreferredCameraStream()
  .then(stream => {
    document.getElementById('video').srcObject = stream;
  })
  .catch(err => console.error('获取摄像头流失败:', err));

优化说明： #

• 用find方法替代循环，代码更简洁高效
• 增加降级逻辑，找不到FaceTime摄像头时自动选择第一个可用设备
• 用空值合并运算符??处理设备ID为空的情况，兼容多浏览器环境

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