Implementing QR Code Scanning with `html5-qrcode`

Published in

Coffee and Codes

3 min readAug 21, 2024

Barcode and QR code scanning can add valuable functionality to web applications, enabling everything from inventory management to interactive user experiences. html5-qrcode.js is a versatile library that makes this process straightforward. In this blog post, we'll cover how to integrate barcode scanning into your web application using html5-qrcode.js, including installation via NPM.

What is `html5-qrcode.js`?

html5-qrcode.js is a JavaScript library that enables QR code and barcode scanning directly within a web browser using HTML5 and WebRTC. It provides an easy-to-use interface for accessing the camera and decoding scanned codes.

Step 1: Setting Up Your Project

First, let’s set up your project and install the html5-qrcode.js library via NPM.

Initialize Your Project
If you haven’t already, create a new project directory and initialize it with NPM:

mkdir barcode-scanner
cd barcode-scanner
npm init -y

Install html5-qrcode.js

Install the html5-qrcode package using NPM:

npm install html5-qrcode

Step 2: Create Your HTML Structure

Next, create an HTML file to serve as the interface for your barcode scanning application. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barcode Scanning with html5-qrcode.js</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        #scanner {
            width: 100%;
            max-width: 600px;
            border: 1px solid #333;
        }
        #result {
            margin-top: 20px;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div>
        <div id="scanner"></div>
        <div id="result">Scan a barcode or QR code</div>
    </div>
    <script src="dist/bundle.js"></script>
</body>
</html>

Step 3: Write the JavaScript to Handle Scanning

Create a file named index.js (or any name you prefer) for your JavaScript code. This file will set up the barcode scanning functionality using html5-qrcode.js.

// index.js

import { Html5QrcodeScanner, Html5QrcodeScanType } from "html5-qrcode";

// Function to handle the scanned result
function onScanSuccess(decodedText, decodedResult) {
    // Update the result div with the scanned text
    document.getElementById('result').innerText = `Scanned Code: ${decodedText}`;
    html5QrcodeScanner.clear();
}

// Function to handle errors
function onScanError(error) {
    console.warn(`Scan error: ${error}`);
}

// Initialize the QR Code Scanner
let config = {
  fps: 10,
  qrbox: {width: 100, height: 100},
  rememberLastUsedCamera: true,
  // Only support camera scan type.
  supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA]
};

let html5QrcodeScanner = new Html5QrcodeScanner(
  "scanner", config, /* verbose= */ false);

html5QrcodeScanner.render(onScanSuccess, onScanError);

Step 4: Bundle Your JavaScript

To use the html5-qrcode.js package in your browser, you need to bundle your JavaScript code. You can use a tool like Webpack for this.

Install Webpack and Babel

Install Webpack and Babel to bundle and transpile your JavaScript code:

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env

Configure Webpack

Create a webpack.config.js file in your project directory:

// webpack.config.js

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

Create a Babel Configuration

Add a Babel configuration file, .babelrc, to your project:

{
    "presets": ["@babel/preset-env"]
}

Bundle Your Code

Run Webpack to bundle your JavaScript:

npx webpack

This will generate a bundle.js file in the dist directory.

Step 5: Serve Your Application

You can use a simple HTTP server to serve your HTML file. Install http-server globally if you haven’t already:

npm install -g http-server

Then, start the server:

http-server

Open the provided URL (usually http://localhost:8080) in your web browser to see your barcode scanning application in action.

Conclusion

By following these steps, you can integrate barcode and QR code scanning functionality into your web application using html5-qrcode.js and NPM. This setup provides a powerful and flexible way to enhance your web applications with barcode scanning capabilities, leveraging modern web technologies and tools. With the bundled JavaScript and HTML5, you’re all set to build robust scanning features for your users!

Any suggestion or question on this article, please feel free to write me at hima.chhag@gmail.com or in comment section below.

Happy Coding!

Implementing QR Code Scanning with html5-qrcode

What is html5-qrcode.js?