README

基于Cosmo Wolfe的javascript端口Cosmo Wolfe的javascript端口和Google的ZXing库 Google的ZXing库开发的JavaScript QR码扫描器。

在此库中，对原始端口进行了多项改进

支持直接进行网络摄像头扫描
如果可用，则使用浏览器的原生BarcodeDetector BarcodeDetector
轻量级：~59.3 kB (~16.3 kB gzipped) 使用Google的closure compiler压缩。如果可用原生 BarcodeDetector，则只加载 ~15.3 kB (~5.6 kB gzipped)
提高了性能并减少了内存占用。
在WebWorker中运行，以保持主/UI线程响应。
可配置以在彩色QR码上获得更好的性能。

根据我们的基准测试，此项目扫描引擎的检测率比最流行的javascript QR扫描库LazarSoft/jsqrcode高约2-3倍（高达8倍）。其他库经常误读QR码的内容，而在此项目中基准测试中未发生误读。

该库支持从网络摄像头扫描连续视频流以及扫描单个图像。

此库的开发由nimiq赞助，它是世界上第一个基于浏览器的区块链。

演示

请参阅https://nimiq.github.io/qr-scanner/demo/

安装

通过npm安装

npm install --save qr-scanner

通过yarn安装

yarn add qr-scanner

或者简单地复制 qr-scanner.min.js 和 qr-scanner-worker.min.js 到您的项目中。

设置

QR扫描器由两个主要文件组成。qr-scanner.min.js 是主要的API文件，它通过动态导入加载工作脚本 qr-scanner-worker.min.js，仅在需要时才加载。如果您不使用像Rollup或Webpack这样的处理动态导入的打包器，您可能需要将 qr-scanner-worker.min.js 复制到您的dist中，紧挨着 qr-scanner.min.js 或紧挨着您正在打包 qr-scanner.min.js 的脚本。

qr-scanner.min.js 是一个es6模块，可以按照以下方式导入

import QrScanner from 'path/to/qr-scanner.min.js'; // if using plain es6 import
import QrScanner from 'qr-scanner'; // if installed via package and bundling with a module bundler like webpack or rollup

这要求导入脚本也是一个es6模块或模块脚本标签，例如

<script type="module">
    import QrScanner from 'path/to/qr-scanner.min.js';
    // do something with QrScanner
</script>

如果您的项目不是基于es6模块，您可以

使用动态导入来导入es6模块

import('path/to/qr-scanner.min.js').then((module) => {
    const QrScanner = module.default;
    // do something with QrScanner
});

使用 UMD构建 qr-scanner.umd.min.js 以作为非模块脚本直接使用

<script src="path/to/qr-scanner.umd.min.js"></script>
<script>
    // do something with QrScanner
</script>

使用像 gulp 或 grunt 这样的工具将 qr-scanner.umd.min.js 直接与您的非模块代码打包。
使用基于require的打包器，如browserify来打包lib。

const QrScanner = require('qr-scanner'); // if installed via package
const QrScanner = require('path/to/qr-scanner.umd.min.js'); // if not installed via package
// do something with QrScanner

这个库使用了ECMAScript 2017特性，如async函数。如果您需要支持旧浏览器，可以使用qr-scanner.legacy.min.js，它兼容ECMAScript 2015（ES6）。这是一个UMD构建，可以用作上面提到的qr-scanner.umd.min.js的替代品。注意，遗留版本更大，因为它包含了某些polyfills，并且为了支持不支持动态导入的浏览器，它将工作脚本内联（虽然这些脚本在任何情况下都需要在遗留浏览器中加载）。但您可能不需要使用遗留版本，因为常规构建的浏览器支持已经非常好。尤其是如果您想从设备的摄像头扫描，浏览器的摄像头支持是更严格的限制。

用法

网络摄像头扫描

1. 创建HTML

创建一个<video>元素，其中网络摄像头视频流应该被渲染。

<video></video>

2. 创建QrScanner实例

// To enforce the use of the new api with detailed scan results, call the constructor with an options object, see below.
const qrScanner = new QrScanner(
    videoElem,
    result => console.log('decoded qr code:', result),
    { /* your options or returnDetailedScanResult: true if you're not specifying any other options */ },
);

// For backwards compatibility, omitting the options object will currently use the old api, returning scan results as
// simple strings. This old api will be removed in the next major release, by which point the options object is then
// also not required anymore to enable the new api.
const qrScanner = new QrScanner(
    videoElem,
    result => console.log('decoded qr code:', result),
    // No options provided. This will use the old api and is deprecated in the current version until next major version.
);

作为可选的第三个参数，可以提供一个选项对象。支持以下选项：

要使用某个选项的默认值，可以省略该选项或提供undefined。

传递给回调的结果取决于是否提供了选项对象。

