🚀 NEW: Check Out Kameroon - QR/Bar Code Scanner as a Service 🚀
QR/bar code scanner for the Browser
- 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
offlinemode! - 🆕 Emscripten v3.1.1
- 🆕 npm package
npm install --global yarn
yarn install --frozen-lockfilenpm run start
open https://locahost:8080npm run build # -> build React app into ./public
npm run prod # -> serve static web app on port 8082
open http://localhost:8082npm 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
})();docker pull maslick/emscripten-zbar-sdk
docker build -t maslick/emscripten-zbar-sdk -f docker/Dockerfile docker# 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 -BOUTPUT_DIR=public/wasm OUTPUT_FILE=zbar make clean![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent