HTML5 QR Code scanner

You can either use Html5QrcodeScanner which takes of end to end user interface and functionality, 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 JavaScript script directly using

<script src="html5-qrcode.min.js"></script>

.

[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);

Yes! the solution is based on vanilla HTML5 and javascript. This should work on any HTML5 supported browser.

Check source code of this page or checkout this gist where I have copied js code.

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 — How to allow Chrome to access my camera on localhost?.

Apart from the documentation on the github project, following blog article may be helpful.