如何在iPhone上配置react-qr-reader以显示扫码窗口？

核心原因 #

• iOS HTTPS强制要求：iOS 14及以上版本，相机API仅允许在HTTPS环境下正常工作（本地localhost除外，但部分iOS版本对localhost兼容性有波动）。如果页面是HTTP协议，系统会静默拒绝相机流请求，仅在状态栏显示相机红点，不会渲染扫码窗口。
• react-qr-reader的constraints参数兼容性：部分版本的react-qr-reader未正确将constraints传递给底层getUserMedia API，尤其是facingMode: 'environment'参数在iOS上的处理存在bug，导致无法启动后置摄像头。
• Next.js服务端渲染冲突：如果QrReader组件在服务端渲染（SSR/SSG），相机依赖的<video>元素无法在服务端初始化，客户端挂载后无法正常启动视频流。

可行解决方案 #

1. 确保运行环境为HTTPS

   • 生产环境必须部署在HTTPS域名下；
   • 本地开发可使用Next.js的next dev --experimental-https命令开启HTTPS，或用代理工具将本地服务映射为HTTPS地址。

2. 调整组件初始化方式
   在Next.js中禁用组件的服务端渲染，避免DOM初始化问题：

   import dynamic from 'next/dynamic';
   const QrReader = dynamic(() => import('react-qr-reader'), { ssr: false });
   
   function ScannerComponent() {
     const scanResult = (result) => {
       // 处理扫码结果
     };
   
     return (
       <QrReader
         onResult={scanResult}
         constraints={{ facingMode: 'environment' }}
       />
     );
   }
   

3. 修复constraints参数传递
   尝试添加legacyMode或嵌套video配置，适配iOS的API要求：

   <QrReader
     onResult={scanResult}
     legacyMode={true}
     constraints={{
       video: { facingMode: { exact: 'environment' } }
     }}
   />
   

4. 检查并更新依赖版本
   旧版本的react-qr-reader存在iOS兼容性问题，执行npm update react-qr-reader升级到最新稳定版，新版本通常修复了这类平台适配bug。

5. 引导用户确认相机权限
   提示用户前往iOS系统设置的「隐私与安全性-相机」，确认当前应用已获得相机访问权限，避免权限被误关导致的相机无法启动。

内容的提问来源于stack exchange，提问作者János