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.
|1D product||1D industrial||2D|
|Code 39||QR Code|
* In progress, may have open PR.
See Live Preview in browser.
Note: All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recommended.
npm i @zxing/library --save
yarn add @zxing/library
Use on browser with ES6 modules:
Use on browser with AMD:
Use on browser with UMD:
Use outside the browser with CommonJS:
const MultiFormatReader BarcodeFormat = ; // use this path since v0.5.1const hints = ;const formats = BarcodeFormatQR_CODE BarcodeFormatDATA_MATRIX/*, ...*/;hints;const reader = ;reader;const luminanceSource = imgByteArray imgWidth imgHeight;const binaryBitmap = luminanceSource;reader;
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 compatibility.
Also, note that the library is using the
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.
In the PDF 417 decoder recent addition, the library now makes use of the new
BigInt type, which is not supported by all browsers as well. There's no way to polyfill that and ponyfill libraries are way to big, but even if PDF 417 decoding relies on
BigInt the rest of the library shall work ok in browsers that doesn't support it.
There's no polyfills for
BigInt in the way it's coded in here.
Scanning from Video Camera
To display the input from the video camera you will need to add a video element in the HTML page:
To start decoding, first obtain a list of video input devices with:
const codeReader = ;codeReader;
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 = videoInputDevices0deviceId;codeReader;
If there are more input devices then you will need to chose one for
codeReader.decodeOnceFromVideoDevice device id parameter.
You can also provide
undefined for the device id parameter in which case the library will automatically choose the camera, preferring the main (environment facing) camera if more are available:
Scanning from Video File
Similar as above you can use a video element in the HTML page:
And to decode the video from an url:
const codeReader = ;const videoSrc = 'your url to a video';codeReader;
You can also decode the video url without showing it in the page, in this case no
video element is needed in HTML.
codeReader;// or alternativelycodeReader;
Scanning from Image
Similar as above you can use a img element in the HTML page (with src attribute set):
And to decode the image:
const codeReader = ;const img = document;codeReader;
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;
Or decode the image url directly from an url, with an
img element in page (notice no
src attribute is set for
const imgSrc = 'url to image';const imgDomId = 'img-to-decode';codeReader;
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:
const codeWriter = ;// you can get a SVG element.const svgElement = codeWriter;// or render it directly to DOM.codeWriter;
See Contributing Guide for information regarding porting approach and reasoning behind some of the approaches taken.
Special thanks to all the contributors who have contributed for this project. We heartly thankful to you all.
And a special thanks to @aleris who created the project itself and made available the initial QR code port.