Javascript QR Code Scanner based on Lazar Lazslo's javascript port of Google's ZXing library.
In this library, several improvements have been applied over the original port:
- Lightweight: ~33.7 kB (~12 kB gzipped) minified with Google's closure compiler.
- Improved binarizer which makes it more tolerant to shades and reflections on the screen.
- Can be configured for better performance on colored QR codes.
- Runs in a WebWorker which keeps the main / UI thread responsive.
- Works on higher resolution pictures by default.
The library supports scanning a continuous video stream from a web cam as well as scanning of single images.
See https://nimiq.github.io/qr-scanner/demo/
<script src="qr-scanner.min.js"></script>
Create a <video>
element where the web cam video stream should get rendered:
<video></video>
const qrScanner = new QrScanner(videoElem, result => console.log('decoded qr code:', result));
As an optional third parameter a specific resolution that should be worked on can be specified. The default is 400.
<script src="qr-scanner.min.js"></script>
QrScanner.scanImage(image)
.then(result => console.log(result))
.catch(error => console.log(error || 'No QR code found.'));
Supported image sources are: HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, File / Blob
Change the weights for red, green and blue in the grayscale computation to improve contrast for QR codes of a specific color:
qrScanner.setGrayscaleWeights(red, green, blue)
The project is prebuild in qr-scanner.min.js in combination with qr-scanner-worker.min.js. Building yourself is only neccessary if you want to change the code in the /src folder. Nodejs and Java are required for building.
Install required build packages:
npm install
Building:
gulp
To enable debug mode:
qrScanner._qrWorker.postMessage({
type: 'setDebug',
data: true
});
To handle the debug image:
qrScanner._qrWorker.addEventListener('message', event => {
if (event.data.type === 'debugImage') {
canvasContext.putImageData(event.data.data, 0, 0);
}
});