html5 qrcode下载 - html5 qrcode源码下载

html5 qrcode

其他源码

Version 2.3.8

下载

Html5二维码

重要 - 为该项目寻找新业主。

如果有兴趣，请联系[email protected] 。

Html5二维码

重要该项目处于维护模式，直至另行通知。作者暂时无法进行任何错误修复或改进。拉取请求也暂时不会被合并。如果您有可以维护的分叉 - 请将详细信息分享至 [email protected]。我很高兴在这里为他们做广告！可以按原样使用该项目。示例：scanapp.org。

适用于网络的轻量级跨平台 QR 码和条形码扫描库

使用这个轻量级库可以轻松/快速地将 QR 码、条形码和其他常见代码扫描功能集成到您的 Web 应用程序中。

主要亮点

？支持扫描不同类型的条形码和二维码。
？支持不同平台：Android、IOS、MacO、Windows 或 Linux
支持不同的浏览器，如 Chrome、Firefox、Safari、Edge、Opera ...
？支持相机扫描以及本地文件扫描
➡️ 附带一个带有 UI 的端到端库以及一个用于构建您自己的 UI 的低级库。
？支持自定义，如闪光灯/手电筒支持、缩放等。

支持两种API

Html5QrcodeScanner — 带 UI 的端到端扫描器，集成不到十行代码。
Html5Qrcode — 一组强大的 API，您可以使用它来构建 UI，而无需担心相机设置、处理权限、读取代码等。

支持扫描设备上的本地文件是一项新增功能，对于不支持智能手机中内联网络摄像头访问的网络浏览器很有帮助。注意：这不会将文件上传到任何服务器 - 一切都在本地完成。


scanapp.org 上的演示	qrcode.minhazav.dev 上的演示 -扫描不同类型的代码

我们需要您的帮助！

通过支持该项目的赞助目标来帮助激励功能开发和错误修复。请参阅此处赞助的功能请求列表。

文档

该项目的文档已移至 scanapp.org/html5-qrcode-docs。

入门
支持的框架
支持的一维和二维代码格式
详细的API文档

支持的平台

我们正在不断努力增加对越来越多平台的支持。如果您发现库无法工作的平台或浏览器，请随时提出问题。检查演示链接进行测试。

传奇

意味着全面支持 - 内联网络摄像头和基于文件
意味着部分支持 - 仅基于文件，网络摄像头正在进行中

电脑/苹果电脑

火狐浏览器	铬合金	狩猎之旅	歌剧	边缘

安卓

铬合金	火狐浏览器	边缘	歌剧	迷你歌剧院	UC

IOS

狩猎之旅	铬合金	火狐浏览器	边缘
	*	*

* 支持 IOS 版本 >= 15.1
在15.1版本之前，iOS中的Chrome、Firefox和其他浏览器使用Webkit for IOS，并且它们还没有网络摄像头权限。修复 iOS 支持方面存在一个持续存在的问题 - issues/14

框架支持

该库可以轻松地与其他几个框架一起使用，我已经为其中一些框架添加了示例，并将继续添加更多示例。


html5	VueJs	电子学	反应	点燃

支持的代码格式

扫码依赖Zxing-js库。我们将在此基础上努力添加对更多类型的代码扫描的支持。如果您认为某种类型的代码会有所帮助，请提交功能请求。

代码	例子
二维码
阿兹特克
代码_39
代码_93
代码_128
国际乒联
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
数据矩阵
最大代码*
RSS_14*
RSS_扩展*

*我们与本机 BarcodeDetector API 集成的实验性集成不支持格式（了解更多）。

描述 - 查看演示

在 scanapp.org 上查看端到端扫描仪体验。

这是一个跨平台 JavaScript 库，用于将 QR 码、条形码和一些其他类型的代码扫描功能集成到在 HTML5 兼容浏览器上运行的应用程序。

支持：

查询设备上的摄像头（需用户权限）
渲染实时摄像头画面，并具有易于使用的扫描用户界面
支持扫描各种二维码、条形码等格式
支持从设备中选择图片文件进行扫码

如何使用

在 scanapp.org/html5-qrcode-docs 上查找有关如何使用此库的详细指南。

演示

扫描此图片或访问 blog.minhazav.dev/research/html5-qrcode.html

欲了解更多信息

查看这些有关如何使用该库的文章：

使用 HTML 和 JavaScript 的 QR 和条形码扫描仪
HTML5 二维码扫描 — 推出 v1.0.1，无需 jQuery 依赖，并重构了基于 Promise 的 API。
使用 JavaScript 扫描 HTML5 二维码 - 添加扫描本地文件和使用默认摄像头的支持 (v1.0.5)

截图

图：MacBook Pro 上运行的 Google Chrome 的屏幕截图

文档

完整的 API 文档请访问 scanapp.org/html5-qrcode-docs/docs/apis。

`start()`方法中的额外可选`configuration`

可用于配置扫描行为和用户界面 (UI) 的配置对象。大多数字段都有默认属性，除非提供不同的值，否则将使用这些默认属性。如果你不想覆盖任何东西，你可以传入一个空对象{} 。

