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