HTML5 QR Code scanner
QR Code ScannerIDLE
How to use?
You can either use
Html5QrcodeScanner
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 Html5QrcodeScanner
.
[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);
[4] Optional - Stop scanning after the code is scanned?
You can useHtml5QrcodeScanner#clear()
method to stop scanning after the code is scanned. Here's an example:
var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 });
function onScanSuccess(qrCodeMessage) {
// handle on success condition with the decoded message
html5QrcodeScanner.clear();
// ^ this will stop the scanner (video feed) and clear the scan area.
}
html5QrcodeScanner.render(onScanSuccess);
[5] Optional - Handle scan failure?
You can handle scan failure or video failure using failure callback. Here's an example:function onScanSuccess(qrCodeMessage) {
// handle on success condition with the decoded message
}
function onScanError(errorMessage) {
// handle on error condition, with error message
}
var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess, onScanError);
[6] More configurations
The library supports certain configurations that allows you to change the behavior. You can read more about it here.Configuration | Description |
---|---|
fps |
Integer, Example = 10 A.K.A frame per second, the default value for this is 2 but it can be increased to get faster scanning. Increasing too high value could affect performance. Value >1000 will simply fail.
|
qrbox |
Integer, Example = 250 Use this property to limit the region of the viewfinder you want to use for scanning. The rest of the viewfinder would be shaded. For example by passing config { qrbox : 250 } .
|
aspectRatio |
Float, Example 1.777778 for 16:9 aspect ratio Use this property to render the video feed in a certain aspect ratio. Passing a nonstandard aspect ratio like 100000:1 could lead to the video feed not even showing up. If you do not pass any value, the whole viewfinder would be used for scanning. Note: this value has to be smaller than the width and height of the QR code HTML element. |
disableFlip |
Boolean (Optional), default = false By default, the scanner can scan for horizontally flipped QR Codes. This also enables scanning QR code using the front camera on mobile devices which are sometimes mirrored. This is false by default and I recommend changing this only if: |
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:
Where can I read more about this, is there a refernce article?
- Camera access only work for
https
and nothttp
except forlocalhost or local server
. - You cannot test this by opening the html file, it should be backed by a server - More info.
Apart from the documentation on the github project, following blog article may be helpful.
html5-qrcode
helps developer to integrate QR code scanning in HTML5 based
applications. It abstracts camera access and usage on different browsers
and simplify QR Code scanning for developers. The primary goal of the
library is cross-platform support across different OS versions and
Browsers. One of the key problems with cross-platform support was some
browsers in Android and many browsers in iOS (almost all other than
Safari which are based on WebKit for iOS) did not support camera access.
This prevents users from doing inline QR Code scanning which is the
primary feature of the library. To mitigate this I have added support
for scanning local media on the device and it implicitly adds support
for capturing QR Code using default camera on the device and scanning
it. This is an upgrade to the existing library - you can read more about
it here. In this article I have explained now file-based scanning works and how to use it.
[ Read more ]
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 ]
HTML5 QR Code scanning with javascript - Support for scanning the local file and using default camera added (v1.0.5)

HTML5 QR Code scanning - launched v1.0.1 without jQuery dependency and refactored Promise based APIs

References
- Project on Github - mebjas/html5-qrcode
- How to use - blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1
- File based scanning - blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera