首页
/ HTML5-QRCode 二维码和条形码扫描库使用教程

HTML5-QRCode 二维码和条形码扫描库使用教程

2026-02-06 04:11:55作者：董宙帆
html5-qrcode
A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
项目地址：https://gitcode.com/gh_mirrors/ht/html5-qrcode

HTML5-QRCode 是一个跨平台的 HTML5 二维码和条形码扫描库，支持在 Web 应用中快速集成二维码、条形码和其他常见代码的扫描功能。

项目概述

HTML5-QRCode 是一个轻量级的 JavaScript 库，具有以下主要特性：

  • 🔲 支持扫描多种类型的条形码和二维码
  • 🖥 支持 Android、iOS、macOS、Windows 和 Linux 等多个平台
  • 🌐 支持 Chrome、Firefox、Safari、Edge、Opera 等多种浏览器
  • 📷 支持使用摄像头扫描和本地文件扫描两种方式
  • ➡️ 提供完整的端到端扫描器 UI 和底层 API

安装和使用

通过 npm 安装

npm install html5-qrcode

通过 CDN 引入

<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>

基本使用示例

<!DOCTYPE html>
<html>
<head>
    <title>QR Code Scanner</title>
</head>
<body>
    <div id="reader" style="width: 600px"></div>
    <div id="result"></div>

    <script src="html5-qrcode.min.js"></script>
    <script>
        function onScanSuccess(decodedText, decodedResult) {
            console.log(`扫描结果: ${decodedText}`, decodedResult);
            document.getElementById('result').innerText = decodedText;
        }

        const html5QrcodeScanner = new Html5QrcodeScanner(
            "reader", 
            { fps: 10, qrbox: { width: 250, height: 250 } },
            false
        );
        html5QrcodeScanner.render(onScanSuccess);
    </script>
</body>
</html>

核心 API

Html5QrcodeScanner 类

Html5QrcodeScanner 提供完整的端到端扫描体验，包含用户界面：

const scanner = new Html5QrcodeScanner(
    "reader", // 容器元素的 ID
    {
        fps: 10, // 帧率
        qrbox: { width: 250, height: 250 }, // 扫描框尺寸
        rememberLastUsedCamera: true // 记住上次使用的摄像头
    },
    false // 是否显示详细日志
);

scanner.render(onScanSuccess, onScanFailure);

Html5Qrcode 类

Html5Qrcode 提供底层 API，允许自定义用户界面：

const html5QrCode = new Html5Qrcode("reader");

// 开始扫描
html5QrCode.start(
    cameraId, 
    config, 
    onScanSuccess, 
    onScanFailure
);

// 停止扫描
html5QrCode.stop();

配置选项

扫描配置

const config = {
    fps: 10, // 每秒扫描帧数
    qrbox: {
        width: 250,
        height: 250
    }, // 扫描区域
    aspectRatio: 1.777778, // 视频宽高比（16:9）
    disableFlip: false, // 是否禁用镜像扫描
    rememberLastUsedCamera: true // 记住上次使用的摄像头
};

支持的格式

HTML5-QRCode 支持以下代码格式：

  • QR Code（二维码）
  • AZTEC
  • CODE_39
  • CODE_93
  • CODE_128
  • DATA_MATRIX
  • ITF
  • EAN_13
  • EAN_8
  • PDF_417
  • UPC_A
  • UPC_E

高级用法

只扫描特定格式

const formatsToSupport = [
    Html5QrcodeSupportedFormats.QR_CODE,
    Html5QrcodeSupportedFormats.CODE_128
];

const html5QrCode = new Html5Qrcode(
    "reader", 
    { formatsToSupport: formatsToSupport }
);

文件扫描

// 选择文件输入
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', e => {
    const file = e.target.files[0];
    html5QrCode.scanFile(file, true)
        .then(result => console.log(result))
        .catch(err => console.error(err));
});

项目结构

html5-qrcode/
├── src/                    # 源代码目录
│   ├── camera/            # 摄像头相关功能
│   ├── ui/                # 用户界面组件
│   ├── core.ts            # 核心功能
│   └── html5-qrcode.ts    # 主入口文件
├── examples/              # 示例代码
│   ├── html5/            # 纯 HTML5 示例
│   ├── vuejs/            # Vue.js 示例
│   └── lit/              # Lit 示例
├── tests/                 # 测试文件
├── minified/              # 压缩后的文件
└── third_party/           # 第三方依赖

