@undecaf/zbar-wasm
Advanced tools
Readme
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: zbar-wasm version 0.10 contains breaking changes with respect to version 0.9, 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.1/dist/index.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.1/dist/index.js'
⁝
with
⁝
<script src="https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.10.1/dist/index.js"></script>
<script>
⁝
Installing:
$ npm install @undecaf/zbar-wasm@0.10.1
or
$ yarn add @undecaf/zbar-wasm@0.10.1
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),
symbols = await scanImageData(imageData);
console.log(ssymbols[0]?.typeName, symbols[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 provides ESM and CommonJS modules for Node.js and browsers. One of them needs to be
bundled in your application. In any case, barcode scanning is delegated to the WebAssembly code
in file zbar.wasm. At runtime, this file can be provided in different ways depending on the
bundling configuration and on which zbar-wasm module was emitted by the bundler:
application/wasm
so that it can be compiled in parallel with being received.zbar.wasm as inline data.This overview shows which modules are available in zbar-wasm:
| Path in package | Module type | Node core modules polyfilled (suitable for browsers) | zbar.wasm inlined |
|---|---|---|---|
/dist/index.mjs | ESM | :heavy_check_mark: | |
/dist/index.js | CommonJS | :heavy_check_mark: | |
/dist/main.mjs | ESM | ||
/dist/main.cjs | CommonJS | ||
/dist/inlined/index.mjs | ESM | :heavy_check_mark: | :heavy_check_mark: |
/dist/inlined/index.js | CommonJS | :heavy_check_mark: | :heavy_check_mark: |
/dist/inlined/main.mjs | ESM | :heavy_check_mark: | |
/dist/inlined/main.cjs | CommonJS | :heavy_check_mark: |
The package entry points of zbar-wasm have been chosen so that bundlers will emit the
appropriate module by default in most cases. However, zbar.wasm as inline data requires a suitable
export condition in the bundler configuration, typically 'zbar-inlined'.
Please refer to the exports section of package.json for details.
Building zbar-wasm runs bundling tests 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. Each of them covers
the following combinations of platforms, module types and zbar.wasm provisioning for the
respective bundler:
zbar.wasm | Node module types | Browser module types |
|---|---|---|
| loaded from CDN | ESM, plain <script> | |
| bundled as asset | ESM, CommonJS | ESM |
| inlined in module | ESM, CommonJS | ESM, plain <script> |
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:
make, tar and curlTo build:
$ git clone https://github.com/undecaf/zbar-wasm
$ cd zbar-wasm
.testcaferc.json (supported browsers).tests/src/ports.js.EM_ENGINE = $(EM_DOCKER)
EM_ENGINE = $(EM_PODMAN)
Makefile.$ make
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 and in the selected browser(s) on the host machine.Software: LGPL-2.1
Documentation: CC-BY-SA 4.0
FAQs
A WebAssembly build of the C/C++ ZBar barcode reader
The npm package @undecaf/zbar-wasm receives a total of 4,351 weekly downloads. As such, @undecaf/zbar-wasm popularity was classified as popular.
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
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.