Home / FAQs / QR Code Scanner with Html5-QRCode.js

QR Code Scanner with Html5-QRCode.js

FAQs

December 10, 2022 0

Last updated: December 10, 2022.

Using the Html5-QRCode library, you can initialize a QR code scanning instance that allows a user to scan a QR code from their webcam or upload from file.

The library implements a standard UI into a DOM element that you specify.

Importing Html5-QRCode

You can install the library via npm or load from a CDN link.

You can install via npm if Node is already installed on your system. If you are unsure, follow the steps in our guide to installing Node.

Then, create a new project folder and install a new Node project there before installing the package:

cd C:\Users\You\Desktop\your-project-folder
npm init --y
npm i html5-qrcode

You can then import it into your project by including script linking to the html5-qrcode.min.js file that the installation creates in the <head> of your document:

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

Alternatively, to get up and running quickly, you can use a CDN link instead:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.4/html5-qrcode.min.js" integrity="sha512-k/KAe4Yff9EUdYI5/IAHlwUswqeipP+Cp5qnrsUjTPCgl51La2/JhyyjNciztD7mWNKLSXci48m7cctATKfLlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Creating a QR Code Scanner

To create a new QR Code scanner, you create a new instance of the Html5QrcodeScanner object, passing in the name of the HTML element into which the scanner should inject as the first argument (here ‘reader‘) and an options object as a second argument.

Then call the render() method on the new object to start the QR Code Scanner. The function you pass in as a first argument handles a successful scan/read. The result is available automatically as a parameter. The second second function handles an error.

<style>
    main {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #reader {
        width: 600px;
    }
    #result {
        text-align: center;
        font-size: 1.5rem;
    }
</style>

<main>
    <div id="reader"></div>
    <div id="result"></div>
</main>
    

<script>

    const scanner = new Html5QrcodeScanner('reader', { 
        // Scanner will be initialized in DOM inside element with id of 'reader'
        qrbox: {
            width: 250,
            height: 250,
        },  // Sets dimensions of scanning box (set relative to reader element width)
        fps: 20, // Frames per second to attempt a scan
    });


    scanner.render(success, error);
    // Starts scanner

    function success(result) {

        document.getElementById('result').innerHTML = `
        <h2>Success!</h2>
        <p><a href="${result}">${result}</a></p>
        `;
        // Prints result as a link inside result element

        scanner.clear();
        // Clears scanning instance

        document.getElementById('reader').remove();
        // Removes reader element from DOM since no longer needed
    
    }

    function error(err) {
        console.error(err);
        // Prints any errors to the console
    }

</script>

The library comes with its own UI interface. Therefore, without the need for any further code, the scanning instance should already be functional and look something like this: