@undecaf/zbar-wasm
Advanced tools
This project was forked from ZBar.wasm, a WebAssembly build of the ZBar Bar Code Reader written in C/C++.
ImageData and
RGB/grayscale ArrayBuffer objects:warning: v0.10.0 contains breaking changes regarding bundling, please refer to section Bundling/deploying zbar-wasm.
A simple example: on GitHub (source code), on CodePen
A polyfill for the BarcodeDetector Web API:
on GitHub
(source code
with build scripts for Rollup and esbuild),
on CodePen
<script type="module">An example that scans a static image file:
<!DOCTYPE html>
<html>
<body>
<img id="img" crossorigin="anonymous" src="https://raw.githubusercontent.com/undecaf/zbar-wasm/master/tests/img/qr_code.png">
<pre id="result"></pre>
<script type="module">
import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.10.0/dist/main.js'
(async () => {
const
img = document.getElementById('img'),
result = document.getElementById('result'),
canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
await img.decode()
canvas.width = img.naturalWidth
canvas.height = img.naturalHeight
context.drawImage(img, 0, 0)
const
imageData = context.getImageData(0, 0, canvas.width, canvas.height),
symbols = await zbarWasm.scanImageData(imageData);
symbols.forEach(s => s.rawData = s.decode())
result.innerText = JSON.stringify(symbols, null, 2)
})()
</script>
</body>
</html>
<script>Almost identical to the snippet above, just replace the lines
⁝
<script type="module">
import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.10.0/dist/main.js'
⁝
with
⁝
<script src="https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.10.0/dist/index.js"></script>
<script>
⁝
Installing:
$ npm install @undecaf/zbar-wasm@0.10.0
or
$ yarn add @undecaf/zbar-wasm@0.10.0
Using:
import ... from '@undecaf/zbar-wasm' pulls the ES module from the package,
require('@undecaf/zbar-wasm') pulls the CommonJS module.
Please refer to the API documentation for what can be imported/required.
A simple ES module that scans a static image file:
import { createCanvas, loadImage } from 'canvas';
import { scanImageData } from '@undecaf/zbar-wasm';
(async (url) => {
const
img = await loadImage(url),
canvas = createCanvas(img.width, img.height),
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0)
const
imageData = ctx.getImageData(0, 0, img.width, img.height),
// @ts-ignore
symbols = await scanImageData(imageData);
console.log(ssymbols[0]?.typeName, ymbols[0]?.decode())
})('https://raw.githubusercontent.com/undecaf/zbar-wasm/master/tests/img/qr_code.png')
For a CommonJS module, just replace the first lines with
const { createCanvas, loadImage } = require('canvas');
const { scanImageData } = require('@undecaf/zbar-wasm');
zbar-wasm delegates barcode scanning to the WebAssembly code in file zbar.wasm.
This file is part of the package and can be provided at runtime in different ways:
application/wasmzbar.wasm as inline data.The package entry points
of zbar-wasm have been chosen so that bundlers will select the
appropriate module by default in most cases. zbar.wasm as inline data requires an
export condition
in the bundler configuration.
The build process of zbar-wasm tests bundling with
Webpack, Rollup and
esbuild and also tests the resulting bundles.
The bundler configuration files
tests/{webpack,rollup,esbuild}.config.js
may be used as a reference of how to achieve a particular bundling result. They cover the following
combinations of platform, module type and zbar.wasm provisioning:
| Platform → | Node.js | Browser | ||
|---|---|---|---|---|
zbar.wasm↓ | ESM | CommonJS | ESM | Script |
| from CDN | :white_check_mark: | :white_check_mark: | ||
| bundled | :white_check_mark: | :white_check_mark: | :white_check_mark: | |
| inlined | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
Owing to the predecessor of this project, samsam2310/zbar.wasm, a wiki and an extensive API Reference are already available. Many thanks to the author!
Please note that a few classes have been renamed compared to the documentation in order to avoid conflicts with built-in JavaScript class names:
Symbol → ZBarSymbolImage → ZBarImageImageScanner → ZBarScannerBarcodeDetector Web APIThe BarcodeDetector polyfill
package (in this repository, by the same author) is based on
zbar-wasm but provides a standardized, higher-level and more flexible API.
Prerequisites:
To build:
$ git clone https://github.com/undecaf/zbar-wasm
$ cd zbar-wasm
$ make
The make command runs emscripten in a container, compiling the C/C++
sources of the ZBar Bar Code Reader
to WebAssembly. It also compiles and bundles the TypeScript glue code
and runs the tests in Node.js on the host machine.
If you prefer Podman as container engine then the provided Makefile needs
to be edited before running make: replace the line
EM_ENGINE = $(EM_DOCKER)
with
EM_ENGINE = $(EM_PODMAN)
Software: LGPL-2.1
Documentation: CC-BY-SA 4.0
FAQs
A WebAssembly build of the C/C++ ZBar barcode reader
We found that @undecaf/zbar-wasm demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A survey of 500 cybersecurity pros reveals high pay isn't enough—lack of growth and flexibility is driving attrition and risking organizational security.
Product
Socket, the leader in open source security, is now available on Google Cloud Marketplace for simplified procurement and enhanced protection against supply chain attacks.
Security News
Corepack will be phased out from future Node.js releases following a TSC vote.