• What'southward new in version ii.x.x
  • Using the library
  • Integrating lawmaking scanner using Html5QrcodeScanner
    • Install the library
      • Install using npm
      • Load latest library from unpkg or other CDNs
    • Add placeholder HTML chemical element
    • Initialize in javascript
    • Demo
    • Notes:
  • Html5Qrcode interface
  • All supported formats
  • Future plans
  • How to contribute
  • Related articles

The little QR code scanning library I have been maintaining since 2022 has been getting more attending recently. And with power came responsibilities, bugs, and feature requests. Some of the key features requested by developers were more reliable scanning and the power to scan different types of bar codes. With version two.0.0 onwards developers tin 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.ten. I'll likewise list out the new APIs and capabilities that developers can use to integrate a more powerful lawmaking scanning capability to their web pages or apps.

Here's the library I am taking about: mebjas/html5-qrcode, checkout demo at qrcode.minhazav.dev

Star Fork Event Discuss

What's new in version ii.ten.ten

Latest: GitHub tag (latest by date) Codacy Badge Build Status

  1. Ability to scan dissimilar kinds of 1D codes and 2d codes.
    • See all supported formats here.
    • Scanned format blazon and the proper noun returned in the success callback.
  2. More reliable code scanning, fixing issues similar issue#134, issue#63, issue#140.
    • Both (1) & (2) were accomplished by migrating the decoding library from Lazarsoft's library to Zxing-js.
  3. [Pocket-sized] Library now reports more granular errors to reduce debugging fourth dimension for developers.
    • For example, if the library is used in HTTP url, the exact issue volition be reported.

Lawmaking health fixes

  1. Entire code migrated to Typescript for scalable & less error-prone development.

  2. Several code health bug fixed based on Codacy report and now nosotros take grade A on Codacy - , tracking issue for this refactor

Check out changelog since Version 2.0.0 for more clarity.

Using the library

The library exposes ii main classes:

  • Html5QrcodeScanner - Use this to prepare upwards stop to cease scanner with UI, built on peak of Html5Qrcode.
    • Takes care of building full user interface
    • Supports scanning using a web-cam or camera on the device with existent-time photographic camera feeds.
    • Back up scanning local images on the device.
  • Html5Qrcode - lower-level library, exposes APIs to build your code scanner.

Integrating lawmaking scanner using Html5QrcodeScanner

Follow the steps beneath to integrate QR lawmaking or barcode scanning capabilities into your web application:

Install the library

You could install the library using npm or load it directly using some CDNS like unpkg

Install using npm

            npm              install              --salvage-dev              html5-qrcode

Load latest library from unpkg or other CDNs

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

Add placeholder HTML element

Add a placeholder HTML element to your web folio. The scanning UI would be rendered in this element. Give it appropriate stylings like width or height.

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

Initialize in javascript

Now you can set up the scanner with these 4 lines of code.

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

Demo

Notes:

  • Y'all tin customize the scanner by passing a different config object - read more.
  • The success callback has the following interface (/src/core.ts)
                          /** Format of detected lawmaking. */              interface              QrcodeResultFormat              {              format              :              Html5QrcodeSupportedFormats              ;              formatName              :              string              ;              }              /** Detailed scan result. */              interface              QrcodeResult              {              text              :              string              ;              format              :              QrcodeResultFormat              ,              }              /** QrCode outcome object. */              interface              Html5QrcodeResult              {              decodedText              :              string              ;              result              :              QrcodeResult              ;              }              type              QrcodeSuccessCallback              =              (              decodedText              :              string              ,              result              :              Html5QrcodeResult              )              =>              void              ;

Html5Qrcode interface

If you want to build your user interface, you tin make use of the public APIs exposed past Html5Qrcode form:

                          class              Html5Qrcode              {              constructor              (              elementId              :              string              ,              config              :              Html5QrcodeFullConfig              )              {}              /** Start scanning. */              starting time              (              cameraIdOrConfig              :              Html5QrcodeIdentifier              ,              configuration              :              Html5QrcodeCameraScanConfig              |              undefined              ,              qrCodeSuccessCallback              :              QrcodeSuccessCallback              |              undefined              ,              qrCodeErrorCallback              :              QrcodeErrorCallback              |              undefined              ,              ):              Hope              <              null              >              {}              /** Terminate scanning. */              stop              ():              Promise              <              void              >              {}              /** Articulate the rendered surface. */              clear              ():              void              {}              /** Scan a file. */              scanFile              (              imageFile              :              File              ,              showImage              ?:              boolean              ):              Promise              <              cord              >              {}              /** Returns list of cameras in the device, invokes permission request. */              static              getCameras              ():              Hope              <              Assortment              <              CameraDevice              >>              {}              }

All supported formats

These are the different lawmaking formats now supported by the library, with examples:

Code Example
QR Code
AZTEC
CODE_39
CODE_93
CODE_128
MAXICODE
ITF
EAN_13
EAN_8
PDF_417
RSS_14
RSS_EXPANDED
UPC_A
UPC_E
DATA_MATRIX

Future plans

  • Major UI overhaul - outcome#207
  • Remembering last used camera - upshot#85, discussion#213
  • Back up setting default facing mode in Html5QrcodeScanner - effect#65
  • Set most of open bug at - mebjas/html5-qrcode/issues

How to contribute

If you are excited or interested you tin contribute to this project by:

  • If you find compatibility issues with a sure browser, create an issue here.
  • Raising issues for bugs faced, at Github issue folio for the projection. Feel costless to add some related interesting discussions which could be taken up equally work-detail.
  • Sending a Pull Request for bugs fixed past you lot.
  • Rating the project with stars and shares.
  • Demo: HTML5 QR Code scanner
  • HTML5 QR Code scanning with javascript - launched v1.0.ane
  • Support for scanning the local file and using default photographic camera added (v1.0.5)