jl102/koder

QR/bar code scanner for the Browser

🚀 NEW: Check Out Kameroon - QR/Bar Code Scanner as a Service 🚀

=koder=

QR/bar code scanner for the Browser

💡 Demo

https://koder-prod.web.app

🚀 Features

• QR/barcode module implemented in WebAssembly
• Barcode support (ISBN, UPC-A, UPC-E, EAN-8, EAN-13, I25, ITF-14, CODE-128, CODE-39, CODE-93, CODABAR, DATABAR)
• Uses Zbar C++ library (version 0.23.90)
• Packaged as PWA (caching files with Service Worker, Add to Home Screen)
• Mobile first (can be used on a Laptop as well)
• Multiplatform (iOS, Android, Desktop)
• QR/bar code recognition logic is performed off the browser's Main thread (i.e. Web Worker)
• koder React component supports a jsqr based Web Worker (see jsQrWorker.js)
• Emscripten-zbar-sdk Docker image based on emscripten/emsdk, Dockerfile
• ReactJS component
• Vanilla JS example
• 🆕 Turn on/off the beep sound
• 🆕 Support for UPN QR (Slovenia only)
• 🆕 EU Digital Covid Certificate validator (vaccination, test), works in offline mode!
• 🆕 Emscripten v3.1.1
• 🆕 npm package

⚡ Usage

Install dependencies

npm install --global yarn
yarn install --frozen-lockfile

Run React app

npm run start
open https://locahost:8080

Productionize

npm run build                # -> build React app into ./public
npm run prod                 # -> serve static web app on port 8082
open http://localhost:8082

⚡ NPM module

npm install @maslick/koder

// CommonJS
const Koder = require('@maslick/koder');

// ES6 modules
import Koder from '@maslick/koder';

const Koder = require('@maslick/koder');
const {loadImage, createCanvas} = require("canvas");

const getImageData = async (src) => {
  const img = await loadImage(src);
  const canvas = createCanvas(img.width, img.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return {
    data: ctx.getImageData(0, 0, img.width, img.height).data,
    width: img.width,
    height: img.height
  };
};

(async () => {
  const url = 'https://raw.githubusercontent.com/maslick/koder/master/screenshots/app_1.png';
  const koder = await new Koder().initialized;
  const {data, width, height} = await getImageData(url);

  const t0 = new Date().getTime();
  const res = koder.decode(data, width, height);
  const t1 = new Date().getTime();

  console.log(`Scanned in ${t1-t0} ms`);  // Scanned in 7 ms
  console.log(res);                       // http://en.m.wikipedia.org
})();

♠️ Development

Fetch or build the Builder image

docker pull maslick/emscripten-zbar-sdk
docker build -t maslick/emscripten-zbar-sdk -f docker/Dockerfile docker

Build WASM artifacts

# Linux, Mac Intel
docker run \
  -e INPUT_FILE=zbar/qr.cpp \
  -e OUTPUT_FILE=zbar \
  -e OUTPUT_DIR=public/wasm \
  -v $(pwd):/app \
  maslick/emscripten-zbar-sdk make -B
  
# Mac M1/M2
docker run \
  --platform linux/amd64 \
  -e INPUT_FILE=zbar/qr.cpp \
  -e OUTPUT_FILE=zbar \
  -e OUTPUT_DIR=public/wasm \
  -v $(pwd):/app \
  maslick/emscripten-zbar-sdk make -B

Clean the build artifacts (if necessary):

OUTPUT_DIR=public/wasm OUTPUT_FILE=zbar make clean

🔭 References

• WebAssembly at Ebay
• Barcode Scanner WebAssembly
• zbar.wasm