Javascript 扫描摄像头或图像文件二维码和条形码

2022-06-02 06:16:05

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

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

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

有什么新鲜事`version 2.x.x`

最新的：正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消

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

代码健康修复

整个代码迁移到 Typescript以实现可扩展且不易出错的开发。
基于Codacy报告的几个代码健康问题的修复，现在我们已经在Codacy A级- 正在上传…重新上传取消，跟踪问题，这个重构

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

使用库

该库公开了两个主要类：

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

使用集成代码扫描器`Html5QrcodeScanner`

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

安装库

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

安装使用npm

npm install --save-dev html5-qrcode

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

<!-- include the library -->
<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>

添加占位符 HTML 元素

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

<div id="qr-reader" style="width: 600px"></div>

在javascript中初始化

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

function onScanSuccess(decodedText, decodedResult) {
    console.log(`Code scanned = ${decodedText}`, decodedResult);
}
var html5QrcodeScanner = new Html5QrcodeScanner(
	"qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

演示

代码扫描器闲置的

请求相机权限扫描图像文件

笔记：

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

/** Format of detected code. */
interface QrcodeResultFormat {
    format: Html5QrcodeSupportedFormats;
    formatName: string;
}

/** Detailed scan result. */
interface QrcodeResult {
    text: string;
    format: QrcodeResultFormat,
}

/** QrCode result object. */
interface Html5QrcodeResult {
    decodedText: string;
    result: QrcodeResult;
}

type QrcodeSuccessCallback
    = (decodedText: string, result: Html5QrcodeResult) => void;

`Html5Qrcode接口`

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

class Html5Qrcode {
    constructor(elementId: string, config: Html5QrcodeFullConfig) {}

    /** Start scanning. */
    start(cameraIdOrConfig: Html5QrcodeIdentifier,
        configuration: Html5QrcodeCameraScanConfig | undefined,
        qrCodeSuccessCallback: QrcodeSuccessCallback | undefined,
        qrCodeErrorCallback: QrcodeErrorCallback | undefined,
    ): Promise<null> {}

    /** Stop scanning. */
    stop(): Promise<void> {}

    /** Clear the rendered surface. */
    clear(): void {}

    /** Scan a file. */
    scanFile(
        imageFile: File,
        showImage?: boolean): Promise<string> {}

    /** Returns list of cameras in the device, invokes permission request. */
    static getCameras(): Promise<Array<CameraDevice>> {}
}

所有支持的格式

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

代码	例子
二维码
阿兹特克
CODE_39
CODE_93
CODE_128
最大代码
国际乒联
EAN_13
EAN_8
PDF_417
RSS_14
RSS_EXPANDED
UPC_A
UPC_E
数据_矩阵

<html>
<head>
    <title>Html-Qrcode Demo</title>
<body>
    <div id="qr-reader" style="width:500px"></div>
    <div id="qr-reader-results"></div>
</body>
<script src="html5-qrcode.min.js"></script>
<script>
    function docReady(fn) {
        // see if DOM is already available
        if (document.readyState === "complete"
            || document.readyState === "interactive") {
            // call on next available tick
            setTimeout(fn, 1);
        } else {
            document.addEventListener("DOMContentLoaded", fn);
        }
    }

    docReady(function () {
        var resultContainer = document.getElementById('qr-reader-results');
        var lastResult, countResults = 0;
        function onScanSuccess(decodedText, decodedResult) {
            if (decodedText !== lastResult) {
                ++countResults;
                lastResult = decodedText;
                // Handle on success condition with the decoded message.
                console.log(`Scan result ${decodedText}`, decodedResult);
            }
        }

        var html5QrcodeScanner = new Html5QrcodeScanner(
            "qr-reader", { fps: 10, qrbox: 250 });
        html5QrcodeScanner.render(onScanSuccess);
    });
</script>
</head>
</html>

码农公寓

有什么新鲜事version 2.x.x

使用库

使用集成代码扫描器Html5QrcodeScanner

安装库