Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@zxing/library
Advanced tools
TypeScript port of ZXing multi-format 1D/2D barcode image processing library, with Code128 and ITF support.
Multi-format 1D/2D barcode image processing library.
ZXing ("zebra crossing") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.
WIP: see Status and Roadmap for what is currently done and what's planned next. 👀
1D product | 1D industrial | 2D |
---|---|---|
QR Code | ||
Code 128 (no docs) | ||
PDF 417 (in-progress) | ||
ITF (in-progress) | ||
See some demo examples in browser.
The library can be used from browser with TypeScript (include anything from src/browser however you must do the packaging yourself) or with plain javascript (see below). It can also be used from node (see also below). The library is using separate builds for node and browser to allow different ES targeting.
Examples below are for QR barcode, all other supported barcodes work similary.
npm i @zxing/library --save
To use from JS you need to include what you need from build/umd
folder (for example zxing.min.js
).
See some demo examples for browser code examples with javascript.
All the examples are using ES6, be sure is supported in your browser or modify as needed (eg. var instead of const etc.).
The browser library is using the MediaDevices web api which is marked as experimental as of this writing. 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 (for example Android 4 default browser, etc.). You can use a polyfill library like core-js to support these browsers.
Install the package:
npm i @zxing/library --save
And then include directly the classes files you need, for example:
import { BrowserQRCodeReader, VideoInputDevice } from '@zxing/library';
The usage is identical with the above.
npm i @zxing/library --save
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.
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((element) => {
console.log(`${element.label}, ${element.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);
});
A full working example for QR Code from Video Camera is provided in the examples.
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);
});
A full working example for QR Code from Video File is provided in the examples.
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';
codeReader.decodeFromImage('img', imgSrc); // here img is the image id from html, in our case 'img'
.then((result) => {
console.log(result.text);
}).catch((err) => {
console.error(err);
});
A full working example for QR Code from Image is provided in the examples.
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');
var svgElement = codeWriter.write(input, 300, 300);
A full working example for QR Code write to SVG is provided in the examples.
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 javascript/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.
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
).
See TypeScript Port Info for information regarding porting approach and reasoning behind some of the approaches taken.
FAQs
TypeScript port of ZXing multi-format 1D/2D barcode image processing library.
The npm package @zxing/library receives a total of 231,307 weekly downloads. As such, @zxing/library popularity was classified as popular.
We found that @zxing/library demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.