HTML5 QR Code scanner

Update! This library now supports scanning different types of barcode formats starting version 2.0.0 (See supported formats, changelog).

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(decodedText, decodedResult) {
    // Handle on success condition with the decoded text or result.
    console.log(`Scan result: ${decodedText}`, decodedResult);
}

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

[4] Optional - Stop scanning after the code is scanned?

You can use Html5QrcodeScanner#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(decodedText, decodedResult) {
    // Handle on success condition with the decoded text or result.
    console.log(`Scan result: ${decodedText}`, decodedResult);
    // ...
    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(decodedText, decodedResult) {
    // Handle on success condition with the decoded text or result.
    console.log(`Scan result: ${decodedText}`, decodedResult);
}

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:
  • You are sure that the camera feed cannot be mirrored (Horizontally flipped).
  • You are facing performance issues with this enabled.
  • formatsToSupport Html5QrcodeSupportedFormats (Optional)
    By default, both camera stream and image files are scanned against all the supported code formats. Both Html5QrcodeScanner and Html5Qrcode classes can be configured to only support a subset of supported formats. Supported formats are defined in enum Html5QrcodeSupportedFormats.
    Read more...

    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