HTML5 QR Code scanner

How to use?

You can either use Html5QrcodePro which takes of end to end user interface and functionaility or you can use Html5Qrcode with your own user interface. This demo is build using Html5QrcodePro.

[1] Add javascript to your webpage either using npm



Or include the script directly using
<script src="html5-qrcode.min.js"></script>
You can download the script from here.

[2] Add an empty div where you want to place the qrcode scanner

<div style="width: 500px" id="reader"></div>

[3] Initialize

function onScanSuccess(qrCodeMessage) {
	// handle on success condition with the decoded message
}

var html5QrcodeScanner = new Html5QrcodeScanner(
	"reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

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.
I copied the demo code it's not working for me?
Few identified reasons so far:
  1. Camera access only work for https and not http except for localhost or local server.
  2. You cannot test this by opening the html file, it should be backed by a server - More info.
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.

Comments