iPhone端Safari浏览器中HTML5控制相机对焦与缩放的方案问询

针对iOS Safari的相机对焦与程序化缩放需求，可通过MediaStreamTrack的约束配置实现，这是目前Safari支持的原生Web方案，无需额外第三方库。

核心原理 #

iOS 14.0+的Safari已支持通过MediaStreamTrack.applyConstraints()方法，结合相机轨道的capabilities属性，手动配置对焦模式、对焦位置、缩放级别等参数。

1. 手动对焦控制 #

实现步骤 #

1. 请求相机权限并获取视频流
2. 提取视频轨道，检查设备是否支持手动对焦
3. 调用applyConstraints()设置对焦参数，支持固定距离对焦或点击屏幕定点对焦

代码示例 #

async function setupCameraFocus() {
  // 请求后置摄像头权限
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode: 'environment' }
  });
  const videoEl = document.getElementById('camera-preview');
  videoEl.srcObject = stream;

  const videoTrack = stream.getVideoTracks()[0];
  const capabilities = videoTrack.getCapabilities();

  // 检查是否支持手动对焦模式
  if (capabilities.focusMode?.includes('manual')) {
    // 设置手动对焦到最近距离（0=最近，1=最远）
    await videoTrack.applyConstraints({
      advanced: [{ focusMode: 'manual', focusDistance: 0 }]
    });
  }

  // 点击屏幕定点对焦
  videoEl.addEventListener('click', async (e) => {
    const rect = videoEl.getBoundingClientRect();
    // 计算点击位置的相对坐标（范围0-1）
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;

    if (capabilities.pointOfInterest) {
      await videoTrack.applyConstraints({
        advanced: [{ 
          pointOfInterest: { x, y }, 
          focusMode: 'manual' 
        }]
      });
    }
  });
}

2. 程序化缩放控制 #

实现步骤 #

1. 获取相机轨道的能力信息，确认是否支持缩放
2. 通过applyConstraints()设置缩放级别，需限制在设备支持的最小/最大值范围内
3. 可绑定按钮事件实现动态调整缩放

代码示例 #

// 记录当前缩放级别
let currentZoom = 1;

async function initZoomControl() {
  const stream = document.getElementById('camera-preview').srcObject;
  if (!stream) return;
  
  const videoTrack = stream.getVideoTracks()[0];
  const capabilities = videoTrack.getCapabilities();

  // 初始化缩放为设备支持的最小值
  if (capabilities.zoom) {
    currentZoom = capabilities.zoom.min;
  }
}

// 调整缩放级别的函数
async function adjustZoom(delta) {
  const stream = document.getElementById('camera-preview').srcObject;
  if (!stream) return;
  
  const videoTrack = stream.getVideoTracks()[0];
  const capabilities = videoTrack.getCapabilities();

  if (capabilities.zoom) {
    // 限制缩放范围在设备支持区间内
    currentZoom = Math.max(capabilities.zoom.min, 
                          Math.min(capabilities.zoom.max, 
                          currentZoom + delta));
    await videoTrack.applyConstraints({
      advanced: [{ zoom: currentZoom }]
    });
  }
}

// 绑定缩放按钮事件
document.getElementById('zoom-in').addEventListener('click', () => adjustZoom(0.5));
document.getElementById('zoom-out').addEventListener('click', () => adjustZoom(-0.5));

关键注意事项 #

• 环境要求：必须在HTTPS环境下运行（localhost开发环境不受限制）
• iOS版本：需iOS 14.0及以上，更早版本不支持这些相机约束
• 权限要求：用户必须授权相机访问权限
• 设备差异：不同iPhone型号的相机能力不同，需通过getCapabilities()提前检查支持性
• 异步处理：applyConstraints()是异步操作，必须用async/await或Promise处理

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