`fps` — 整数，示例 = 10

AKA 每秒帧数，默认值为 2，但可以增加该值以获得更快的扫描速度。增加过高的值可能会影响性能。值>1000将会失败。

`qrbox` — `QrDimensions`或`QrDimensionFunction` （可选），示例 = `{ width: 250, height: 250 }`

使用此属性可以限制要用于扫描的取景器区域。取景器的其余部分将被遮蔽。例如，通过传递 config { qrbox : { width: 250, height: 250 } } ，屏幕将如下所示：

这可用于设置矩形扫描区域，配置如下：

 let config = { qrbox : { width : 400 , height : 150 } }

此配置还接受类型的函数

 /**
  * A function that takes in the width and height of the video stream 
* and returns QrDimensions.
* 
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
    ( viewfinderWidth : number , viewfinderHeight : number ) => QrDimensions ;

这允许您根据视频尺寸设置动态 QR 框尺寸。例如，请参阅此博客文章：在 Html5-qrcode 中设置动态 QR 框大小 - ScanApp 博客

这对于条形码扫描来说可能是理想的。

如果未设置此值，则不会渲染阴影 QR 框，并且扫描仪将扫描视频流的整个区域。

`aspectRatio` — 浮点型，示例 1.777778 为 16:9 宽高比

使用此属性以特定的宽高比呈现视频源。传递像100000:1这样的非标准宽高比可能会导致视频源甚至不显示。理想值可以是：

价值	纵横比	使用案例
1.333334	4:3	标准相机长宽比
1.777778	16:9	全屏、影院级
1.0	1:1	广场景观

如果不传递任何值，则整个取景器将用于扫描。注意：该值必须小于QR code HTML element的宽度和高度。

`disableFlip` — 布尔值（可选），默认 = false

默认情况下，扫描仪可以扫描水平翻转的二维码。这还允许使用有时会镜像的移动设备上的前置摄像头扫描二维码。默认情况下这是false ，我建议仅在以下情况下更改此设置：

您确定相机馈送无法镜像（水平翻转）
启用此功能后，您将面临性能问题。

这是普通二维码和镜像二维码的示例

普通二维码	镜像二维码

`rememberLastUsedCamera` — 布尔值（可选），默认 = true

如果为true则用户最后使用的相机以及天气或未授予许可将被记住在本地存储中。如果用户之前已授予权限 - 用户界面中的请求权限选项将被跳过，最后选择的相机将自动启动进行扫描。

如果为true则库应记住先前是否授予了相机权限以及上次使用的相机是什么。如果已授予“相机”权限，则将自动*开始扫描以前使用过的相机的二维码。

`supportedScanTypes` - `Array<Html5QrcodeScanType> | []`

仅Html5QrcodeScanner支持此功能。

默认 = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]

该字段可用于：

限制对基于Camera或File扫描的支持。
更改默认扫描类型。

使用方法：

 function onScanSuccess ( decodedText , decodedResult ) {
  // handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

let config = {
  fps : 10 ,
  qrbox : { width : 100 , height : 100 } ,
  rememberLastUsedCamera : true ,
  // Only support camera scan type.
  supportedScanTypes : [ Html5QrcodeScanType . SCAN_TYPE_CAMERA ]
} ;

let html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" , config , /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

对于基于文件的扫描，仅选择：

supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]

为了像现在一样支持两者，您可以忽略此字段或设置为：

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
  Html5QrcodeScanType . SCAN_TYPE_FILE ]

要将基于文件的扫描设置为默认，请更改顺序：

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_FILE ,
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ]

`showTorchButtonIfSupported` - `boolean | undefined`

仅Html5QrcodeScanner支持此功能。

如果true渲染的 UI 将有按钮根据设备 + 浏览器支持打开或关闭闪光灯。默认值为false 。

仅扫描特定格式

默认情况下，会根据所有支持的代码格式扫描相机流和图像文件。 Html5QrcodeScanner和Html5Qrcode类都可以配置为仅支持受支持格式的子集。支持的格式在枚举 Html5QrcodeSupportedFormats 中定义。

 enum Html5QrcodeSupportedFormats {
  QR_CODE = 0 ,
  AZTEC ,
  CODABAR ,
  CODE_39 ,
  CODE_93 ,
  CODE_128 ,
  DATA_MATRIX ,
  MAXICODE ,
  ITF ,
  EAN_13 ,
  EAN_8 ,
  PDF_417 ,
  RSS_14 ,
  RSS_EXPANDED ,
  UPC_A ,
  UPC_E ,
  UPC_EAN_EXTENSION ,
}

我建议仅当您需要显式忽略对某些格式的支持或出于性能原因想要减少每秒完成的扫描次数时才使用此选项。

仅使用`Html5Qrcode`扫描 QR 码

 const html5QrCode = new Html5Qrcode (
  "reader" , { formatsToSupport : [ Html5QrcodeSupportedFormats . QR_CODE ] } ) ;
const qrCodeSuccessCallback = ( decodedText , decodedResult ) => {
    /* handle success */
} ;
const config = { fps : 10 , qrbox : { width : 250 , height : 250 } } ;

