@impactdk/barcode-scanner

barcode-scanner

A barcode scanner module, using a webassembly module built on ZBar, which supports a variety of different barcodes.

Installation

npm install --save @impactdk/barcode-scanner

As the default decoder for the scanner is dependant on a wasm module running in a worker, some assets need to be installed from the module and into the public assets of your own. It is advised to do this as part of your build:

install-wasm-decoder ./path/to/your/assets

This path is then later needed in the configuration of the decoder.

Using the module

import { WasmDecoder, Scanner, IBarcode } from "@impactdk/barcode-scanner";

const videoElement: HTMLVideoElement = document.getElementById("scanner-video");

const decoder = WasmDecoder.getInstance("/public/path"); // A directory where the installed wasm decoder assets are made publicly available.
const scanner = new Scanner(videoElement, decoder, handleBarcode);

scanner.start();

function handleBarcode(barcode: IBarcode): void {
  // Do something with the barcode...
}

// Scanner and decoder (when using included wasm decoder) must be disposed of properly to stop underlying running processes.
function teardown(): void {
  scanner.stop();
  WasmDecoder.removeInstance();
}

Code splitting

Include the submodule that checks the user's client for support, then lazily import a module using the scanner.

// lazy.ts
import { isBarcodeScannerSupported } from "@impactdk/barcode-scanner/lazy";

if (isBarcodeScannerSupported) {
  const videoElement: HTMLVideoElement = document.getElementById("scanner-video");

  import("./scanner-module")
    .then(mod => ...);
} else {
  console.log("Barcode scanner is not supported...");
}

// scanner-module.ts
import { WasmDecoder, Scanner, IBarcode } from "@impactdk/barcode-scanner";

...