Html5-QRCode：跨平台HTML5二维码与条形码扫描库
【免费下载链接】html5-qrcode A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org 项目地址: https://gitcode.***/gh_mirrors/ht/html5-qrcode
Html5-QRCode是一个基于HTML5的轻量级开源库，为Web开发者提供了简单快捷的二维码和条形码扫描功能。该项目支持多种平台和浏览器，能够帮助开发者轻松实现高效的代码扫描功能。
项目特点
Html5-QRCode具有以下显著特点：
- 跨平台支持：支持Android、iOS、MacOS、Windows和Linux等多个操作系统
- 多浏览器兼容：兼容Chrome、Firefox、Safari、Edge、Opera等主流浏览器
- 双模式API：提供带有完整UI的端到端扫描器和低级API两种使用方式
- 本地文件扫描：支持扫描设备本地文件，适合不支持内联摄像头访问的浏览器
- 隐私保护：所有扫描过程都在本地完成，不涉及数据上传，确保用户隐私安全
支持格式
该库支持多种二维码和条形码格式，包括：
- QR Code（二维码）
- AZTEC码
- CODE 39
- CODE 93
- CODE 128
- ITF码
- EAN-13
- EAN-8
- PDF417
- UPC-A
- UPC-E
- Data Matrix
快速开始
安装使用
通过npm安装：
npm install html5-qrcode
或者直接在HTML中引入：
<script src="https://unpkg.***/html5-qrcode/minified/html5-qrcode.min.js"></script>
基本用法
使用带UI的扫描器（简单模式）：
function onScanSu***ess(decodedText, decodedResult) {
console.log(`扫描结果: ${decodedText}`, decodedResult);
}
const html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{ fps: 10, qrbox: { width: 250, height: 250 } },
false
);
html5QrcodeScanner.render(onScanSu***ess);
使用低级API（专业模式）：
const html5QrCode = new Html5Qrcode("reader");
const qrCodeSu***essCallback = (decodedText, decodedResult) => {
console.log(`扫描结果: ${decodedText}`);
};
html5QrCode.start(
{ facingMode: "environment" },
{ fps: 10, qrbox: 250 },
qrCodeSu***essCallback
);
配置选项
Html5-QRCode提供了丰富的配置选项：
- fps：帧率控制，默认2fps，可根据性能需求调整
- qrbox：扫描区域大小，可自定义矩形区域
- aspectRatio：视频流宽高比，支持4:3、16:9等
- disableFlip：禁用水平翻转检测
- rememberLastUsedCamera：记住上次使用的摄像头
- supportedScanTypes：支持的扫描类型（摄像头或文件）
应用场景
Html5-QRCode适用于多种应用场景：
- 电子商务：商品条码扫描，库存管理和价格查询
- 票务系统：电子票券二维码验证
- 物流跟踪：包裹条码扫描，实时更新物流状态
- 个人应用：名片二维码扫描，快速添加联系人
项目结构
项目采用TypeScript开发，主要源代码位于src目录：
- camera/：摄像头相关功能实现
- ui/：用户界面组件
- core.ts：核心功能实现
- html5-qrcode.ts：主要API实现
- html5-qrcode-scanner.ts：带UI的扫描器实现
构建与贡献
项目使用Webpack进行构建，支持多种模块格式：
- ***monJS (cjs)
- ES Modules (esm)
- UMD (浏览器直接使用)
开发者可以通过以下命令进行构建：
npm install
npm run build
欢迎开发者通过提交issue和pull request来贡献代码，共同完善这个开源项目。
技术优势
Html5-QRCode基于成熟的Zxing-js库构建，具有以下技术优势：
- 无需额外插件，纯HTML5实现
- 响应式设计，适配各种屏幕尺寸
- 高性能解码算法，快速识别各种码型
- 完善的错误处理和权限管理
- 详细的API文档和示例代码
无论您是开发商业应用还是个人项目，Html5-QRCode都能为您提供稳定可靠的二维码和条形码扫描解决方案。
【免费下载链接】html5-qrcode A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org 项目地址: https://gitcode.***/gh_mirrors/ht/html5-qrcode
