=koder=

QR/bar code scanner for the Browser

🚀 Features

• QR/barcode module implemented in WebAssembly
• 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 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)
• Barcode support (UPC-A, UPC-E, EAN-8, EAN-13, I25)
• Support for UPN QR (Slovenia only)
• Emscripten-zbar-sdk Docker image, Dockerfile
• ReactJS component
• Vanilla JS example

💡 Demo

https://qr.maslick.tech

⚡ Installation

1. Builder image

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

2. Build WASM artifacts (qr, barcode):

docker run -e INPUT_FILE=zbar/qr.cpp -e OUTPUT_FILE=qr -v $(pwd):/app maslick/emscripten-zbar-sdk make -B
docker run -e INPUT_FILE=zbar/barcode.cpp -e OUTPUT_FILE=barcode -v $(pwd):/app maslick/emscripten-zbar-sdk make -B

Override all defaults by specifying INPUT_FILE, OUTPUT_FILE, OUTPUT_DIR, e.g. for barcode:

docker run \
  -e INPUT_FILE=zbar/barcode.cpp \
  -e OUTPUT_FILE=barcode \
  -e OUTPUT_DIR=test \
  -v $(pwd):/app \
  maslick/emscripten-zbar-sdk make -B

Clean the build artifacts:

OUTPUT_DIR=public/wasm OUTPUT_FILE=qr make clean
OUTPUT_DIR=public/wasm OUTPUT_FILE=barcode make clean

3. Use the resulting WASM artifacts

# Fetch dependencies
yarn install --frozen-lockfile

# Development mode
npm run start
open https://locahost:8080

# Production mode
npm run build
cd build && python3 -m http.server 8001 --bind 0.0.0.0
open http://localhost:8001

💎 BONUS: vanilla js example (qr + barcode)

# Build WASM artifacts
docker run \
  -e INPUT_FILE=zbar/all.cpp \
  -e OUTPUT_FILE=all \
  -e OUTPUT_DIR=vanilla-js/wasm \
  -v $(pwd):/app \
  maslick/emscripten-zbar-sdk make vanilla-js -B

# Serve static HTML app
cd vanilla-js && python3 -m http.server 8001 --bind 0.0.0.0
open http://localhost:8001

Clean the build artifacts:

OUTPUT_DIR=vanilla-js/wasm OUTPUT_FILE=all make clean-vanilla-js

🔭 References

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