Security News
PyPI Now Supports iOS and Android Wheels for Mobile Python Development
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
By Sarah Gooding - Feb 12, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@undecaf/zbar-wasm
Advanced tools
A WebAssembly build of the ZBar Bar Code Reader
This project was forked from ZBar.wasm, a WebAssembly build of the ZBar Bar Code Reader written in C/C++.
Features
- Provided as minified ES module, CommonJS module and plain script
- Runs in modern browsers, in Node.js and also in workers
- Supports Code-39, Code-93, Code-128, Codabar, Databar/Expanded, EAN/GTIN-5/8/13, ISBN-10/13, ISBN-13+2, ISBN-13+5, ITF (Interleaved 2 of 5), QR Code, UPC-A/E.
- Detects multiple barcodes per frame, also with different types
- Barcodes may be oriented horizontally or vertically
- Scans
ImageDataand RGB/grayscaleArrayBufferobjects - Outperforms pure JavaScript barcode scanners
Examples based on zbar-wasm
-
A simple example: on GitHub (source code), on CodePen
-
A polyfill for the
BarcodeDetectorWeb API: on GitHub (source code with build scripts for Rollup and esbuild), on CodePen
Getting started
Using zbar-wasm as <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/test/img/qr_code.png">
<pre id="result"></pre>
<script type="module">
import * as zbarWasm from 'https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.9.13/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>
Using zbar-wasm as plain <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.9.13/dist/main.js'
⁝
with
⁝
<script src="https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm@0.9.13/dist/index.js"></script>
<script>
⁝
Including zbar-wasm as ESM or as CommonJS module
Installing:
$ npm install @undecaf/zbar-wasm@0.9.13
or
$ yarn add @undecaf/zbar-wasm@0.9.13
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 Node.js example that scans a static image file:
const { createCanvas, loadImage } = require('canvas');
const { scanImageData } = require('@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(symbols[0].typeName, symbols[0].decode());
}) ('https://raw.githubusercontent.com/undecaf/zbar-wasm/master/test/img/qr_code.png');
Bundling/deploying zbar-wasm
zbar-wasm loads the WebAssembly file zbar.wasm at runtime. zbar.wasm must be located in the same directory
as the zbar-wasm <script> or module, be it on a file system or at a remote endpoint.
This must be observed when bundling zbar-wasm or deploying it to a server:
@undecaf/zbar-wasm/dist/zbar.wasmmust be copied as-is (e.g. usingcopy-webpack-plugin,rollup-plugin-copy,esbuild-plugin-copyor similar).zbar.wasmmust be copied to the directory where the zbar-wasm module/the bundle containing that module is located.- It should be served as
application/wasmso that it can be compiled in parallel with being received by the browser.
API documentation
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→ZBarScanner
BarcodeDetector Web API
The 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.
Building zbar-wasm from source
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)
Credits to ...
- samsam2310 for providing invaluable information in his zbar.wasm repository
- mchehab for maintaining zbar
- the emscripten folks for their compiler toolchain
- the contributors to this package
License
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 6,019 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.
Package last updated on 22 Apr 2023
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.
Related posts
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
By Sarah Gooding - Feb 11, 2025
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025