npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@soghband/zxing-library-4ng4

v0.5.2

Published

TypeScript port of ZXing multi-format 1D/2D barcode image processing library, with Code128 and ITF support.

Downloads

1

Readme

ZXing

Runs on your favorite ECMAScript ecosystem

If it doesn't, we gonna make it.

What is ZXing?

ZXing ("zebra crossing") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.

Supported Formats

See Projects and Milestones for what is currently done and what's planned next. 👀

| 1D product | 1D industrial | 2D | ---------------------- | -------------------- | -------------- | ~UPC-A~ | ~Code 39~ | QR Code | ~UPC-E~ | ~Code 93~ | Data Matrix (in-progress) | ~EAN-8~ | Code 128 (no docs) | ~Aztec (beta)~ | EAN-13 (in-progress) | ~Codabar~ | PDF 417 (in-progress) | | ITF (no docs) | ~MaxiCode~ | | ~RSS-14~ | | | ~RSS-Expanded~ |

Status

Build Status

NPM version npm Dependencies

Codacy Badge Maintainability Test Coverage

Demo

See Live Preview in browser.

Note: All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recomended.

Usage

Instalation

npm i @zxing/library --save

or

yarn add @zxing/library

Environments

Examples below are for QR barcode, all other supported barcodes work similary.

Browser

To use from JS you need to include what you need from build/umd folder (for example zxing.min.js).

Browser Support

The browser layer is using the MediaDevices web API which is not supported by older browsers.

You can use external polyfills like WebRTC adapter to increase browser compatiblity.

Also, note that the library is using the TypedArray (Int32Array, Uint8ClampedArray, etc.) which are not available in older browsers (e.g. Android 4 default browser).

You can use core-js to add support to these browsers.

TypeScript

You can include directly the classes you need, for example:

import { BrowserQRCodeReader, VideoInputDevice } from '@zxing/library';

Node

To use in node you will need to provide an implementation of LuminanceSource for an image. A starting point is SharpImageLuminanceSource from tests that is using sharp image processing Node library.

No examples are availabe for now, however you can have a look at the extensive tests cases.

Scanning from Video Camera

To display the input from the video camera you will need to add a video element in the HTML page:

<video id="video" width="300" height="200" style="border: 1px solid gray"></video>

To start decoding, first obtain a list of video input devices with:

const codeReader = new ZXing.BrowserQRCodeReader();

codeReader.getVideoInputDevices()
    .then(videoInputDevices => {
        videoInputDevices.forEach(
            device => console.log(`${device.label}, ${device.deviceId}`)
        );
    })
    .catch(err => console.error(err));

If there is just one input device you can use the first deviceId and the video element id (in the example below is also 'video') to decode:

const firstDeviceId = videoInputDevices[0].deviceId;

codeReader.decodeFromInputVideoDevice(firstDeviceId, 'video')
    .then(result => console.log(result.text))
    .catch(err => console.error(err));

If there are more input devices then you will need to chose one for codeReader.decodeFromInputVideoDevice device id parameter.

You can also provide undefined for the device id parameter in which case the library will automatically choose the camera, prefering the main (environment facing) camera if more are available:

codeReader.decodeFromInputVideoDevice(undefined, 'video')
    .then(result => console.log(result.text))
    .catch(err => console.error(err));

Scanning from Video File

Similar as above you can use a video element in the HTML page:

<video id="video" width="300" height="200" style="border: 1px solid gray"></video>

And to decode the video from an url:

const codeReader = new ZXing.BrowserQRCodeReader();
const videoSrc = 'your url to a video';

codeReader.decodeFromVideoSource(videoSrc, 'video')
    .then(result => console.log(result.text))
    .catch(err => console.error(err));

You can also decode the video url without showing it in the page, in this case no video element is needed in HTML.

codeReader.decodeFromVideoSource(videoSrc)
    .then(result => console.log(result.text))
    .catch(err => console.error(err));

Scanning from Image

Similar as above you can use a img element in the HTML page (with src attribute set):

<img id="img" src="qrcode-image.png" width="200" height="300" style="border: 1px solid gray"></img>

And to decode the image:

const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');

codeReader.decodeFromImage(img)
    .then(result => console.log(result.text))
    .catch(err => console.error(err));

You can also decode the image url without showing it in the page, in this case no img element is needed in HTML:

const imgSrc = 'url to image';

codeReader.decodeFromImage(undefined, imgSrc)
    .then(result => console.log(result.text))
    .catch(err => console.error(err));

Or decode the image url directly from an url, with an img element in page (notice no src attribute is set for img element):

<img id="img" width="200" height="300" style="border: 1px solid gray"></img>
const imgSrc = 'url to image';
const imgDomId = 'img-to-decode';

codeReader.decodeFromImage(imgDomId, imgSrc)
    .then(result => console.log(result.text))
    .catch(err => console.error(err));

Barcode generation

To generate a QR Code SVG image include 'zxing.qrcodewriter.min.js' from build/vanillajs. You will need to include an element where the SVG element will be appended:

<div id="result"></div>

And then:

const codeWriter = new ZXing.BrowserQRCodeSvgWriter('result');
const svgElement = codeWriter.write(input, 300, 300);

Text Encoding and Decoding

To decode a barcode, the library needs at some point to decode from bits to text. Also, to generate a barcode it needs to encode text to bits. Unfortunately, the state of encoding and decoding text in ECMAScript/browser is somehow messy at the moment.

To have full support for all encodings in CharacterSetECI except Cp437 use text-encoding library. The library is used implicitly for node (and tests), but is an optional dependency for browser because is rather large (> 600k). You will need to include it yourself if you want/need to use it. The text-encoding library will be removed as soon as this library starts to run on TypeScript 2.8.

By default, in browser, TextDecoder/TextEncoder web API are used if available (take care as these are labeled as experimental as of this writing). Also, be aware that TextEncoder encodes only to UTF-8 as per spec. If these are not available the library falls back to a minimal implementation that only encodes and decodes to/from UTF-8 (see StringEncoding).

Porting Information

See Contributing Guide for information regarding porting approach and reasoning behind some of the approaches taken.


Bless