New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@undecaf/zbar-wasm

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@undecaf/zbar-wasm

A WebAssembly build of the C/C++ ZBar barcode reader

0.9.6
Source
npm

Version published: 3 years ago

Weekly downloads: 6.7K; decreased by-11.74%

Maintainers: 1

Weekly downloads

Created: 3 years ago

Source

A WebAssembly build of the ZBar Bar Code Reader

Install size Open issues Total downloads License

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, EAN/GTIN-5/8/13, ISBN-10/13, ISBN-13+2, ISBN-13+5, ITF (Interleaved 2 of 5), QR Code, UPC-A/E.
Simultaneously detects multiple barcodes, also with different types
Barcodes may be oriented horizontally or vertically
Outperforms pure ECMAScript barcode scanners

Examples based on zbar-wasm

A simple online example (source code)
An equivalent example using a polyfill for the BarcodeDetector API (source code with build scripts for Rollup and esbuild)

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/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/dist/main.js'
    ⁝

with

    ⁝
  <script src="https://cdn.jsdelivr.net/npm/@undecaf/zbar-wasm/dist/index.js"></script>
  <script>
    ⁝

Including zbar-wasm as ESM or as CommonJS module

Installing:

$ npm install @undecaf/zbar-wasm
    or
$ yarn add @undecaf/zbar-wasm

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.wasm must be copied as-is (e.g. using copy-webpack-plugin, rollup-plugin-copy, esbuild-plugin-copy or similar).
zbar.wasm must be copied to the directory where the zbar-wasm module/the bundle containing that module is located.
It should be served as application/wasm so that it can be compiled in parallel with being received by the browser.

Licensing considerations

Please note that zbar-wasm is licensed under the LGPL because it is derived from an LGPL-licensed work. Therefore, bundling zbar-wasm imposes the LGPL on the bundles, too.

If you need a more liberal license for your work then the BarcodeDetector polyfill package might be an option. It does not bundle zbar-wasm but loads it at runtime (as a library), and it is under the MIT license. As an additional benefit it provides a simpler API than zbar-wasm.

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 → ZBarSymbol
Image → ZBarImage
ImageScanner → ZBarScanner

Building zbar-wasm from source

Prerequisites:

A Linux platform
GNU make, tar and curl
Docker or Podman
Node.js v12+

The Makefile 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.

To build:

$ git clone https://github.com/undecaf/zbar-wasm
$ cd zbar-wasm
$ make

If you prefer Podman as container engine then 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

License

Software: LGPL-2.1

Documentation: CC-BY-SA 4.0

Keywords

FAQs

What is @undecaf/zbar-wasm?

Is @undecaf/zbar-wasm popular?

Is @undecaf/zbar-wasm well maintained?

Package last updated on 01 Jan 2022

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.

Install

@undecaf/zbar-wasm

A WebAssembly build of the ZBar Bar Code Reader

Features

Examples based on zbar-wasm

Getting started

Using zbar-wasm as <script type="module">

Using zbar-wasm as plain <script>

Including zbar-wasm as ESM or as CommonJS module

Bundling/deploying zbar-wasm

Licensing considerations

API documentation

Building zbar-wasm from source

Credits to ...

License

Keywords

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation

Using zbar-wasm as `<script type="module">`

Using zbar-wasm as plain `<script>`