使用JavaScript getUserMedia调用后置摄像头时画面缩小，求1倍变焦方案

出现画面类似0.5倍变焦的情况，大概率是摄像头默认采用了广角副摄输出、getUserMedia的分辨率约束未匹配主摄原生参数，或是video标签样式导致了画面缩放。以下是具体解决步骤：

1. 精准配置摄像头约束，锁定后置主摄 #

明确指定使用后置摄像头，并优先匹配主摄原生分辨率，避免系统自动切换到广角镜头：

async function initRearCamera() {
  // 枚举所有视频设备，筛选后置主摄
  const devices = await navigator.mediaDevices.enumerateDevices();
  const rearCamera = devices.find(dev => 
    dev.kind === 'videoinput' && 
    (dev.label.includes('back') || dev.label.includes('后置'))
  );

  const constraints = {
    video: {
      // 强制使用后置摄像头
      facingMode: { exact: 'environment' },
      // 匹配主摄原生分辨率，这里以1080P为例，可根据设备调整
      width: { ideal: 1920, max: 1920 },
      height: { ideal: 1080, max: 1080 },
      // 禁用自动缩放裁剪
      resizeMode: 'none',
      // 如果找到明确的后置摄像头ID，直接指定更可靠
      ...(rearCamera && { deviceId: rearCamera.deviceId })
    }
  };

  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const video = document.getElementById('camera-video');
    video.srcObject = stream;
    await video.play();
  } catch (err) {
    console.error('摄像头初始化失败:', err);
  }
}

2. 调整video标签样式，避免人为缩放 #

画面缩小常因video的CSS设置了错误的宽高比或强制尺寸，需保持原生分辨率比例：

#camera-video {
  /* 匹配摄像头原生宽高比，比如16:9 */
  aspect-ratio: 16/9;
  /* 保持画面完整、不变形 */
  object-fit: contain;
  width: 100%;
  max-width: 1920px; /* 限制最大宽度，避免过度拉伸 */
}

若需铺满容器且不裁剪，可将object-fit改为cover，这仅改变显示方式，不影响摄像头变焦倍数。

3. 截取画面时使用原生分辨率，确保1倍变焦效果 #

截取画面必须使用视频的videoWidth和videoHeight（摄像头输出的原生分辨率），而非标签的显示尺寸：

function capture1xFrame() {
  const video = document.getElementById('camera-video');
  const canvas = document.createElement('canvas');
  // 用视频原生分辨率创建画布
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // 导出为图片
  canvas.toBlob(blob => {
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = '1x-capture.jpg';
    downloadLink.click();
    URL.revokeObjectURL(downloadLink.href);
  }, 'image/jpeg', 0.9);
}

4. ImageCapture失败的排查要点 #

若之前使用ImageCapture未成功，可能是以下原因：

• 设备/浏览器不兼容：部分旧安卓设备或低版本浏览器不支持该API
• 分辨率约束不匹配：设备无法提供指定的分辨率，导致API调用失败
• 未等待视频流稳定：需等video.play()完成后再调用takePhoto()

正确的ImageCapture使用示例：

async function captureWithImageCapture() {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: {
      facingMode: 'environment',
      width: { ideal: 1920 },
      height: { ideal: 1080 }
    }
  });
  const videoTrack = stream.getVideoTracks()[0];
  const imageCapture = new ImageCapture(videoTrack);

  try {
    // 捕获全分辨率照片
    const photoBlob = await imageCapture.takePhoto();
    // 处理照片，比如显示到页面
    const img = document.createElement('img');
    img.src = URL.createObjectURL(photoBlob);
    document.body.appendChild(img);
  } catch (err) {
    console.error('ImageCapture调用失败:', err);
  }
}

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