Ionic 6 + Capacitor如何在页面指定div内嵌入QR码扫描相机预览

以下是两种可直接落地的实现方式，均不需要弹出独立的原生扫码窗口： #

方案1：混合实现（兼容性优先） #

使用@capacitor-community/barcode-scanner社区插件配合原生Web API实现：

• 该插件支持关闭原生预览窗口，后台静默识别相机画面的QR码值，你只需要在指定DIV内自行渲染相机预览即可
• 核心实现步骤：
  1. 调用BarcodeScanner.requestPermissions()申请相机权限
  2. 在目标DIV内部插入<video>标签，设置样式宽高100%适配父容器，调用navigator.mediaDevices.getUserMedia({video: { facingMode: 'environment' }})获取后置摄像头流，绑定到video的srcObject属性后自动播放
  3. 启动扫码时调用BarcodeScanner.startScan({targetedFormats: ['QR_CODE'], showCamera: false})，插件会在后台识别相机内容，识别成功后返回结果，你可以同步停止video流、释放摄像头资源

方案2：纯前端实现（接入成本最低） #

如果你的项目是Angular技术栈可以直接用@zxing/ngx-scanner，其他技术栈可以用基础库@zxing/library：

• 这套方案完全基于Web API实现，本身就支持将扫描预览直接渲染到页面任意指定的DOM容器内，不需要依赖额外的原生扫码插件，适配Capacitor打包后的移动端环境
• 必要配置：
  • 安卓端需要在AndroidManifest.xml中添加CAMERA权限声明
  • iOS端需要在Info.plist中添加NSCameraUsageDescription权限使用描述
  • 首次启动扫码前需要先触发用户相机授权，再初始化扫描组件

常见优化点 #

• 低版本设备（安卓10以下、iOS13以下）优先选方案1，纯Web实现的兼容性在老旧系统上表现更差
• 扫码识别速度慢时，可以手动限制video标签的输出分辨率为720P，降低性能开销的同时可以提升识别准确率

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