Finding the Right QR Code Scanner for Your JavaScript Project

25. May 2025

.SHARE

QR codes are everywhere these days, and if you’re building a web app that needs to scan them, you’ve probably discovered there are tons of JavaScript libraries to choose from. The thing is, they’re not all created equal – some are lightning fast but tricky to set up, others are super easy to use but might struggle with blurry images or weird lighting.

I’ve tested the most popular options out there and put together this guide to save you from the headache of trial and error. Whether you’re building a simple scanner for your side project or need something robust for production, I’ll walk you through the best libraries available right now, complete with real examples and honest performance breakdowns.

By the end of this, you’ll know exactly which library fits your needs – and more importantly, how to actually implement it without pulling your hair out.

Quick Comparison Table

Library	NPM Downloads/Week	Bundle Size	Camera Support	File Upload	Browser Support	Best Use Case
jsQR	333,461	~45KB	No	Yes	All modern browsers	Static image processing
html5-qrcode	118,308	~280KB	Yes	Yes	All modern browsers	Full-featured apps
qr-scanner (nimiq)	22,552	~25KB	Yes	No	All modern browsers	Performance-critical apps
Browser Barcode API	N/A (Native)	0KB	Yes	Yes	Chrome/Edge only	Future-proof solutions

1. jsQR – Best for Static Image Processing

GitHub: https://github.com/cozmo/jsQR
NPM: https://www.npmjs.com/package/jsqr
Demo: https://cozmo.github.io/jsQR/

Pros: Pure JavaScript, no dependencies, excellent for uploaded images
Cons: No camera support, requires manual camera integration

Installation


npm install jsqr

npm install jsqr

Basic Usage Example


import jsQR from 'jsqr';

// For uploaded image files
function scanImageFile(file) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();
    
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height);
        
        if (code) {
            console.log('QR Code found:', code.data);
            console.log('Position:', code.location);
        } else {
            console.log('No QR code found');
        }
    };
    
    img.src = URL.createObjectURL(file);
}

// For camera integration (manual setup required)
function scanFromCamera() {
    const video = document.getElementById('video');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
        .then(stream => {
            video.srcObject = stream;
            video.play();
            
            function tick() {
                if (video.readyState === video.HAVE_ENOUGH_DATA) {
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                    
                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    const code = jsQR(imageData.data, imageData.width, imageData.height);
                    
                    if (code) {
                        console.log('QR Code:', code.data);
                        return; // Stop scanning
                    }
                }
                requestAnimationFrame(tick);
            }
            tick();
        });
}

import jsQR from 'jsqr';

// For uploaded image files

function scanImageFile(file) {

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

const img = new Image();

img.onload = function() {

canvas.width = img.width;

canvas.height = img.height;

ctx.drawImage(img, 0, 0);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const code = jsQR(imageData.data, imageData.width, imageData.height);

if (code) {

console.log('QR Code found:', code.data);

console.log('Position:', code.location);

} else {

console.log('No QR code found');

}

};

img.src = URL.createObjectURL(file);

}

// For camera integration (manual setup required)

function scanFromCamera() {

const video = document.getElementById('video');

const canvas = document.createElement('canvas');

const ctx = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })

.then(stream => {

video.srcObject = stream;

video.play();

function tick() {

if (video.readyState === video.HAVE_ENOUGH_DATA) {

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const code = jsQR(imageData.data, imageData.width, imageData.height);

if (code) {

console.log('QR Code:', code.data);

return; // Stop scanning

}

requestAnimationFrame(tick);

}

tick();

});

}

2. html5-qrcode – Best for Full-Featured Applications

GitHub: https://github.com/mebjas/html5-qrcode
NPM: https://www.npmjs.com/package/html5-qrcode
Documentation: https://scanapp.org/html5-qrcode-docs/
Live Demo: https://scanapp.org/

Pros: Complete solution with UI, supports camera and files, extensive documentation
Cons: Larger bundle size, may be overkill for simple use cases

Installation


npm install html5-qrcode

npm install html5-qrcode

Quick Setup Example


import { Html5QrcodeScanner } from 'html5-qrcode';

// Simple scanner with built-in UI
function createQRScanner() {
    const html5QrcodeScanner = new Html5QrcodeScanner(
        "qr-reader", // Element ID
        { 
            fps: 10,    // Frames per second
            qrbox: {    // QR box dimensions
                width: 250,
                height: 250
            }
        },
        false // Verbose logging
    );

    html5QrcodeScanner.render(onScanSuccess, onScanFailure);

    function onScanSuccess(decodedText, decodedResult) {
        console.log(`QR Code: ${decodedText}`);
        // Handle the scanned result
        html5QrcodeScanner.clear(); // Stop scanning
    }

    function onScanFailure(error) {
        // Handle scan failure - usually not necessary to log every failure
    }
}

// HTML: <div id="qr-reader" width="600px" height="600px"></div>

import { Html5QrcodeScanner } from 'html5-qrcode';

// Simple scanner with built-in UI

