{"library":"qr-scanner","title":"Lightweight QR Code Scanner","description":"qr-scanner is a JavaScript library designed for efficient QR code scanning from both continuous video streams (webcams) and static images. Currently at version 1.4.2, it appears to be actively maintained, supported by Nimiq, and offers significant performance and accuracy advantages over older libraries like LazarSoft/jsqrcode, boasting a 2-8x higher detection rate and fewer misreads according to benchmarks. Key differentiators include its lightweight footprint (as low as 5.6 kB gzipped when `BarcodeDetector` is available), automatic utilization of the browser's native `BarcodeDetector` API for optimal performance, and its design to run in a WebWorker to keep the main UI thread responsive. The library is built upon Cosmo Wolfe's JavaScript port of Google's ZXing library, with several improvements geared towards modern web environments and optimized for colored QR codes.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install qr-scanner"],"cli":null},"imports":["import QrScanner from 'qr-scanner';","import QrScanner from './path/to/qr-scanner.min.js';","const QrScanner = require('qr-scanner/qr-scanner.umd.min.js');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>QR Scanner Demo</title>\n</head>\n<body>\n    <h1>Scan QR Code</h1>\n    <video id=\"qr-video\" style=\"width: 100%; max-width: 400px;\"></video>\n    <div id=\"qr-result\"></div>\n\n    <script type=\"module\">\n        import QrScanner from 'qr-scanner'; // Adjust path if not using a bundler\n\n        // You need to copy qr-scanner-worker.min.js to a public path or configure your bundler\n        // If qr-scanner-worker.min.js is in the same directory as this script:\n        QrScanner.workerScript = './qr-scanner-worker.min.js';\n        // If using npm and a bundler, it might be resolved automatically or you might need to copy it.\n        // If deployed to a 'dist' folder, and worker is in 'dist/':\n        // QrScanner.workerScript = '/dist/qr-scanner-worker.min.js';\n\n        const videoElement = document.getElementById('qr-video');\n        const resultElement = document.getElementById('qr-result');\n\n        const qrScanner = new QrScanner(\n            videoElement,\n            result => {\n                resultElement.textContent = `QR Code detected: ${result.data}`;\n                console.log('QR Code detected:', result.data);\n                // To stop scanning after first detection:\n                // qrScanner.stop();\n            },\n            { \n                /* your options or pass nothing */ \n                highlightScanRegion: true,\n                highlightCodeOutline: true,\n                returnDetailedScanResult: true\n            }\n        );\n\n        // Start scanning immediately when the page loads\n        qrScanner.start().then(() => {\n            console.log('QR Scanner started');\n        }).catch(err => {\n            console.error('Failed to start QR Scanner:', err);\n            resultElement.textContent = `Error starting scanner: ${err.message || err}`;\n        });\n\n        // Optional: Stop scanner when component unmounts or page navigates\n        // window.addEventListener('beforeunload', () => {\n        //     qrScanner.stop();\n        // });\n\n    </script>\n</body>\n</html>\n","lang":"typescript","description":"Demonstrates how to set up `qr-scanner` to read QR codes from a live webcam feed in a browser environment, displaying the result on the page. It highlights the essential worker script configuration.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}