HTML5 QR Code scanner
Click "Start Scanning" to start scanning QR Code
querying for available camera options...
FAQs
Is this supported on smartphones?Yes! the solution is based on vanilla HTML5 and javascript. This should work on any HTML5 supported browser.
Full example on how to use this?
Check source code of this page or checkout this gist where I have copied js code.
Where can I read more about this, is there a refernce article?
Apart from the documentation on the github project, following blog article may be helpful.
HTML5 QR Code scanning - launched v1.0.1 without jQuery dependency and refactored Promise based APIs
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 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. [ Read more ][Obsolete] QR Code scanner using HTML5 and Javascript
LazarSoft had written an excellent set of QR code decoding javascript libraries. However, it still requires some efforts to integrate the work with a web project, as we need to take care of enumerating different camera devices, setting upcanvas
or the video
element and hooking the stream with qrcode library
.
Also recently, in leu of privacy concers, some javascript APIs related to accessing the camera has changed and it requires some efforts to ensure different platforms like mobile or PC, chrome or safari support it.
To reduce these pain points I wrote a jQuery based wrapper on to abstract tasks like camera enumeration and UI setup - it can be found at mebjas/html5-qrcode.
In this article I have documented some details on how to use it and what is happening under the hook.
[ Read more ]
References
- Project on Github - mebjas/html5-qrcode
- How to use - blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1