=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
âš¡ 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