HTML5 QRCode 开源项目教程

叶准鑫Natalie

于 2024-08-08 07:16:51 发布

阅读量636

点赞数 19

本文链接：https://blog.csdn.net/gitblog_00531/article/details/141007904

版权

HTML5 QRCode 开源项目教程

html5-qrcodeA 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 是一个基于 Web 的开源 QR 码和条形码扫描库，由 mebjas 开发并基于 Apache License 2.0 许可发布。这个库轻量级且跨平台，适用于在 Web 应用程序中快速集成 QR 码、条形码和其他常见代码的扫描功能。它支持两种类型的 API：

Html5QrcodeScanner：一个端到端的扫描器，带有 UI，可以通过不到十行代码集成。
Html5Qrcode：一组强大的 API，可以用于构建自定义 UI，无需担心相机设置。

项目快速启动

安装依赖

首先，通过 npm 安装 html5-qrcode 库：

npm i html5-qrcode

引入并使用

在项目中引入 Html5Qrcode 并设置扫描功能：

import { Html5Qrcode } from "html5-qrcode";

// 创建一个 div 元素用于显示扫描器
const qrcodeDiv = document.createElement('div');
qrcodeDiv.id = "reader";
document.body.appendChild(qrcodeDiv);

// 初始化扫描器
const html5QrCode = new Html5Qrcode("reader");

// 获取相机设备
Html5Qrcode.getCameras().then(devices => {
    if (devices && devices.length) {
        // 启动扫描器
        html5QrCode.start({ facingMode: "environment" }, { fps: 10, qrbox: 250 }, (decodedText, decodedResult) => {
            console.log(`Code matched = ${decodedText}`);
        }).catch(err => {
            console.error(`Error starting camera = ${err}`);
        });
    }
}).catch(err => {
    console.error(`Error accessing camera devices = ${err}`);
});