React Native for Web下expo-camera在iOS Safari无法扫描QRCode问题求助

你的原有方案问题说明 #

你手动修改node_modules内expo-camera的依赖声明的方式本身存在不稳定性，重装依赖、换设备部署都会重置修改，且expo-camera@11.2.2的Web端条码识别模块除了@koale/useworker版本问题外，本身还存在iOS Safari的兼容性缺陷，单独修改该依赖版本无法解决全部问题。

可用解决方案 #

方案1：替换内置识别逻辑，接入jsQR库实现识别（最稳定，适配当前依赖版本）

• 安装依赖：npm install jsqr @types/jsqr（TS项目可加类型声明，JS项目忽略后者）
• 放弃使用expo-camera自带的onBarCodeScanned回调，自行通过canvas截帧识别：

import { Camera } from 'expo-camera';
import jsQR from 'jsqr';
import { useRef, useEffect } from 'react';

const QrScanner = () => {
  const cameraRef = useRef(null);
  const canvasRef = useRef(document.createElement('canvas'));

  const scanFrame = async () => {
    if (!cameraRef.current) return;
    // 从相机组件获取当前帧
    const photo = await cameraRef.current.takePictureAsync({ base64: false, quality: 0.1 });
    const img = new Image();
    img.onload = () => {
      const canvas = canvasRef.current;
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      const code = jsQR(imageData.data, imageData.width, imageData.height);
      if (code) {
        // 识别到二维码的处理逻辑
        console.log('识别结果：', code.data);
        return;
      }
      // 未识别到则继续下一帧
      requestAnimationFrame(scanFrame);
    };
    img.src = photo.uri;
  };

  return <Camera ref={cameraRef} onCameraReady={scanFrame} style={{ flex: 1 }} />
}

• 该方案不受expo-camera内置识别逻辑的兼容性问题影响，适配所有支持getUserMedia接口的浏览器。

方案2：升级Expo版本

将Expo SDK升级到44及以上版本，对应expo-camera@12.1.0+已经官方修复了iOS Safari下的二维码识别问题，升级时注意同步匹配react、react-native-web等相关依赖的版本，避免出现版本不兼容报错。

补充注意事项

• 必须通过HTTPS协议访问你的GitHub Pages站点，iOS Safari在HTTP环境下会静默拦截条码识别相关接口，会出现相机启动但无识别结果的问题。
• 如需固定@koale/useworker版本，不要手动修改node_modules内的文件，可在package.json中添加overrides配置（npm 8.3及以上版本支持），永久生效：

{
  "overrides": {
    "expo-camera": {
      "@koale/useworker": "4.0.1"
    }
  }
}

修改后执行npm install即可完成依赖固定。

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