QR and barcode scanner using HTML and Javascript | Minhaz’s BlogThe little QR code scanning library I have been maintaining since 2015 has been getting more attention recently. And with power came responsibilities, bugs, and feature requests. Some of the key features requested by developers were more reliable scanning and the ability to scan different types of bar codes. With version 2.0.0 onwards developers can scan different types of 1D codes (bar codes) and 2D codes (like QR codes or AZTEC). This article lists out everything new in version 2.x.x. I’ll also list out the new APIs and capabilities that developers can use to integrate a more powerful code scanning capability to their web pages or apps.https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/

我从2015年开始维护的小二维码扫描库最近越来越受到关注。权力带来了责任、错误和功能请求。开发人员要求的一些关键功能是更可靠的扫描和扫描不同类型条码的能力。与起开发者可以扫描不同类型的一维码（条形码）和二维码（例如QR码或AZTEC）。

本文列出了.?我还将列出开发人员可以用来将更强大的代码扫描功能集成到他们的网页或应用程序的新 API 和功能。

这是我正在使用的库：mebjas/html5-qrcode，在qrcode.minhazav.dev 上结帐演示

?

最新的：?

1. 能够扫描不同种类的一维码和二维码。
   • 在此处查看所有支持的格式。
   • 成功回调中返回的扫描格式类型和名称。
2. 更可靠的代码扫描，修复issue#134、issue#63、issue#140 等问题。
   • (1) 和 (2) 都是通过将解码库从Zxing-js迁移来实现的。
3. [次要] 库现在报告更精细的错误，以减少开发人员的调试时间。
   • 例如，如果在url 中使用了库，则会报告确切的问题。

代码健康修复

1. 整个代码迁移到 Typescript以实现可扩展且不易出错的开发。

2. 基于Codacy报告的几个代码健康问题的修复，现在我们已经在Codacy A级-?正在上传…重新上传取消?，跟踪问题，这个重构

查看自版本 2.0.0 以来的变更日志以获得更清晰的信息。

该库公开了两个主要类：

• - 使用它来设置带有 UI 的端到端扫描仪，构建在.
  • 负责构建完整的用户界面
  • 支持在设备上使用网络摄像头或摄像头进行扫描，并提供实时摄像头馈送。
  • 支持扫描设备本地图片。
• ?- 较低级别的库，公开 API 以构建您的代码扫描器。

按照以下步骤将 QR 码或条码扫描功能集成到您的 Web 应用程序中：

安装库

您可以使用unpkg 之类的CDNS安装库或直接加载它

安装使用npm

从 unpkg 或其他 CDN 加载最新的库

添加占位符 HTML 元素

将占位符 HTML 元素添加到您的网页。扫描 UI 将在此元素中呈现。给它适当的样式，如或。

在javascript中初始化

现在您可以使用这些代码设置扫描仪。

演示

笔记：

• 您可以通过传递不同的配置对象来自定义扫描仪 -阅读更多。
• 成功回调具有以下接口（/src/core.ts）

如果要构建用户界面，可以使用Html5Qrcode类公开的公共 API?：

这些是库现在支持的不同代码格式，示例如下：