核心特性
Html5-QRCode 是一个基于 HTML5 技术的跨平台二维码扫描库,利用设备的摄像头或本地文件实现二维码解析。作为纯前端解决方案,它无需后端支持即可完成扫码功能,极大简化了开发流程。项目通过模块化设计确保了良好的可扩展性和兼容性,适合构建扫码登录、商品信息查询或移动支付界面等场景。
快速上手
引入库文件
最简单的方式是直接引入 minified 版本的库文件:
<script src="minified/html5-qrcode.min.js"></script>
或者通过包管理器安装后引入项目。
创建扫描容器
在 HTML 中添加一个具有唯一 ID 的扫描区域:
<div id="qr-code-scanner"></div>
初始化扫描器
通过几行 JavaScript 代码即可启动扫描功能。这里需要注意设置 facingMode 为 environment 以调用后置摄像头:
const scanner = new Html5Qrcode('qr-code-scanner');
scanner.start(
{ facingMode: 'environment' },
{ fps: 10, qrbox: { width: 250, height: 250 } },
(decodedText, decodedResult) => {
console.log(`扫描结果:${decodedText}`);
}
);
多框架集成
Vue.js 集成示例
项目提供了 Vue.js 组件示例。核心代码如下,通过组件化方式轻松将扫码功能集成到 Vue 项目中:
<qrcode-scanner :width="400" :height="300" @onDetected="handleDetection"></qrcode-scanner>

