更新记录

1.0.0（2026-01-16） 下载此版本

本组件是基于 UniApp 开发的 H5 端二维码扫描方案。通过调用浏览器原生 getUserMedia API 获取摄像头视频流，并利用 jsQR 库进行实时图像解析。

平台兼容性

其他

H5 扫码组件功能说明 (jsQR 版)

本组件是基于 UniApp 开发的 H5 端二维码扫描方案。通过调用浏览器原生 getUserMedia API 获取摄像头视频流，并利用 jsQR 库进行实时图像解析。

1. 基础信息

• 技术栈: Vue 2.x (UniApp H5 模式)
• 核心库: jsQR (纯 JS 编写，不依赖原生扫码插件)
• 适用场景: 微信浏览器、手机 Chrome/Safari、钉钉 H5 等支持 WebRTC 的现代移动端浏览器。

2. 兼容性与环境要求

环境要求

• 协议限制: 必须在 HTTPS 协议下运行（本地测试可使用 localhost 或 127.0.0.1）。这是浏览器出于隐私安全对摄像头调用的硬性要求。
• UniApp 版本: 兼容 Vue 2 或 Vue 3 版本（当前代码示例为 Vue 2 语法）。

兼容性表现

3. 功能特性

• 实时预览: 将摄像头视频流通过 Canvas 渲染，并实现 Object-fit: cover 的满屏填充效果。
• 低耦合: 无需依赖 UniApp 原生插件，方便集成到纯网页项目中。
• 动画遮罩: 带有扫描线动画和四角定位框，提供原生扫码的用户体验。
• 自动释放: 页面销毁前自动停止摄像头采集，避免手机发烫和耗电。

4. 参数修改与配置指南

您可以根据业务需求修改以下核心参数：

A. 修改摄像头偏好

在 initScanner 方法中修改 facingMode：

video: {
    // "environment" 表示后置摄像头 (默认)
    // "user" 表示前置摄像头
    facingMode: "environment", 
    width: { ideal: 750 },
    height: { ideal: 1280 }
}

B. 调整扫描频率

目前代码通过 requestAnimationFrame 满帧运行（约 60fps）。如果发现低端机发热严重，可以在 renderLoop 中增加计数器降频：

// 示例：每 3 帧执行一次解码
this.frameCount++;
if (this.frameCount % 3 === 0) {
    this.decode(vw, vh);
}

C. 扫码成功回调

在 handleSuccess(result) 方法中处理业务逻辑：

handleSuccess(result) {
    // result 即为扫码得出的字符串内容
    console.log("扫码结果：", result);
    // 可在此处跳转页面或发送请求
}

D. 调整扫描框大小

在 <style> 中修改 .scan-box 的尺寸：

.scan-box {
    width: 480rpx;  /* 增加此值可扩大扫描范围 */
    height: 480rpx;
}

5. 快速部署注意事项

1. 安装依赖: 在项目根目录运行 npm install jsqr。
2. 样式穿透: 由于 H5 端的渲染机制，代码中使用了 document.querySelector。如果是在高度定制的组件中，请确保 Canvas 和 Video 节点的获取逻辑正确。
3. H5 跨域: 如果将此页面嵌入 Iframe，需确保 Iframe 拥有 allow="camera" 属性。