开发指南

构建项目

# 安装依赖
npm install

# 构建项目
npm run build

# 运行测试
npm test

项目配置

主要的配置文件包括：

  • package.json - npm 包配置和脚本
  • tsconfig.json - TypeScript 编译配置
  • webpack.config.js - Webpack 打包配置

常见问题

权限问题

确保在 HTTPS 环境下使用摄像头功能，大多数浏览器要求安全上下文才能访问摄像头。

移动端适配

在移动设备上，可能需要额外的样式调整来适应不同的屏幕尺寸。

性能优化

对于性能要求较高的场景，可以调整以下参数：

  • 降低帧率（fps）
  • 缩小扫描区域（qrbox）
  • 只启用需要的扫描格式

浏览器兼容性

HTML5-QRCode 支持以下浏览器：

  • Chrome 60+
  • Firefox 55+
  • Safari 11+
  • Edge 79+

总结

HTML5-QRCode 是一个功能强大且易于使用的二维码和条形码扫描库，适用于各种 Web 应用场景。通过简单的 API 调用，开发者可以快速集成扫描功能到自己的项目中。

该库提供了灵活的配置选项和良好的浏览器兼容性，是开发二维码扫描功能的理想选择。

html5-qrcode
A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
项目地址：https://gitcode.com/gh_mirrors/ht/html5-qrcode
登录后查看全文

相关内容推荐

1 Html5-QRCode：轻量级跨平台二维码与条形码扫描库2 HTML5 QRCode 开源项目教程3 终极指南：5分钟实现网页二维码扫描功能4 HTML5-QRCode 二维码扫描库完整使用指南5 终极指南：5分钟搞定浏览器端二维码扫描 - Html5-QRCode完全手册6 【亲测免费】 探索Html5-QRCode：一款轻量级跨平台二维码与条码扫描库7 HTML5 QR码扫描器安装与配置全攻略8 【亲测免费】 html5-qrcode 项目使用教程9 【亲测免费】 html5-qrcode 项目常见问题解决方案10 开源项目推荐：HTML5下的JavaScript QRCode阅读器
热门项目推荐
相关项目推荐

热门内容推荐

1 build-your-own-x 探索指南：从零构建编程技能体系2 技术实践新范式：build-your-own-x项目的系统构建与能力跃迁指南3 build-your-own-x 开源学习项目一站式指南4 【亲测免费】 开源项目 `build-your-own-x` 使用指南5 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解6 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用7 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

个人知识系统构建指南：从信息碎片到思维网络的模块化解决方案高效解锁网易云音乐灰色歌曲：开源工具全平台部署指南如何高效采集B站评论数据？这款Python工具让数据获取效率提升10倍提升动态视觉体验：Waifu2x-Extension-GUI智能增强与效率提升指南革新性缠论分析工具：系统化构建股票技术指标体系终结AutoCAD字体痛点：FontCenter让99%的字体问题迎刃而解Atmosphere-NX PKG1启动错误解决方案如何用ComfyUI-WanVideoWrapper实现多模态视频生成？解锁AI创作新可能3行代码解锁无水印视频提取：这款开源工具如何让自媒体效率提升300%5分钟上手！零代码打造专业拓扑图的免费工具

项目优选

收起
kernelkernel
deepin linux kernel
C
27
14
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
657
4.26 K
pytorchpytorch
Ascend Extension for PyTorch
Python
502
606
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
939
862
Oohos_react_native
React Native鸿蒙化仓库
JavaScript
334
378
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
390
284
AscendNPU-IRAscendNPU-IR
AscendNPU-IR是基于MLIR（Multi-Level Intermediate Representation）构建的，面向昇腾亲和算子编译时使用的中间表示，提供昇腾完备表达能力，通过编译优化提升昇腾AI处理器计算效率，支持通过生态框架使能昇腾AI处理器与深度调优
C++
123
195
openGauss-serveropenGauss-server
openGauss kernel ~ openGauss is an open source relational database management system
C++
180
258
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.54 K
891
MindSpeed-LLMMindSpeed-LLM
昇腾LLM分布式训练框架
Python
142
168