// If you want to prefer front camera
html5QrCode . start ( { facingMode : "user" } , config , qrCodeSuccessCallback ) ;

使用`Html5QrcodeScanner`仅扫描 QR 码和 UPC 码

 function onScanSuccess ( decodedText , decodedResult ) {
  // Handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

const formatsToSupport = [
  Html5QrcodeSupportedFormats . QR_CODE ,
  Html5QrcodeSupportedFormats . UPC_A ,
  Html5QrcodeSupportedFormats . UPC_E ,
  Html5QrcodeSupportedFormats . UPC_EAN_EXTENSION ,
] ;
const html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" ,
  {
    fps : 10 ,
    qrbox : { width : 250 , height : 250 } ,
    formatsToSupport : formatsToSupport
  } ,
  /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

实验特点

该库现在支持一些实验性功能，这些功能在库中受支持，但由于测试有限或所使用的底层 API 的兼容性有限，不建议用于生产使用。在这里阅读更多相关信息。一些实验性功能包括：

支持 BarcodeDetector JavaScript API

如何修改和构建

代码更改只能对 /src 进行。
运行npm install以安装所有依赖项。
运行npm run-script build来构建 JavaScript 输出。输出 JavaScript 发行版构建为 /dist/html5-qrcode.min.js。如果您在 Windows 操作系统上进行开发，请运行npm run-script build-windows 。
测试
- 运行npm test
- 在发送拉取请求之前运行测试，所有测试都应该运行。
- 请添加对 PR 中发送的新行为的测试。
发送拉取请求
- 仅包含对./src代码更改。不要手动更改./dist 。
- 在拉取请求中添加评论，例如
```
 @all-contributors please add @mebjas for this new feature or tests
```
- 为了征集您的贡献，机器人将更新贡献文件。
- 代码将由作者批量构建和发布。

如何贡献

您可以通过多种方式为该项目做出贡献：

针对任何观察到的项目错误或兼容性问题提交问题单。
针对缺失的功能提出功能请求。
获取未解决的错误或功能请求并对其进行处理并发送拉取请求。
为现有代码库编写单元测试（今天的测试未涵盖）。需要这方面的帮助- 了解更多。

支持？

如果没有我们所有出色的贡献者和赞助商，这个项目就不可能实现。如果您想支持该项目的维护和保养，可以通过 GitHub 赞助商进行捐赠。

赞助该项目，以优先考虑与您相关的功能请求/错误。（取决于询问范围和贡献者的带宽）。

网络作者@ 布吉瓦杜

通过支持该项目的赞助目标来帮助激励功能开发和错误修复。请参阅此处赞助的功能请求列表。

另外，非常感谢以下组织的非金钱赞助

制作人员

用于读取二维码的解码器来自Zxing-js https://github.com/zxing-js/library

展开

附加信息

版本 Version 2.3.8
类型其他源码
更新时间 2024-12-19
大小 50MB
来自于 Github

html5 qrcode

Html5二维码

重要 - 为该项目寻找新业主。

Html5二维码

适用于网络的轻量级跨平台 QR 码和条形码扫描库

主要亮点

我们需要您的帮助！

文档

支持的平台

电脑/苹果电脑

安卓

IOS

框架支持

支持的代码格式

描述 - 查看演示

如何使用

演示

欲了解更多信息

截图

文档

start()方法中的额外可选configuration

fps — 整数，示例 = 10

qrbox — QrDimensions或QrDimensionFunction （可选），示例 = { width: 250, height: 250 }

aspectRatio — 浮点型，示例 1.777778 为 16:9 宽高比

disableFlip — 布尔值（可选），默认 = false

rememberLastUsedCamera — 布尔值（可选），默认 = true

supportedScanTypes - Array<Html5QrcodeScanType> | []

showTorchButtonIfSupported - boolean | undefined

仅扫描特定格式

仅使用Html5Qrcode扫描 QR 码

使用Html5QrcodeScanner仅扫描 QR 码和 UPC 码

实验特点

如何修改和构建

如何贡献

支持 ？

制作人员

`start()`方法中的额外可选`configuration`

`fps` — 整数，示例 = 10

`qrbox` — `QrDimensions`或`QrDimensionFunction` （可选），示例 = `{ width: 250, height: 250 }`

`aspectRatio` — 浮点型，示例 1.777778 为 16:9 宽高比

`disableFlip` — 布尔值（可选），默认 = false

`rememberLastUsedCamera` — 布尔值（可选），默认 = true

`supportedScanTypes` - `Array<Html5QrcodeScanType> | []`

`showTorchButtonIfSupported` - `boolean | undefined`

仅使用`Html5Qrcode`扫描 QR 码

使用`Html5QrcodeScanner`仅扫描 QR 码和 UPC 码

支持？