WebPack项目中qr-camera模块无法识别二维码求助

一、修复当前代码的逻辑问题 #

你当前的代码调用camera.scanQrcode()时，存在摄像头未完全就绪就触发扫描的问题，且单次扫描逻辑容易错过识别时机。修改为等待摄像头就绪+持续监听模式：

import {QRCamera} from 'qr-camera';

async function main(){
     const camera = new QRCamera({});
     document.body.appendChild(camera.video);
     // 等待摄像头流初始化完成
     await camera.start();
     // 开启持续扫描，直到识别到二维码
     const scanResult = await new Promise(resolve => {
         camera.onScan = (data) => {
             if (data) {
                 resolve(data);
                 camera.stopScanQrcode();
                 camera.stop();
             }
         };
         camera.startScanQrcode();
     });
     console.log(scanResult);
}
main();

二、排查Webpack打包的潜在问题 #

qr-camera依赖的tc-qrcode在Webpack环境下可能出现解析问题，需检查：

• 确保Webpack未通过tree-shaking移除tc-qrcode的核心解码代码
• 确认项目运行在安全上下文（localhost或HTTPS），浏览器摄像头API仅允许在安全环境下工作
• 检查babel-loader是否正确处理ES模块，避免tc-qrcode的代码被错误转译

三、替代二维码扫描方案 #

如果qr-camera始终无法正常工作，可切换到以下成熟库：

• ZXing-js：支持摄像头实时扫描，兼容性覆盖主流浏览器，功能稳定

  import { BrowserMultiFormatReader } from '@zxing/library';
  
  const reader = new BrowserMultiFormatReader();
  // 绑定video元素（需提前在DOM中创建<video id="video"></video>）
  reader.decodeFromVideoDevice(undefined, 'video', (result) => {
      if (result) {
          console.log(result.text);
          reader.reset();
      }
  });
  

• QRCodeReader.js：轻量库，可结合canvas从视频帧提取图像后解码

四、获取更多文档支持 #

除项目GitHub文档外，可通过以下途径获取信息：

• 查看qr-camera和tc-qrcode的npm包页面，部分补充说明会放在README的进阶部分
• 浏览两个项目的GitHub Issue区，搜索Webpack环境下的类似问题及解决方案
• 打开浏览器控制台，检查是否有未捕获的初始化错误或权限警告

内容的提问来源于stack exchange，提问作者Hannes Krüger