QR and barcode scanner using HTML and Javascript

Minhaz
5 min readJun 14, 2021
Different type of 1D and 2D code formats like QR code, AZTEC, PDF_417

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

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

Note

This article is imported from my blog article - QR and barcode scanner using HTML and Javascript, which has embedded demos and better syntax highlighting.

If you are interested in a web based QR Code or barcode scanner try out: https://scanapp.org (it’s based on this project).

What’s new in version 2.x.x

  1. Ability to scan different kinds of 1D codes and 2D codes.
  • See all supported formats here.
  • Scanned format type and the name returned in the success callback.

2. More reliable code scanning, fixing issues like issue#134, issue#63, issue#140.

3. [Minor] Library now reports more granular errors to reduce debugging time for developers.

Code health fixes

  1. Entire code migrated to Typescript for scalable & less error-prone development.
  2. Several code health issues fixed based on Codacy report and now we have grade A on Codacy, tracking issue for this refactor

Check out change log since Version 2.0.0 for more clarity.

Using the library

The library exposes two main classes:

Html5QrcodeScanner - Use this to set up end to end scanner with UI, built on top of Html5Qrcode.

- Takes care of building full user interface

--

--

Minhaz

Senior Software Engineer @Google. Leading teams democratising On device AI for for masses. Writes about programming generics & specifics.