TypeScript port of ZXing multi-format 1D/2D barcode image processing library with inverse barcode support
npm install zxing-library2[
][1]
npm i @zxing/library --save
yarn add @zxing/library
html
`
#### Or asynchronously:
`html
`
$3
`html
`
$3
`html
`
$3
`javascript
const { MultiFormatReader, BarcodeFormat } = require('@zxing/library/esm5'); // use this path since v0.5.1
const hints = new Map();
const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX/, .../];
hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
const reader = new MultiFormatReader();
reader.setHints(hints);
const luminanceSource = new RGBLuminanceSource(imgByteArray, imgWidth, imgHeight);
const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));
reader.decode(binaryBitmap);
`
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 compatibility._
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._
In the PDF 417 decoder recent addition, the library now makes use of the new BigInt type, which [is not supported by all browsers][2] 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._
$3
To display the input from the video camera you will need to add a video element in the HTML page:
`html
id="video"
width="300"
height="200"
style="border: 1px solid gray"
>
`
To start decoding, first obtain a list of video input devices with:
`javascript
const codeReader = new ZXing.BrowserQRCodeReader();
codeReader
.listVideoInputDevices()
.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:
`javascript
const firstDeviceId = videoInputDevices[0].deviceId;
codeReader
.decodeOnceFromVideoDevice(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.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:
`javascript
codeReader
.decodeOnceFromVideoDevice(undefined, 'video')
.then(result => console.log(result.text))
.catch(err => console.error(err));
`
$3
Similar as above you can use a video element in the HTML page:
`html
id="video"
width="300"
height="200"
style="border: 1px solid gray"
>
`
And to decode the video from an url:
`javascript
const codeReader = new ZXing.BrowserQRCodeReader();
const videoSrc = 'your url to a video';
codeReader
.decodeFromVideo('video', videoSrc)
.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.
`javascript
codeReader
.decodeFromVideoUrl(videoUrl)
.then(result => console.log(result.text))
.catch(err => console.error(err));
// or alternatively
codeReader
.decodeFromVideo(null, videoUrl)
.then(result => console.log(result.text))
.catch(err => console.error(err));
`
$3
Similar as above you can use a img element in the HTML page (with src attribute set):
`html
id="img"
src="qrcode-image.png"
width="200"
height="300"
style="border: 1px solid gray"
/>
`
And to decode the image:
`javascript
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:
`javascript
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):
`html
id="img-to-decode"
width="200"
height="300"
style="border: 1px solid gray"
/>
`
`javascript
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:
`html
`
And then:
`javascript
const codeWriter = new ZXing.BrowserQRCodeSvgWriter();
// you can get a SVG element.
const svgElement = codeWriter.write(input, 300, 300);
// or render it directly to DOM.
codeWriter.writeToDom('#result', input, 300, 300);
``