uniapp H5扫码如何实现调焦功能

在uniapp开发的H5页面中，如何实现扫码时的调焦功能？目前使用官方API只能识别固定距离的二维码，远距离或模糊的二维码识别率很低。是否需要调用原生摄像头接口或引入第三方库？具体实现步骤和兼容性如何？求解决方案和代码示例。

songsunli 1楼

uniapp H5扫码默认不支持调焦，但可通过以下方式实现：

使用uni.createCameraContext()获取相机实例
调用cameraContext.setZoom()方法设置焦距
参数为数字，范围通常1-10，表示放大倍数

注意：部分手机浏览器可能不支持该功能。

yuanlaile 2楼

在 UniApp 的 H5 环境中，实现扫码调焦功能依赖于浏览器的 getUserMedia API 和 JavaScript 控制摄像头参数。以下是实现步骤和示例代码：

实现思路

使用 navigator.mediaDevices.getUserMedia 获取摄像头视频流。
通过 MediaStreamTrack 的 applyConstraints() 方法调整焦距（focusDistance 或 focusMode）。
注意：浏览器兼容性有限，部分设备可能不支持调焦。

示例代码

<template>
  <view>
    <video id="video" autoplay></video>
    <button @click="startScan">开始扫码</button>
    <button @click="adjustFocus(0.5)">调焦（示例值）</button>
  </view>
</template>

<script>
export default {
  methods: {
    async startScan() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ 
          video: { 
            facingMode: 'environment', // 后置摄像头
            advanced: [{ focusMode: 'manual' }] // 请求手动对焦支持
          } 
        });
        const video = document.getElementById('video');
        video.srcObject = stream;
        
        // 获取视频轨道
        this.videoTrack = stream.getVideoTracks()[0];
      } catch (err) {
        console.error('摄像头启动失败:', err);
      }
    },

    // 调整焦距（参数范围依赖设备支持）
    async adjustFocus(value) {
      if (!this.videoTrack) {
        uni.showToast({ title: '请先启动摄像头', icon: 'none' });
        return;
      }

      try {
        await this.videoTrack.applyConstraints({
          advanced: [{ focusMode: 'manual', focusDistance: value }]
        });
      } catch (err) {
        console.error('调焦失败:', err);
        uni.showToast({ title: '设备不支持调焦', icon: 'none' });
      }
    }
  }
}
</script>

注意事项

兼容性：
- focusMode 和 focusDistance 并非所有浏览器/设备都支持（常见于移动端 Chrome）。
- 可通过 getCapabilities() 检查支持的功能：
```
const capabilities = this.videoTrack.getCapabilities();
console.log('焦距支持范围:', capabilities.focusDistance);
```
参数范围：
- focusDistance 通常为 0（最近）到 1（最远），具体范围需通过 getCapabilities() 获取。
权限：
- H5 需 HTTPS 环境才能调用摄像头。
备选方案：
- 若无法调焦，可引导用户手动调整设备与二维码的距离。

扩展建议

如需完整扫码功能，可结合第三方库（如 jsQR）解析视频流中的二维码：

import jsQR from 'jsqr';

// 在视频播放时循环检测二维码
decodeQR() {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const video = document.getElementById('video');
  
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  context.drawImage(video, 0, 0);
  
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  const code = jsQR(imageData.data, imageData.width, imageData.height);
  
  if (code) {
    console.log('扫描结果:', code.data);
    // 处理扫描结果
  }
  requestAnimationFrame(this.decodeQR);
}