qr-scanner

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.

Demo

See https://nimiq.github.io/qr-scanner/demo/

Usage

Web Cam Scanning

1. Import the library:

<script src="qr-scanner.min.js"></script>

2. Create HTML

Create a <video> element where the web cam video stream should get rendered:

<video></video>

3. Create a QrScanner Instance

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.

Single Image Scanning

1. Import the library:

<script src="qr-scanner.min.js"></script>

2. Scan your image

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

Color Correction

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)

Build the project

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

Debug Mode

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);
  }
});