我之前做二维码扫描功能时也碰到过一模一样的问题，InstaScan默认并没有强制开启自动对焦，再加上不同浏览器和设备的媒体参数差异，很容易出现画面一直模糊的情况。下面是几个亲测有效的解决方法：

1. 初始化InstaScan时指定对焦相关的媒体约束 #

直接在Scanner的配置里传入mediaConstraints，明确告诉浏览器启用持续自动对焦模式，同时搭配自动曝光和白平衡，能大幅提升画面清晰度：

// 获取页面上的video元素
const videoElement = document.getElementById('preview');

// 初始化Scanner并配置媒体约束
const scanner = new Instascan.Scanner({
  video: videoElement,
  mediaConstraints: {
    video: {
      facingMode: 'environment', // 优先使用后置摄像头（扫二维码必备）
      focusMode: 'continuous',    // 持续自动对焦，适合动态扫描
      exposureMode: 'continuous', // 自动调整曝光，避免过暗/过亮
      whiteBalanceMode: 'continuous' // 自动白平衡，色彩更准确
    }
  }
});

2. 直接操作视频轨道强制设置对焦 #

如果上面的配置没生效，可能是InstaScan没有正确传递约束，这时候可以手动获取视频轨道，直接修改对焦参数：

// 启动扫描后获取视频轨道
scanner.start(camera).then(() => {
  const videoTrack = scanner.video.srcObject.getVideoTracks()[0];
  const trackCapabilities = videoTrack.getCapabilities();

  // 先检查当前摄像头是否支持持续自动对焦
  if (trackCapabilities.focusMode && trackCapabilities.focusMode.includes('continuous')) {
    videoTrack.applyConstraints({
      advanced: [{ focusMode: 'continuous' }]
    }).catch(err => {
      console.error('设置自动对焦失败:', err);
    });
  } else if (trackCapabilities.focusMode && trackCapabilities.focusMode.includes('auto')) {
    // 如果不支持持续对焦，退而求其次用单次自动对焦
    videoTrack.applyConstraints({
      advanced: [{ focusMode: 'auto' }]
    });
  }
}).catch(err => {
  console.error('启动扫描器失败:', err);
});

3. 优化视频元素的显示样式 #

有时候画面模糊并不是对焦的问题，而是视频元素被拉伸变形导致的。给video元素设置合理的样式，保持原生分辨率比例：

#preview {
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: contain; /* 保持视频比例，避免拉伸 */
}

额外注意事项 #

• 不同浏览器对媒体约束的支持有差异：Chrome、Firefox的兼容性最好，Safari可能需要更高版本才能支持focusMode参数；
• 设备硬件限制：部分低端手机或平板的摄像头本身不支持自动对焦，这种情况下只能手动调整拍摄距离；
• 镜头清洁：别忽略最基础的——确保摄像头镜头没有灰尘或指纹遮挡。

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