HTML5 QR Code Scanner

[1] Add javascript to your webpage either using npm

You can install via npm or include the JavaScript script directly.

Or include it via script tag:

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

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

Create a container element with a specific ID where the scanner will be rendered.

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

[3] Initialize

Create an instance and start scanning with just a few lines of code.

function onScanSuccess(decodedText, decodedResult) {
  // Handle on success condition with the decoded text or result.
  console.log(`Scan result: ${decodedText}`, decodedResult);
}

const 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.

const html5QrcodeScanner = new Html5QrcodeScanner(
  "reader", { fps: 10, qrbox: 250 });
        
function onScanSuccess(decodedText, decodedResult) {
  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 a failure callback.

function onScanSuccess(decodedText, decodedResult) {
  console.log(`Scan result: ${decodedText}`, decodedResult);
}

function onScanError(errorMessage) {
  // handle on error condition, with error message
}

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

[6] More configurations

The library supports various configurations to customize the behavior. Visit the GitHub documentation for a full list.