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.

Usage

Plain

1. Import the library:

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

2. Create HTML

You need both a <video> and a <canvas> element:

<video></video>
<canvas></canvas>

3. Instanciate Library

const qrScanner = new QrScannerLib(videoElem, canvasElem, (text) =>{
  console.log('decoded qr code:', text)
})

As X-Element

Alternatively you can use this library as an X-Element:

1. Import the element:

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

2. Create HTML

You need both a <video> and a <canvas> element:

<x-qr-scanner>
    <video muted autoplay playsinline></video>
    <canvas></canvas>
</x-qr-scanner>

3. Instanciate Library

const qrScanner = new QrScanner()

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-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 build

Debug Mode

To enable debug mode:

qrScanner._qrWorker.postMessage({
    type: 'setDebug',
    data: true
});

To handle the debug image:

qrScanner._qrWorker.addEventListener('message', event => {
  const type = event.data.type;
  const data = event.data.data;
  if (type === 'debugImage') {
      canvasContext.putImageData(data, 0, 0);
  }
});