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

╰半橙微兮° 2023-10-02 11:36 18阅读 0赞

[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.![favicon.ico][]https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/][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._favicon.ico_https_blog.minhazav.dev_QR-and-barcode-scanner-using-html-and-javascript]

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

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

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

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

最新的：

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

**代码健康修复**

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

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

### 使用库 ###

该库公开了两个主要类：

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

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

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

#### 安装库 ####

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

安装使用[npm][]

npm install --save-dev html5-qrcode

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

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

#### 添加占位符 HTML 元素 ####

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

#### 在javascript中初始化 ####

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

#### 演示 ####

[代码扫描器][Link 1]闲置的

![3daa70159d209500655276da167bac2c.gif][]

请求相机权限

[扫描图像文件][Link 5]

#### 笔记： ####

*  您可以通过传递不同的配置对象来自定义扫描仪 -[阅读更多][Link 6]。
 *  成功回调具有以下接口（[/src/core.ts][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>> {}
    }

### 所有支持的格式 ###

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

<table> 
 <thead> 
  <tr> 
   <th>代码</th> 
   <th>例子</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="background-color:#fdfdfd;">二维码</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/6a05a6bb3d83d5356a9c95f636ed1117.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">阿兹特克</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/5624f7d4ab687d2dd2e3b85512b94a43.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">CODE_39</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/e526440861ca813dff21c5d852b00a76.gif"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">CODE_93</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/c10635cec4c0b5c79f93737d6d91debc.gif"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">CODE_128</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/163d2fa7b90a5f9783a2a8eec93d8d6c.gif"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">最大代码</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/0464945ab5d005f9764f9a6e1d362a61.gif"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">国际乒联</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/f780fdb635589342db799f9b5f5b3483.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">EAN_13</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/36c60a156b48f06ea48d24eb52c65e7c.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">EAN_8</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/0c45b4164b27f9f2801850504028cbb3.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">PDF_417</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/78cac1790c64bd4610a726b3ae90f13e.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">RSS_14</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/ded0b6cc82e3d2e42c16a93be3545298.gif"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">RSS_EXPANDED</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/601151759113753e084277acc1810e84.gif"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">UPC_A</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/c4a062b4ff26e3a32f4926e940b01e81.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">UPC_E</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/3419af52f31227cbcf19b397c8d68607.png"></p> </td> 
  </tr> 
  <tr> 
   <td style="background-color:#fdfdfd;">数据_矩阵</td> 
   <td style="background-color:#fdfdfd;"> <p style="text-align:center;"><img alt="" src="https://img-blog.csdnimg.cn/img_convert/72048664f5281ec6514dc0ce23ffa47c.png"></p> </td> 
  </tr> 
 </tbody> 
</table>

<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>

###  ###

[favicon.ico]: https://blog.minhazav.dev/assets/favicon.ico
[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._favicon.ico_https_blog.minhazav.dev_QR-and-barcode-scanner-using-html-and-javascript]: https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/
[Link 1]: https://github.com/mebjas/html5-qrcode
[qrcode.minhazav.dev]: https://qrcode.minhazav.dev/
[Link 2]: https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/#all-supported-formats
[issue_134]: https://github.com/mebjas/html5-qrcode/issues/134
[issue_63]: https://github.com/mebjas/html5-qrcode/issues/63
[issue_140]: https://github.com/mebjas/html5-qrcode/issues/140
[Zxing-js]: https://github.com/zxing-js/library
[Codacy A]: https://app.codacy.com/gh/mebjas/html5-qrcode/dashboard?utm_source=github.com&utm_medium=referral&utm_content=mebjas/html5-qrcode&utm_campaign=Badge_Grade
[Link 3]: https://www.codacy.com/gh/mebjas/html5-qrcode/dashboard?utm_source=github.com&utm_medium=referral&utm_content=mebjas/html5-qrcode&utm_campaign=Badge_Grade
[Link 4]: https://github.com/mebjas/html5-qrcode/issues/225
[2.0.0]: https://github.com/mebjas/html5-qrcode/blob/master/changelog.md#version-200
[unpkg]: https://unpkg.com/browse/html5-qrcode@2.0.9/
[npm]: https://www.npmjs.com/package/html5-qrcode
[3daa70159d209500655276da167bac2c.gif]: https://img-blog.csdnimg.cn/img_convert/3daa70159d209500655276da167bac2c.gif
[Link 5]: https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/#scan-using-file
[Link 6]: https://github.com/mebjas/html5-qrcode#extra-optional-configuration-in-start-method
[src_core.ts]: https://github.com/mebjas/html5-qrcode/blob/master/src/core.ts#L225
[Html5Qrcode]: https://github.com/mebjas/html5-qrcode/blob/master/src/html5-qrcode.ts