{"id":16185,"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.","status":"active","version":"1.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/nimiq/qr-scanner","tags":["javascript","qr","scanner","reader","js","lightweight","small","fast","typescript"],"install":[{"cmd":"npm install qr-scanner","lang":"bash","label":"npm"},{"cmd":"yarn add qr-scanner","lang":"bash","label":"yarn"},{"cmd":"pnpm add qr-scanner","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This is the primary ESM import for bundlers like Webpack or Rollup. Ensure your project is configured for module resolution.","wrong":"const QrScanner = require('qr-scanner');","symbol":"QrScanner","correct":"import QrScanner from 'qr-scanner';"},{"note":"For direct ES Module usage in a browser `\n\n\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."},"warnings":[{"fix":"Ensure `qr-scanner-worker.min.js` is in your public assets directory and set `QrScanner.workerScript = 'path/to/qr-scanner-worker.min.js';` before initializing `QrScanner`. For bundlers, consult your bundler's documentation on how to handle web worker scripts or static assets.","message":"The `qr-scanner-worker.min.js` file is loaded dynamically and *must* be accessible at the path specified by `QrScanner.workerScript`. If you're not using a bundler that handles web workers (like some versions of Webpack with appropriate loaders), or if your bundler doesn't copy the file to the correct output directory, you will need to manually copy `qr-scanner-worker.min.js` to a public path where your main script can find it.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For CommonJS environments or older build setups, explicitly use `require('qr-scanner/qr-scanner.umd.min.js')`. For modern browser usage or bundlers, use `import QrScanner from 'qr-scanner';` within a `