function createQRScanner() {

const html5QrcodeScanner = new Html5QrcodeScanner(

"qr-reader", // Element ID

{

fps: 10, // Frames per second

qrbox: { // QR box dimensions

width: 250,

height: 250

}

false // Verbose logging

);

html5QrcodeScanner.render(onScanSuccess, onScanFailure);

function onScanSuccess(decodedText, decodedResult) {

console.log(`QR Code: ${decodedText}`);

// Handle the scanned result

html5QrcodeScanner.clear(); // Stop scanning

}

function onScanFailure(error) {

// Handle scan failure - usually not necessary to log every failure

}

// HTML: <div id="qr-reader" width="600px" height="600px"></div>

Advanced Camera Control Example


import { Html5Qrcode } from 'html5-qrcode';

async function advancedCameraScanner() {
    const html5QrCode = new Html5Qrcode("qr-reader");
    
    try {
        // Get available cameras
        const cameras = await Html5Qrcode.getCameras();
        
        if (cameras && cameras.length) {
            // Use back camera if available
            const cameraId = cameras.length > 1 ? cameras[1].id : cameras[0].id;
            
            // Start scanning
            await html5QrCode.start(
                cameraId,
                {
                    fps: 10,
                    qrbox: { width: 250, height: 250 }
                },
                (decodedText, decodedResult) => {
                    console.log(`QR Code: ${decodedText}`);
                    html5QrCode.stop();
                },
                (errorMessage) => {
                    // Handle error
                }
            );
        }
    } catch (err) {
        console.error('Error starting scanner:', err);
    }
}

import { Html5Qrcode } from 'html5-qrcode';

async function advancedCameraScanner() {

const html5QrCode = new Html5Qrcode("qr-reader");

try {

// Get available cameras

const cameras = await Html5Qrcode.getCameras();

if (cameras && cameras.length) {

// Use back camera if available

const cameraId = cameras.length > 1 ? cameras[1].id : cameras[0].id;

// Start scanning

await html5QrCode.start(

cameraId,

{

fps: 10,

qrbox: { width: 250, height: 250 }

(decodedText, decodedResult) => {

console.log(`QR Code: ${decodedText}`);

html5QrCode.stop();

(errorMessage) => {

// Handle error

}

);

}

} catch (err) {

console.error('Error starting scanner:', err);

}

3. qr-scanner (nimiq) – Best for Performance

GitHub: https://github.com/nimiq/qr-scanner
NPM: https://www.npmjs.com/package/qr-scanner
Demo: https://nimiq.github.io/qr-scanner/demo/

Pros: Lightweight, optimized performance, good mobile support
Cons: Minimal UI (you build your own), camera-focused only

Installation


npm install qr-scanner

npm install qr-scanner

Basic Implementation


import QrScanner from 'qr-scanner';

// Set worker path (important for production)
QrScanner.WORKER_PATH = '/path/to/qr-scanner-worker.min.js';

const video = document.getElementById('qr-video');
const result = document.getElementById('qr-result');

const qrScanner = new QrScanner(
    video,
    result => {
        console.log('QR Code:', result.data);
        qrScanner.stop();
    },
    {
        highlightScanRegion: true,
        highlightCodeOutline: true,
        returnDetailedScanResult: true,
    }
);

// Start scanning
async function startScanning() {
    try {
        await qrScanner.start();
    } catch (error) {
        console.error('Error starting QR scanner:', error);
    }
}

// Check if device has camera
if (await QrScanner.hasCamera()) {
    startScanning();
} else {
    console.log('No camera available');
}

import QrScanner from 'qr-scanner';

// Set worker path (important for production)

QrScanner.WORKER_PATH = '/path/to/qr-scanner-worker.min.js';

const video = document.getElementById('qr-video');

const result = document.getElementById('qr-result');

const qrScanner = new QrScanner(

video,

result => {

console.log('QR Code:', result.data);

qrScanner.stop();

{

highlightScanRegion: true,

highlightCodeOutline: true,

returnDetailedScanResult: true,

}

);

// Start scanning

async function startScanning() {

try {

await qrScanner.start();

} catch (error) {

console.error('Error starting QR scanner:', error);

}

// Check if device has camera

if (await QrScanner.hasCamera()) {

startScanning();

} else {

console.log('No camera available');

}

Advanced qr-scanner Example with Camera Selection


import QrScanner from 'qr-scanner';

class QRScannerManager {
    constructor(videoElement) {
        this.video = videoElement;
        this.qrScanner = null;
        this.isScanning = false;
    }

    async init() {
        // Get available cameras
        const cameras = await QrScanner.listCameras(true);
        
        this.qrScanner = new QrScanner(
            this.video,
            result => this.handleScanResult(result),
            {
                preferredCamera: 'environment', // Back camera
                highlightScanRegion: true,
                highlightCodeOutline: true,
                returnDetailedScanResult: true,
                maxScansPerSecond: 5,
            }
        );

        return cameras;
    }

    async start() {
        if (!this.qrScanner) await this.init();
        
        try {
            await this.qrScanner.start();
            this.isScanning = true;
        } catch (error) {
            console.error('Failed to start scanner:', error);
        }
    }

    stop() {
        if (this.qrScanner) {
            this.qrScanner.stop();
            this.isScanning = false;
        }
    }

    handleScanResult(result) {
        console.log('QR Code detected:', result.data);
        // Process the result
        this.stop();
    }

    async switchCamera(cameraId) {
        await this.qrScanner.setCamera(cameraId);
    }
}

import QrScanner from 'qr-scanner';

class QRScannerManager {

constructor(videoElement) {

this.video = videoElement;

this.qrScanner = null;

this.isScanning = false;

}

async init() {

// Get available cameras

const cameras = await QrScanner.listCameras(true);

this.qrScanner = new QrScanner(

this.video,

result => this.handleScanResult(result),

{

preferredCamera: 'environment', // Back camera

highlightScanRegion: true,

highlightCodeOutline: true,

returnDetailedScanResult: true,

maxScansPerSecond: 5,

}

);

return cameras;

}

async start() {

if (!this.qrScanner) await this.init();

try {

await this.qrScanner.start();

this.isScanning = true;

} catch (error) {

console.error('Failed to start scanner:', error);

}

stop() {

if (this.qrScanner) {

this.qrScanner.stop();

this.isScanning = false;

}

handleScanResult(result) {

console.log('QR Code detected:', result.data);

// Process the result

this.stop();

}

async switchCamera(cameraId) {

await this.qrScanner.setCamera(cameraId);

}

4. Browser Barcode Detection API – Future-Proof Solution

MDN Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API
Chrome Status: https://chromestatus.com/feature/4757990523535360
Specification: https://wicg.github.io/shape-detection-api/#barcode-detection-api

Pros: Native browser API, no external dependencies, excellent performance
Cons: Limited browser support (Chrome/Edge only as of 2024)

Feature Detection and Usage


// Check if Barcode Detection API is supported
function isBarcodeDetectionSupported() {
    return 'BarcodeDetector' in window;
}

async function scanWithNativeAPI() {
    if (!isBarcodeDetectionSupported()) {
        console.log('Barcode Detection API not supported');
        return;
    }

    try {
        // Check supported formats
        const supportedFormats = await BarcodeDetector.getSupportedFormats();
        console.log('Supported formats:', supportedFormats);

        const detector = new BarcodeDetector({
            formats: ['qr_code', 'code_128', 'ean_13']
        });

        // Scan from camera
        const video = document.getElementById('video');
        const stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: 'environment' }
        });
        
        video.srcObject = stream;
        video.play();

        // Continuous scanning
        function tick() {
            detector.detect(video)
                .then(barcodes => {
                    if (barcodes.length > 0) {
                        barcodes.forEach(barcode => {
                            console.log('Detected:', barcode.rawValue);
                            console.log('Format:', barcode.format);
                            console.log('Bounding Box:', barcode.boundingBox);
                        });
                    }
                })
                .catch(err => console.error('Detection error:', err));

            requestAnimationFrame(tick);
        }
        
        video.addEventListener('loadedmetadata', tick);

    } catch (error) {
        console.error('Error accessing camera:', error);
    }
}

// Scan from image file
async function scanImageWithNativeAPI(file) {
    if (!isBarcodeDetectionSupported()) {
        console.log('Barcode Detection API not supported');
        return;
    }

    const detector = new BarcodeDetector({ formats: ['qr_code'] });
    const img = new Image();
    
    img.onload = async () => {
        try {
            const barcodes = await detector.detect(img);
            if (barcodes.length > 0) {
                console.log('QR Code found:', barcodes[0].rawValue);
            } else {
                console.log('No QR code found');
            }
        } catch (error) {
            console.error('Detection failed:', error);
        }
    };
    
    img.src = URL.createObjectURL(file);
}

// Check if Barcode Detection API is supported

function isBarcodeDetectionSupported() {

return 'BarcodeDetector' in window;

}

async function scanWithNativeAPI() {

if (!isBarcodeDetectionSupported()) {

console.log('Barcode Detection API not supported');

return;

}

try {

// Check supported formats

const supportedFormats = await BarcodeDetector.getSupportedFormats();

console.log('Supported formats:', supportedFormats);

const detector = new BarcodeDetector({

formats: ['qr_code', 'code_128', 'ean_13']

});

// Scan from camera

const video = document.getElementById('video');

const stream = await navigator.mediaDevices.getUserMedia({

video: { facingMode: 'environment' }

});

video.srcObject = stream;

video.play();

// Continuous scanning

function tick() {

detector.detect(video)

.then(barcodes => {

if (barcodes.length > 0) {

barcodes.forEach(barcode => {

console.log('Detected:', barcode.rawValue);

console.log('Format:', barcode.format);

console.log('Bounding Box:', barcode.boundingBox);

});

}

})

.catch(err => console.error('Detection error:', err));

requestAnimationFrame(tick);

}

video.addEventListener('loadedmetadata', tick);

} catch (error) {

console.error('Error accessing camera:', error);

}

// Scan from image file

async function scanImageWithNativeAPI(file) {

if (!isBarcodeDetectionSupported()) {

console.log('Barcode Detection API not supported');

return;

}

const detector = new BarcodeDetector({ formats: ['qr_code'] });

const img = new Image();

img.onload = async () => {

try {

const barcodes = await detector.detect(img);

if (barcodes.length > 0) {

console.log('QR Code found:', barcodes[0].rawValue);

} else {

console.log('No QR code found');

}

} catch (error) {

console.error('Detection failed:', error);

}

};

img.src = URL.createObjectURL(file);

}

Complete HTML Example – Multiple Libraries Demo


    <style>
        .scanner-container {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        
        video {
            width: 100%;
            max-width: 400px;
            height: auto;
        }
    </style>

    <div class="scanner-container">
        <h2>html5-qrcode Scanner</h2>
        <div id="qr-reader" style="width: 100%;"></div>
        <div id="qr-result"></div>
    </div>

    <div class="scanner-container">
        <h2>qr-scanner (nimiq) Scanner</h2>
        <video id="qr-video"></video>
        <div id="nimiq-result"></div>
    </div>

    <div class="scanner-container">
        <h2>File Upload Scanner (jsQR)</h2>
        <input type="file" id="file-input" accept="image/*">
        <canvas id="canvas" style="display: none;"></canvas>
        <div id="file-result"></div>
    </div>

    <!-- Include libraries via CDN -->
    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    <script src="https://unpkg.com/qr-scanner@1.4.2/qr-scanner.umd.min.js"></script>
    <script src="https://unpkg.com/jsqr@1.4.0/dist/jsQR.js"></script>

    <script>
        // html5-qrcode implementation
        const html5QrcodeScanner = new Html5QrcodeScanner(
            "qr-reader",
            { fps: 10, qrbox: { width: 250, height: 250 } },
            false
        );

        html5QrcodeScanner.render(
            (decodedText) => {
                document.getElementById('qr-result').innerHTML = 
                    `<strong>html5-qrcode Result:</strong> ${decodedText}`;
            },
            (error) => {
                // Handle error
            }
        );

        // qr-scanner (nimiq) implementation
        const video = document.getElementById('qr-video');
        const qrScanner = new QrScanner(
            video,
            result => {
                document.getElementById('nimiq-result').innerHTML = 
                    `<strong>qr-scanner Result:</strong> ${result.data}`;
                qrScanner.stop();
            },
            {
                highlightScanRegion: true,
                highlightCodeOutline: true,
            }
        );

        // Start qr-scanner
        qrScanner.start().catch(err => console.error('QR Scanner error:', err));

        // jsQR file upload implementation
        document.getElementById('file-input').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            const img = new Image();

            img.onload = function() {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);

                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const code = jsQR(imageData.data, imageData.width, imageData.height);

                if (code) {
                    document.getElementById('file-result').innerHTML = 
                        `<strong>jsQR Result:</strong> ${code.data}`;
                } else {
                    document.getElementById('file-result').innerHTML = 
                        '<strong>No QR code found in image</strong>';
                }
            };

            img.src = URL.createObjectURL(file);
        });
    </script>

100

101

102

103

104

105

106

107

<style>

.scanner-container {

max-width: 500px;

margin: 20px auto;

padding: 20px;

border: 1px solid #ddd;

border-radius: 8px;

}

video {

width: 100%;

max-width: 400px;

height: auto;

}

</style>

<h2>html5-qrcode Scanner</h2>

</div>

<h2>qr-scanner (nimiq) Scanner</h2>

</div>

<h2>File Upload Scanner (jsQR)</h2>

</div>

// html5-qrcode implementation

const html5QrcodeScanner = new Html5QrcodeScanner(

"qr-reader",

{ fps: 10, qrbox: { width: 250, height: 250 } },

false

);

html5QrcodeScanner.render(

(decodedText) => {

document.getElementById('qr-result').innerHTML =

`<strong>html5-qrcode Result:</strong> ${decodedText}`;

(error) => {

// Handle error

}

);

// qr-scanner (nimiq) implementation

const video = document.getElementById('qr-video');

const qrScanner = new QrScanner(

video,

result => {

document.getElementById('nimiq-result').innerHTML =

`<strong>qr-scanner Result:</strong> ${result.data}`;

qrScanner.stop();

{

highlightScanRegion: true,

highlightCodeOutline: true,

}

);

// Start qr-scanner

qrScanner.start().catch(err => console.error('QR Scanner error:', err));

// jsQR file upload implementation

document.getElementById('file-input').addEventListener('change', function(e) {

const file = e.target.files[0];

if (!file) return;

const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');

const img = new Image();

img.onload = function() {

canvas.width = img.width;

canvas.height = img.height;

ctx.drawImage(img, 0, 0);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const code = jsQR(imageData.data, imageData.width, imageData.height);

if (code) {

document.getElementById('file-result').innerHTML =

`<strong>jsQR Result:</strong> ${code.data}`;

} else {

document.getElementById('file-result').innerHTML =

'<strong>No QR code found in image</strong>';

}

};

img.src = URL.createObjectURL(file);

});

</script>

Recommendations by Use Case

For Static Image Processing

Use jsQR: Perfect for processing uploaded images, screenshots, or existing image files.

For Quick Prototypes

Use html5-qrcode: Provides complete UI components and handles edge cases automatically.

For Performance-Critical Applications

Use qr-scanner (nimiq): Optimized for real-time scanning with minimal overhead.

For Mobile-First Applications

Use qr-scanner (nimiq) or html5-qrcode: Both have excellent mobile camera support.

For Future-Proof Applications

Consider Browser Barcode Detection API: Native performance, but check browser compatibility for your target audience.

For Production Applications

html5-qrcode or qr-scanner (nimiq): Both are actively maintained with good community support.

Performance Tips

Optimize FPS: Lower FPS (5-10) reduces CPU usage while maintaining good user experience
Use Worker Threads: qr-scanner supports web workers for better performance
Implement Debouncing: Avoid processing every frame unnecessarily
Camera Resolution: Lower resolution cameras scan faster but may miss small QR codes
Error Handling: Always implement proper error handling for camera access failures

Additional Resources

Learning Resources

Alternative Libraries

QuaggaJS – Barcode scanner with extensive format support
ZXing-js – JavaScript port of the popular ZXing library
Instascan – Real-time webcam QR code scanner

Commercial Solutions

Scanbot SDK – Enterprise-grade scanning solution
Dynamsoft Barcode Reader – High-performance commercial SDK

Browser Compatibility

jsQR: All modern browsers (IE11+)
html5-qrcode: All modern browsers, good mobile support
qr-scanner: All modern browsers, excellent mobile support
Barcode Detection API: Chrome 83+, Edge 83+ (experimental)

Thoughts

Choose your QR code scanning solution based on your specific needs:

jsQR for image processing
html5-qrcode for full-featured applications
qr-scanner for performance-critical apps
Native Barcode API for cutting-edge projects with limited browser support requirements

All libraries are actively maintained and production-ready, with the choice depending on your specific requirements for features, performance, and bundle size.

Chrome: How to use your camera without asking for permission?

Method 1: Chrome Settings

Open Chrome and click the three dots menu (⋮) in the top right
Go to Settings > Privacy and security > Site Settings
Click on Camera
Set the default behavior to “Sites can ask to use your camera” or “Allow”
You can also add specific sites to the “Allowed to use your camera” list

Method 2: Address Bar Permission

Visit the website you want to grant camera access to
Click the camera icon or lock icon in the address bar
Set Camera to “Allow”
This will remember your choice for that specific site

Method 3: For All Sites (Less Secure)

In Chrome’s camera settings, you can choose “Don’t block camera access” but this isn’t recommended for security reasons as it would allow any website to potentially access your camera.

Command Line Flag (Advanced)

You can also start Chrome with the flag --use-fake-ui-for-media-stream which will automatically grant media permissions, but this is mainly for testing purposes.

The most secure approach is Method 2 – granting permission on a per-site basis for websites you trust.

FAQ

How do I create a QR Code Scanner in JavaScript?

You can create a QR Code Scanner using JavaScript libraries like html5-qrcode, jsQR, or qr-scanner. The most popular approach is using html5-qrcode library:


// Include the library
// <script src="https://unpkg.com/html5-qrcode"></script>

// Initialize scanner
const html5QrCode = new Html5Qrcode("reader");

// Start scanning
html5QrCode.start(
  { facingMode: "environment" }, // Use back camera
  {
    fps: 10,
    qrbox: { width: 250, height: 250 }
  },
  (decodedText, decodedResult) => {
    console.log(`Code scanned: ${decodedText}`);
  }
).catch(err => {
  console.error(err);
});

// Include the library

// <script src="https://unpkg.com/html5-qrcode"></script>

// Initialize scanner

const html5QrCode = new Html5Qrcode("reader");

// Start scanning

html5QrCode.start(

{ facingMode: "environment" }, // Use back camera

{

fps: 10,

qrbox: { width: 250, height: 250 }

(decodedText, decodedResult) => {

console.log(`Code scanned: ${decodedText}`);

}

).catch(err => {

console.error(err);

});

What is the best JavaScript library for QR Code scanning?

The most popular JavaScript QR Code scanning libraries are:

html5-qrcode – Cross-platform with UI components, supports both camera and file scanning

jsQR – Lightweight, pure JavaScript, no dependencies

qr-scanner – High performance with WebWorker support

QuaggaJS – Advanced barcode reader supporting multiple formats

For beginners, html5-qrcode is recommended due to its comprehensive documentation and built-in UI components.

Why is my QR Code scanner not working?

Common issues and solutions:

Camera permissions: Ensure your website is served over HTTPS and user has granted camera access

Browser compatibility: Some browsers don’t support camera access, use file-based scanning as fallback

QR Code quality: Ensure sufficient lighting, proper distance, and clean QR codes

Library initialization: Check console for JavaScript errors and ensure proper library loading


// Error handling example
html5QrCode.start(cameraId, config, onScanSuccess)
.catch(err => {
  if (err.includes("NotAllowedError")) {
    console.log("Camera permission denied");
  } else if (err.includes("NotFoundError")) {
    console.log("No camera found");
  }
});

// Error handling example

html5QrCode.start(cameraId, config, onScanSuccess)

.catch(err => {

if (err.includes("NotAllowedError")) {

console.log("Camera permission denied");

} else if (err.includes("NotFoundError")) {

console.log("No camera found");

}

});

How can I scan QR codes from uploaded image files?

You can enable file-based QR code scanning for users to upload images:


<input type="file" id="qr-input-file" accept="image/*">
<div id="reader"></div>

<script>
const html5QrCode = new Html5Qrcode("reader");
const fileInput = document.getElementById('qr-input-file');

fileInput.addEventListener('change', e => {
  if (e.target.files.length == 0) return;
  
  const imageFile = e.target.files[0];
  html5QrCode.scanFile(imageFile, true)
    .then(decodedText => {
      console.log(`QR Code: ${decodedText}`);
    })
    .catch(err => {
      console.log(`Error: ${err}`);
    });
});
</script>

const html5QrCode = new Html5Qrcode("reader");

const fileInput = document.getElementById('qr-input-file');

fileInput.addEventListener('change', e => {

if (e.target.files.length == 0) return;

const imageFile = e.target.files[0];

html5QrCode.scanFile(imageFile, true)

.then(decodedText => {

console.log(`QR Code: ${decodedText}`);

})

.catch(err => {

console.log(`Error: ${err}`);

});

</script>

How do I configure the QR scanner camera settings?

You can configure various camera settings for optimal scanning:


const config = {
  fps: 10,                    // Frames per second
  qrbox: {                   // Scanning area
    width: 250, 
    height: 250
  },
  aspectRatio: 1.777778,     // 16:9 aspect ratio
  disableFlip: false,        // Allow horizontal flip
  videoConstraints: {
    facingMode: "environment" // Use back camera
  }
};

// For specific camera
Html5Qrcode.getCameras().then(cameras => {
  if (cameras && cameras.length) {
    const cameraId = cameras[0].id;
    html5QrCode.start(cameraId, config, onScanSuccess);
  }
});

const config = {

fps: 10, // Frames per second

qrbox: { // Scanning area

width: 250,

height: 250

aspectRatio: 1.777778, // 16:9 aspect ratio

disableFlip: false, // Allow horizontal flip

videoConstraints: {

facingMode: "environment" // Use back camera

}

};

// For specific camera

Html5Qrcode.getCameras().then(cameras => {

if (cameras && cameras.length) {

const cameraId = cameras[0].id;

html5QrCode.start(cameraId, config, onScanSuccess);

}

});

Can I scan multiple QR codes simultaneously?

Most JavaScript QR scanners scan one code at a time by default. However, you can implement continuous scanning:


let scannedCodes = new Set();

function onScanSuccess(decodedText, decodedResult) {
  if (!scannedCodes.has(decodedText)) {
    scannedCodes.add(decodedText);
    console.log(`New QR Code: ${decodedText}`);
    
    // Don't stop scanning, continue for more codes
    // For multiple codes, avoid stopping the scanner
  }
}

// For batch scanning from images, use libraries like jsQR
// that can process entire image areas

let scannedCodes = new Set();

function onScanSuccess(decodedText, decodedResult) {

if (!scannedCodes.has(decodedText)) {

scannedCodes.add(decodedText);

console.log(`New QR Code: ${decodedText}`);

// Don't stop scanning, continue for more codes

// For multiple codes, avoid stopping the scanner

}

// For batch scanning from images, use libraries like jsQR

// that can process entire image areas

Advanced libraries like Scanbot SDK support true multi-code scanning in a single session.

How do I handle QR scanner permissions and errors?

Proper error handling is crucial for a good user experience:


async function startScanner() {
  try {
    // Check if cameras are available
    const cameras = await Html5Qrcode.getCameras();
    if (cameras.length === 0) {
      throw new Error("No cameras found");
    }

    await html5QrCode.start(
      { facingMode: "environment" },
      { fps: 10, qrbox: 250 },
      onScanSuccess,
      onScanFailure
    );
  } catch (err) {
    handleScannerError(err);
  }
}

function handleScannerError(err) {
  if (err.name === 'NotAllowedError') {
    alert('Camera permission denied. Please allow camera access.');
  } else if (err.name === 'NotFoundError') {
    alert('No camera found on this device.');
  } else if (err.name === 'NotSupportedError') {
    alert('Camera not supported on this browser.');
  } else {
    console.error('Scanner error:', err);
  }
}

async function startScanner() {

try {

// Check if cameras are available

const cameras = await Html5Qrcode.getCameras();

if (cameras.length === 0) {

throw new Error("No cameras found");

}

await html5QrCode.start(

{ facingMode: "environment" },

{ fps: 10, qrbox: 250 },

onScanSuccess,

onScanFailure

);

} catch (err) {

handleScannerError(err);

}

function handleScannerError(err) {

if (err.name === 'NotAllowedError') {

alert('Camera permission denied. Please allow camera access.');

} else if (err.name === 'NotFoundError') {

alert('No camera found on this device.');

} else if (err.name === 'NotSupportedError') {

alert('Camera not supported on this browser.');

} else {

console.error('Scanner error:', err);

}

What QR code formats are supported by JavaScript scanners?

Modern JavaScript QR scanners support various code formats:

2D Codes: QR Code, Data Matrix, Aztec, PDF417

1D Barcodes: Code 128, Code 39, Code 93, EAN-13, EAN-8, UPC-A, UPC-E

html5-qrcode supported formats:


const config = {
  formatsToSupport: [
    Html5QrcodeSupportedFormats.QR_CODE,
    Html5QrcodeSupportedFormats.CODE_128,
    Html5QrcodeSupportedFormats.CODE_39,
    Html5QrcodeSupportedFormats.EAN_13,
    Html5QrcodeSupportedFormats.EAN_8,
    Html5QrcodeSupportedFormats.UPC_A,
    Html5QrcodeSupportedFormats.UPC_E
  ]
};

const config = {

formatsToSupport: [

Html5QrcodeSupportedFormats.QR_CODE,

Html5QrcodeSupportedFormats.CODE_128,

Html5QrcodeSupportedFormats.CODE_39,

Html5QrcodeSupportedFormats.EAN_13,

Html5QrcodeSupportedFormats.EAN_8,

Html5QrcodeSupportedFormats.UPC_A,

Html5QrcodeSupportedFormats.UPC_E

]

};

How can I improve QR code scanning performance?

Several techniques can improve scanning performance:

Optimize scanner configuration:


const optimizedConfig = {
  fps: 10,                    // Don't exceed 15 fps
  qrbox: { width: 250, height: 250 }, // Smaller scan area
  aspectRatio: 1.0,          // Square aspect ratio
  disableFlip: true,         // Disable if not needed
  experimentalFeatures: {
    useBarCodeDetectorIfSupported: true // Use native API when available
  }
};

const optimizedConfig = {

fps: 10, // Don't exceed 15 fps

qrbox: { width: 250, height: 250 }, // Smaller scan area

aspectRatio: 1.0, // Square aspect ratio

disableFlip: true, // Disable if not needed

experimentalFeatures: {

useBarCodeDetectorIfSupported: true // Use native API when available

}

};

Use WebWorkers: Libraries like qr-scanner automatically use WebWorkers to keep UI responsive

Optimize QR codes: Ensure high contrast, proper size (minimum 2cm x 2cm), and clean printing

Camera positioning: Maintain proper distance and avoid shaky movements

How do I stop the QR scanner and clean up resources?

Properly stopping the scanner prevents memory leaks and camera access issues:


// Stop the scanner
async function stopScanner() {
  try {
    await html5QrCode.stop();
    console.log("Scanner stopped successfully");
  } catch (err) {
    console.error("Error stopping scanner:", err);
  }
}

// Clear the scanner UI (for Html5QrcodeScanner)
function clearScanner() {
  html5QrcodeScanner.clear();
}

// Complete cleanup
function destroyScanner() {
  if (html5QrCode.getState() === Html5QrcodeScannerState.SCANNING) {
    html5QrCode.stop().then(() => {
      html5QrCode.clear();
    });
  }
}

// Call on page unload
window.addEventListener('beforeunload', destroyScanner);

// Stop the scanner

async function stopScanner() {

try {

await html5QrCode.stop();

console.log("Scanner stopped successfully");

} catch (err) {

console.error("Error stopping scanner:", err);

}

// Clear the scanner UI (for Html5QrcodeScanner)

function clearScanner() {

html5QrcodeScanner.clear();

}

// Complete cleanup

function destroyScanner() {

if (html5QrCode.getState() === Html5QrcodeScannerState.SCANNING) {

html5QrCode.stop().then(() => {

html5QrCode.clear();

});

}

// Call on page unload

window.addEventListener('beforeunload', destroyScanner);

Can QR scanners work offline in JavaScript?

Yes, JavaScript QR scanners can work offline once the library is loaded:

Client-side processing: All QR code decoding happens in the browser using JavaScript and WebAssembly

No server required: After initial library download, scanning works without internet connection

Local file scanning: Users can scan QR codes from local image files without uploading anywhere


// Service Worker for offline functionality
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('qr-scanner-v1').then(cache => {
      return cache.addAll([
        '/html5-qrcode.min.js',
        '/qr-scanner-worker.min.js',
        // Add other required assets
      ]);
    })
  );
});

// Service Worker for offline functionality

self.addEventListener('install', event => {

event.waitUntil(

caches.open('qr-scanner-v1').then(cache => {

return cache.addAll([

'/html5-qrcode.min.js',

'/qr-scanner-worker.min.js',

// Add other required assets

]);

})

);

});

Libraries like jsQR and qr-scanner are designed for complete offline operation.

How do I customize the QR scanner UI appearance?

You can customize the scanner UI with CSS and configuration options:


/* Custom CSS for html5-qrcode scanner */
#reader {
  border: 2px solid #007bff;
  border-radius: 10px;
  overflow: hidden;
}

#reader video {
  border-radius: 8px;
}

#reader__dashboard_section {
  background: #f8f9fa;
  padding: 20px;
}

#reader__scan_region {
  border: 3px solid #28a745 !important;
}

/* Hide unwanted elements */
#reader img[alt="Info icon"] {
  display: none;
}

/* Custom buttons */
button {
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: bold;
}

/* Custom CSS for html5-qrcode scanner */

#reader {

border: 2px solid #007bff;

border-radius: 10px;

overflow: hidden;

}

#reader video {

border-radius: 8px;

}

#reader__dashboard_section {

background: #f8f9fa;

padding: 20px;

}

#reader__scan_region {

border: 3px solid #28a745 !important;

}

/* Hide unwanted elements */

#reader img[alt="Info icon"] {

display: none;

}

/* Custom buttons */

button {

background: linear-gradient(45deg, #007bff, #0056b3);

color: white;

border: none;

padding: 12px 24px;

border-radius: 6px;

font-weight: bold;

}


// Custom configuration
const html5QrcodeScanner = new Html5QrcodeScanner(
  "reader",
  { 
    fps: 10, 
    qrbox: { width: 300, height: 300 },
    aspectRatio: 1.0,
    showTorchButtonIfSupported: true,
    showZoomSliderIfSupported: true
  },
  /* verbose= */ false
);

// Custom configuration

const html5QrcodeScanner = new Html5QrcodeScanner(

"reader",

{

fps: 10,

qrbox: { width: 300, height: 300 },

aspectRatio: 1.0,

showTorchButtonIfSupported: true,

showZoomSliderIfSupported: true

/* verbose= */ false

);

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

Digital Kiosk Software Market 2025

Communication / Consulting / Design / Development / Digital Kiosk / Digital Signage

An area that I am constantly monitoring for REALFUSION, to offer our customers the best solution for their requirements. The global digital kiosk software market is experiencing rapid growth, valued at $7.48 billion in 2023 and projected to reach $17.02 billion by 2030 with a 12.6% CAGR (Compound Annual Growth Rate). The broader interactive kiosk […]

Indoor Navigation: Diving Into My New RabbitHole / Maze – Part 2

Design / API / Development / Indoor / Javascript / Navigation

Part 1 Finding Your Way: Open Source Wayfinding Solutions 1. The Old Guard: UC Davis Wayfinding Let’s start with the granddaddy of them all – the UC Davis Wayfinding plugin. This jQuery-based solution has been around the block and back, with over 100 stars on GitHub and a track record of actually working in real-world […]

Indoor Navigation: Diving Into My New RabbitHole / Maze – Part 1

Design / API / Development / Indoor / Javascript / Navigation

I recently completed a comprehensive demo setup for our Digital Kiosk Solutions at REALFUSION. While reviewing each module we offer, I integrated quick samples and listed available options, including external solutions. Indoor navigation represents a significant market opportunity, with 6-10 viable solution providers currently available. However, most face a critical challenge: their pricing models and […]

Alexander

I am a full-stack developer. My expertise include:

Server, Network and Hosting Environments
Data Modeling / Import / Export
Business Logic
API Layer / Action layer / MVC
User Interfaces
User Experience
Understand what the customer and the business needs

I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.

Finding the Right QR Code Scanner for Your JavaScript Project

Table of Contents

Quick Comparison Table

1. jsQR – Best for Static Image Processing

Installation

Basic Usage Example

2. html5-qrcode – Best for Full-Featured Applications

Installation

Quick Setup Example

Advanced Camera Control Example

3. qr-scanner (nimiq) – Best for Performance

Installation

Basic Implementation

Advanced qr-scanner Example with Camera Selection

4. Browser Barcode Detection API – Future-Proof Solution

Feature Detection and Usage

Complete HTML Example – Multiple Libraries Demo

Recommendations by Use Case

For Static Image Processing

For Quick Prototypes

For Performance-Critical Applications

For Mobile-First Applications

For Future-Proof Applications

For Production Applications

Performance Tips

Additional Resources

Learning Resources

Alternative Libraries

Commercial Solutions

Browser Compatibility

Thoughts

Chrome: How to use your camera without asking for permission?

Method 1: Chrome Settings

Method 2: Address Bar Permission

Method 3: For All Sites (Less Secure)

Command Line Flag (Advanced)

FAQ

How do I create a QR Code Scanner in JavaScript?

What is the best JavaScript library for QR Code scanning?

Why is my QR Code scanner not working?

How can I scan QR codes from uploaded image files?

How do I configure the QR scanner camera settings?

Can I scan multiple QR codes simultaneously?

How do I handle QR scanner permissions and errors?

What QR code formats are supported by JavaScript scanners?

How can I improve QR code scanning performance?

How do I stop the QR scanner and clean up resources?

Can QR scanners work offline in JavaScript?

How do I customize the QR scanner UI appearance?

RELATED POSTS

Digital Kiosk Software Market 2025

Indoor Navigation: Diving Into My New RabbitHole / Maze – Part 2

Indoor Navigation: Diving Into My New RabbitHole / Maze – Part 1

Alexander

DISCOVER.

.highlights

.highlights