如果没有提供选项对象，结果是包含读取到的QR码内容的字符串。简单的字符串返回类型是为了向后兼容，现在已弃用，将在未来删除。
如果提供了选项对象，结果是包含data属性的对象，其中data是读取到的QR码的字符串内容，cornerPoints是读取到的QR码轮廓在摄像头流中的角点。

为了避免使用弃用的API（除非您提供了其他选项），您可以通过提供{ returnDetailedScanResult: true }来启用新API并获取详细的扫描结果。

3. 开始扫描

qrScanner.start();

当您准备好扫描时调用它，例如在按钮点击或页面直接加载时。它将提示用户请求使用摄像头权限。注意：要从网络摄像头流中读取，您的页面必须通过HTTPS提供服务。

4. 停止扫描

qrScanner.stop();

如果您想，您可以在任何时候停止扫描，并通过再次调用start()来恢复。

单张图像扫描

QrScanner.scanImage(image)
    .then(result => console.log(result))
    .catch(error => console.log(error || 'No QR code found.'));

支持图像来源包括：HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas、File / Blob、Data URIs、指向图像的URL（如果它们来自同一源或CORS启用）

作为可选的第二个参数，可以提供一个选项对象。支持以下选项：

要使用某个选项的默认值，可以省略该选项或提供undefined。

返回结果取决于是否提供了选项对象。

如果没有提供选项对象，结果是包含读取到的QR码内容的字符串。简单的字符串返回类型是为了向后兼容，现在已弃用，将在未来删除。
如果提供了选项对象，结果是包含data属性的对象，其中data是读取到的QR码的字符串内容，cornerPoints是读取到的QR码轮廓在摄像头流中的角点。

为了避免使用弃用的API（除非您提供了其他选项），您可以通过提供{ returnDetailedScanResult: true }来启用新API并获取详细的扫描结果。

如果没有读取到QR码，scanImage会抛出异常。

检查摄像头可用性

这个库提供了一个实用方法来检查设备是否有摄像头。这可以用来确定是否向用户提供QR网络摄像头扫描功能。

QrScanner.hasCamera(); // async

获取可用摄像头的列表

该库提供了一种实用方法，用于获取设备的相机列表，这些相机通过其id和label定义。这可以用于让用户选择特定的相机使用。

您可以选择性地请求相机的标签。请注意，这需要用户允许访问相机，如果尚未授权，将会询问用户。如果未特别请求，设备标签将根据最佳努力原则确定，即如果已授权权限，则返回实际标签，否则返回备用标签。如果您想请求相机标签，建议在成功启动QrScanner实例后调用listCameras，因为那时用户已经授权。

QrScanner.listCameras(); // async; without requesting camera labels
QrScanner.listCameras(true); // async; requesting camera labels, potentially asking the user for permission

指定要使用的相机

您可以选择要使用的相机。优先级可以是listCameras返回的设备id，或者是指定为'environment'或'user'的方向模式。请注意，没有保证优先级可以实际满足。

qrScanner.setCamera(facingModeOrDeviceId); // async

颜色反转模式

扫描器默认在明亮的背景上扫描暗色二维码。您可以将此行为更改为在暗背景上扫描亮色二维码或同时扫描两种。

qrScanner.setInversionMode(inversionMode);

inversionMode可以是original、invert或both。对于网络摄像头扫描，默认值为original，对于单张图像扫描，默认值为both。

颜色校正

更改灰度计算中红、绿和蓝的权重，以改善特定颜色二维码的对比度

qrScanner.setGrayscaleWeights(red, green, blue, useIntegerApproximation = true);

如果useIntegerApproximation === true，则red、green和blue应加起来为256，否则为1。默认情况下，使用这些值。

手电筒支持

在支持的浏览器中，您可以检查当前使用的相机是否有闪光灯，并打开或关闭它。请注意，hasFlash应在扫描器成功启动后调用，以避免打开临时相机流仅为了查询是否支持闪光灯，可能需要请求用户访问相机。

qrScanner.hasFlash(); // check whether the browser and used camera support turning the flash on; async.
qrScanner.isFlashOn(); // check whether the flash is on
qrScanner.turnFlashOn(); // turn the flash on if supported; async
qrScanner.turnFlashOff(); // turn the flash off if supported; async
qrScanner.toggleFlash(); // toggle the flash if supported; async.

清理

如果您不再需要二维码扫描器，可以销毁它

qrScanner.destroy();
qrScanner = null;

这将停止相机流和Web Worker，并清理事件监听器。二维码扫描器在销毁后将无法正常工作。

构建项目

项目预先构建在qr-scanner.min.js和qr-scanner-worker.min.js中。只有当您想更改/src文件夹中的代码时才需要自行构建。构建需要NodeJs。

安装所需的构建包

yarn

构建

yarn build

net-tools / js-qr-scanner

维护者

详细信息