In 2015 I had written an HTML5 based QR code scanning library as a jQuery extension. Recently I realised there was some consistent traffic on my Github Project and the demo page. As I dug more into what was going on and I was embarrassed to see the poor design and obsolete support to the latest HTML APIs around Camera. I recently fixed some of the issues and refactored the javascript library that is now independent of jQuery library and supports Promise based APIs. In this article I’ll explain how to use the new version of the library, some changes and reasons for them and existing issues and plan to fix them.
Important Edit 1 (14th June 2021)
Lot of things have changed since v1.0.1 and latest release for the library is v2.0.9 - Please visit QR and barcode scanner using HTML and Javascript for latest content.
If you are interested in a web based QR Code or barcode scanner try out: scanapp.org (it’s the perfect demo of this project).
Continue reading article on v1.0.1
To callout loud, the major changes are:
- Removed jQuery dependency
- Refactored the APIs to return Promise rather than being purely based on callbacks.
Read full article with code examples at https://blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1/
QR Code is a very common technique of encoding information as images. Its a very common used in physical stores for identifying products like bar code is used.
The javascript library available at mebjas/html5-qrcode on Github allows users to add a QR code scanner in their web applications. It works cross-platform and across different devices like PC, Mac or smartphones. It uses the stream from the camera and try to decode frames at a certain frequency (configurable) and notify the caller about results via callbacks. Requesting camera permissions in browsers usually results in a permission dialog popup to users for requesting permissions and can only be used if the user grants them.
