Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/maslick/koder

QR/bar code scanner for the Browser
https://github.com/maslick/koder

barcode covid-19 covid-certificate ean13 ean8 emscripten i25 pwa qr qrcode react upca upce wasm webassembly zbar

Last synced: 6 days ago
JSON representation

QR/bar code scanner for the Browser

Host: GitHub
URL: https://github.com/maslick/koder
Owner: maslick
License: mit
Created: 2020-01-16T10:44:33.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-11-09T17:24:30.000Z (about 1 year ago)
Last Synced: 2025-01-07T07:04:41.289Z (14 days ago)
Topics: barcode, covid-19, covid-certificate, ean13, ean8, emscripten, i25, pwa, qr, qrcode, react, upca, upce, wasm, webassembly, zbar
Language: JavaScript
Homepage: https://koder-prod.web.app
Size: 3.72 MB
Stars: 250
Watchers: 12
Forks: 28
Open Issues: 4
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

README

        


  

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

  



# =koder=

QR/bar code scanner for the Browser

[![npm](https://img.shields.io/npm/v/@maslick/koder.svg)](https://www.npmjs.com/package/@maslick/koder)

[![Build Status](https://github.com/maslick/koder-react/actions/workflows/prod.yml/badge.svg)](https://github.com/maslick/koder-react/actions?query=workflow%3Abuild)

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)

## :bulb: 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](https://github.com/mchehab/zbar))

* 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](https://www.npmjs.com/package/jsqr) based Web Worker (see [jsQrWorker.js](./public/jsQrWorker.js))

* Emscripten-zbar-sdk [Docker image](https://hub.docker.com/r/maslick/emscripten-zbar-sdk) based on `emscripten/emsdk`, [Dockerfile](./docker/Dockerfile)

* ReactJS [component](./src/components/scan.js)

* Vanilla JS [example](https://github.com/maslick/koder-vanilla-js)

* :new: Turn on/off the beep sound

* :new: Support for UPN QR (Slovenia only)

* :new: EU Digital Covid Certificate validator (vaccination, test), works in ``offline`` mode!

* :new: Emscripten v3.1.1

* :new: npm package



  

  



## ⚡ Usage

### Install dependencies

```shell

npm install --global yarn

yarn install --frozen-lockfile

```

### Run React app

```shell

npm run start

open https://locahost:8080

```

### Productionize

```shell

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

```

```javascript

// CommonJS

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

// ES6 modules

import Koder from '@maslick/koder';

```

```javascript

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

})();

```

## :spades: Development

### Fetch or build the Builder image

```shell

docker pull maslick/emscripten-zbar-sdk

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

```

### Build WASM artifacts

```shell

# 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):

```shell

OUTPUT_DIR=public/wasm OUTPUT_FILE=zbar make clean

```

## 🔭 References

* [WebAssembly at Ebay](https://tech.ebayinc.com/engineering/webassembly-at-ebay-a-real-world-use-case/)

* [Barcode Scanner WebAssembly](https://barkeywolf.consulting/posts/barcode-scanner-webassembly/)

* [zbar.wasm](https://github.com/samsam2310/zbar.wasm)