ZXing JS

https://github.com/zxing-js/library
Admin
ZXing JS is a JavaScript port of the ZXing ("zebra crossing") barcode scanning library, supporting...
Tokens:5,177
Snippets:63
Trust Score:8.2
License:Apache-2.0
Update:2 months ago
Show doc for...
Tokens:
Raw
### Run the documentation server

Source: https://github.com/zxing-js/library/blob/master/CONTRIBUTING.md

Command to start a local development server for the documentation using http-server.

```bash
user@computer BUILDV <somepath>/zxing-js/library (develop)
http-server ./docs -a localhost -p 4040 -o
```

--------------------------------

### Initialize and Control QR Video Decoding

Source: https://github.com/zxing-js/library/blob/master/docs/examples/qr-video/index.html

Sets up the BrowserQRCodeReader and attaches event listeners to start decoding from a video source or reset the reader state.

```javascript
window.addEventListener('load', function () { const codeReader = new ZXing.BrowserQRCodeReader() console.log('ZXing code reader initialized') const resultContainer = document.getElementById('result') document.getElementById('startButton').addEventListener('click', async () => { const video = document.getElementById('video') video.setAttribute('src', '../../resources/qrcode-video.mp4') try { const result = await codeReader.decodeFromVideo(video) console.log(result) resultContainer.textContent = result.text } catch (err) { console.error(err) resultContainer.textContent = err } }) document.getElementById('resetButton').addEventListener('click', () => { codeReader.reset() resultContainer.textContent = '' console.log('Reset.') }) })
```

--------------------------------

### Initialize and Decode from Camera Stream

Source: https://github.com/zxing-js/library/blob/master/docs/examples/multi-camera/index.html

Initializes the BrowserMultiFormatReader, populates a device selection dropdown, and sets up event listeners for starting and resetting the decoding process.

```javascript
window.addEventListener('load', function () { let selectedDeviceId; const codeReader = new ZXing.BrowserMultiFormatReader() console.log('ZXing code reader initialized') codeReader.listVideoInputDevices() .then((videoInputDevices) => { const sourceSelect = document.getElementById('sourceSelect') selectedDeviceId = videoInputDevices[0].deviceId if (videoInputDevices.length >= 1) { videoInputDevices.forEach((element) => { const sourceOption = document.createElement('option') sourceOption.text = element.label sourceOption.value = element.deviceId sourceSelect.appendChild(sourceOption) }) sourceSelect.onchange = () => { selectedDeviceId = sourceSelect.value; }; const sourceSelectPanel = document.getElementById('sourceSelectPanel') sourceSelectPanel.style.display = 'block' } document.getElementById('startButton').addEventListener('click', () => { codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => { if (result) { console.log(result) document.getElementById('result').textContent = result.text } if (err && !(err instanceof ZXing.NotFoundException)) { console.error(err) document.getElementById('result').textContent = err } }) console.log(`Started continous decode from camera with id ${selectedDeviceId}`) }) document.getElementById('resetButton').addEventListener('click', () => { codeReader.reset() document.getElementById('result').textContent = ''; console.log('Reset.') }) }) .catch((err) => { console.error(err) }) })
```

--------------------------------

### Initialize and Run Aztec Camera Scanner

Source: https://github.com/zxing-js/library/blob/master/docs/examples/aztec-camera/index.html

Initializes the Aztec code reader, populates a device selection dropdown, and sets up event listeners for starting and resetting the decoding process.

```javascript
window.addEventListener('load', function () { let selectedDeviceId; const codeReader = new ZXing.BrowserAztecCodeReader(); console.log('ZXing code reader initialized') codeReader.getVideoInputDevices() .then((videoInputDevices) => { const sourceSelect = document.getElementById('sourceSelect') selectedDeviceId = videoInputDevices[0].deviceId if (videoInputDevices.length >= 1) { videoInputDevices.forEach((element) => { const sourceOption = document.createElement('option') sourceOption.text = element.label sourceOption.value = element.deviceId sourceSelect.appendChild(sourceOption) }) sourceSelect.onchange = () => { selectedDeviceId = sourceSelect.value; }; const sourceSelectPanel = document.getElementById('sourceSelectPanel') sourceSelectPanel.style.display = 'block' } document.getElementById('startButton').addEventListener('click', () => { codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => { console.log(result) document.getElementById('result').textContent = result.text }).catch((err) => { console.error(err) document.getElementById('result').textContent = err }) console.log(`Started continous decode from camera with id ${selectedDeviceId}`) }) document.getElementById('resetButton').addEventListener('click', () => { codeReader.reset() document.getElementById('result').textContent = ''; console.log('Reset.') }) }) .catch((err) => { console.error(err) }) })
```

--------------------------------

### Decode barcodes with MultiFormatReader

Source: https://github.com/zxing-js/library/blob/master/README.md

Demonstrates importing the library, configuring decoding hints, and processing an image source.

```javascript
// use with commonJS
const { MultiFormatReader, BarcodeFormat } = require('@zxing/library');
// or with ES6 modules
import { MultiFormatReader, BarcodeFormat } from '@zxing/library';

const hints = new Map();
const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX/*, ...*/];

hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);

const reader = new MultiFormatReader();

const luminanceSource = new RGBLuminanceSource(imgByteArray, imgWidth, imgHeight);
const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));

reader.decode(binaryBitmap, hints);
```

--------------------------------

### Initialize and Decode QR Code from Image

Source: https://github.com/zxing-js/library/blob/master/docs/examples/qr-image/index.html

Initializes the BrowserQRCodeReader and attaches a click event listener to trigger decoding from an HTML image element.

```javascript
window.addEventListener('load', function () { const codeReader = new ZXing.BrowserQRCodeReader() console.log('ZXing code reader initialized') document.getElementById('decodeButton').addEventListener('click', () => { const img = document.getElementById('img') codeReader.decodeFromImage(img).then((result) => { console.log(result) document.getElementById('result').textContent = result.text }).catch((err) => { console.error(err) document.getElementById('result').textContent = err }) console.log(`Started decode for image from ${img.src}`) }) })
```

--------------------------------

### Initialize and use BrowserBarcodeReader

Source: https://github.com/zxing-js/library/blob/master/docs/examples/barcode-image/index.html

Initializes the barcode reader and attaches click event listeners to buttons to trigger image decoding.

```javascript
window.addEventListener('load', () => { const codeReader = new ZXing.BrowserBarcodeReader(); console.log('ZXing code reader initialized'); const decodeFun = (e) => { const parent = e.target.parentNode.parentNode; const img = parent.getElementsByClassName('img')[0].cloneNode(true); const resultEl = parent.getElementsByClassName('result')[0]; codeReader.decodeFromImage(img) .then(result => { console.log(result); resultEl.textContent = result.text; }) .catch(err => { console.error(err); resultEl.textContent = err; }); console.log(`Started decode for image from ${img.src}`) }; for (const element of document.getElementsByClassName('decodeButton')) { element.addEventListener('click', decodeFun, false); } })
```

--------------------------------

### Initialize and Write QR Code to SVG

Source: https://github.com/zxing-js/library/blob/master/docs/examples/qr-svg-writer/index.html

Uses BrowserQRCodeSvgWriter to render input text as an SVG element and provides functionality to save the output as a file.

```javascript
window.addEventListener('load', () => { const codeWriter = new ZXing.BrowserQRCodeSvgWriter() console.log('ZXing code writer initialized') let svgElement; document.getElementById('writeButton').addEventListener('click', () => { const input = document.getElementById('textInput').value svgElement = codeWriter.writeToDom('#result', input, 300, 300) document.getElementById('saveButton').removeAttribute('disabled') }) document.getElementById('saveButton').addEventListener('click', () => { const svgData = (new XMLSerializer()).serializeToString(document.getElementById('result')) const blob = new Blob([svgData]) saveAs(blob, 'zxing-qrcode-example.svg') }) })
```

--------------------------------

### Initialize and Decode from Image

Source: https://github.com/zxing-js/library/blob/master/docs/examples/multi-image/index.html

Initializes the BrowserMultiFormatReader and attaches a click event listener to trigger decoding from an image element.

```javascript
window.addEventListener('load', function () { const codeReader = new ZXing.BrowserMultiFormatReader() console.log('ZXing code reader initialized') document.getElementById('decodeButton').addEventListener('click', () => { const img = document.getElementById('img') codeReader.decodeFromImage(img).then((result) => { console.log(result) document.getElementById('result').textContent = result.text }).catch((err) => { console.error(err) document.getElementById('result').textContent = err }) console.log(`Started decode for image from ${img.src}`) }) })
```

--------------------------------

### Initialize and execute Data Matrix decoding

Source: https://github.com/zxing-js/library/blob/master/docs/examples/datamatrix-image/index.html

Initializes the BrowserDatamatrixCodeReader and attaches click event listeners to buttons to decode images found within the parent container.

```javascript
window.addEventListener('load', function () { const codeReader = new ZXing.BrowserDatamatrixCodeReader() console.log('ZXing code reader initialized'); const decodeFun = (e) => { const parent = e.target.parentNode.parentNode; const img = parent.getElementsByClassName('img')[0].cloneNode(true); const resultEl = parent.getElementsByClassName('result')[0]; codeReader.decodeFromImage(img) .then(result => { console.log(result); resultEl.textContent = result.text; }) .catch(err => { console.error(err); resultEl.textContent = err; }); console.log(`Started decode for image from ${img.src}`) }; for (const element of document.getElementsByClassName('decodeButton')) { element.addEventListener('click', decodeFun, false); } })
```

--------------------------------

### QR Code Camera Decoding Implementation

Source: https://github.com/zxing-js/library/blob/master/docs/examples/qr-camera/index.html

Contains the core logic for decoding QR codes from a video stream, including single-shot and continuous decoding functions, and the initialization sequence for device selection.

```javascript
function decodeOnce(codeReader, selectedDeviceId) { codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => { console.log(result) document.getElementById('result').textContent = result.text }).catch((err) => { console.error(err) document.getElementById('result').textContent = err }) } function decodeContinuously(codeReader, selectedDeviceId) { codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => { if (result) { // properly decoded qr code console.log('Found QR code!', result) document.getElementById('result').textContent = result.text } if (err) { // As long as this error belongs into one of the following categories // the code reader is going to continue as excepted. Any other error // will stop the decoding loop. // // Excepted Exceptions: // // - NotFoundException // - ChecksumException // - FormatException if (err instanceof ZXing.NotFoundException) { console.log('No QR code found.') } if (err instanceof ZXing.ChecksumException) { console.log('A code was found, but it\'s read value was not valid.') } if (err instanceof ZXing.FormatException) { console.log('A code was found, but it was in a invalid format.') } } }) } window.addEventListener('load', function () { let selectedDeviceId; const codeReader = new ZXing.BrowserQRCodeReader() console.log('ZXing code reader initialized') codeReader.getVideoInputDevices() .then((videoInputDevices) => { const sourceSelect = document.getElementById('sourceSelect') selectedDeviceId = videoInputDevices[0].deviceId if (videoInputDevices.length >= 1) { videoInputDevices.forEach((element) => { const sourceOption = document.createElement('option') sourceOption.text = element.label sourceOption.value = element.deviceId sourceSelect.appendChild(sourceOption) }) sourceSelect.onchange = () => { selectedDeviceId = sourceSelect.value; }; const sourceSelectPanel = document.getElementById('sourceSelectPanel') sourceSelectPanel.style.display = 'block' } document.getElementById('startButton').addEventListener('click', () => { const decodingStyle = document.getElementById('decoding-style').value; if (decodingStyle == "once") { decodeOnce(codeReader, selectedDeviceId); } else { decodeContinuously(codeReader, selectedDeviceId); } console.log(`Started decode from camera with id ${selectedDeviceId}`) }) document.getElementById('resetButton').addEventListener('click', () => { codeReader.reset() document.getElementById('result').textContent = ''; console.log('Reset.') }) }) .catch((err) => { console.error(err) }) })
```

--------------------------------

### Initialize and execute PDF 417 decoding

Source: https://github.com/zxing-js/library/blob/master/docs/examples/pdf417-image/index.html

Initializes the BrowserPDF417Reader and attaches click event listeners to decode buttons, which process images and display results.

```javascript
window.addEventListener('load', function () { const codeReader = new ZXing.BrowserPDF417Reader() console.log('ZXing code reader initialized'); const decodeFun = (e) => { const parent = e.target.parentNode.parentNode; const img = parent.getElementsByClassName('img')[0].cloneNode(true); const resultEl = parent.getElementsByClassName('result')[0]; codeReader.decodeFromImage(img) .then(result => { console.log(result); resultEl.textContent = result.text; }) .catch(err => { console.error(err); resultEl.textContent = err; }); console.log(`Started decode for image from ${img.src}`) }; for (const element of document.getElementsByClassName('decodeButton')) { element.addEventListener('click', decodeFun, false); } })
```

--------------------------------

### For Loop Conversion

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Updates standard for loop variable declarations to use let and preserve original type as a comment.

```regex
Search: `for\s*\((\w+) (\w+)`
Replace: `for (let $2 /*$1*/`
```

--------------------------------

### Parameter Syntax Refactoring

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Updates function parameter lists to TypeScript type annotation format.

```regex
Search: `\((([\w\[\]]+) (\w+)(\,)?)+\)`
Replace: `($3: $2$4)`
```

```regex
Search: `(\w+) (\w+)(, |\))`
Replace: `$2: $1$3`
```

--------------------------------

### Equality Comparison Update

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Updates equality operators to strict equality operators.

```regex
Search: `(!=|==)`
Replace: `$1=`
```

--------------------------------

### Numeric Array Initialization

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Converts Java array instantiation to TypeScript typed array or standard array constructors.

```regex
Search: `new int\[(\w+)\]`
Replace: `new Int32Array($1)`
Replace: `new Array($1)`
```

--------------------------------

### For-of Loop Conversion

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Converts standard for-each loops to TypeScript for-of syntax with type annotations in comments.

```regex
Search: `for\s*\((.*) (\w+) :`
Replace: `for (const $2/*: $1*/ of`
```

--------------------------------

### Array Type Migration

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Replaces Java-style integer array declarations with TypeScript Int32Array.

```regex
Search: `int\[\]`
Replace: `Int32Array`
```

--------------------------------

### Property Declaration Refactoring

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Updates final property declarations to include comments and adjust type syntax.

```regex
Search: `((private|public|static)( static)?) final ([\w\[\]]+) (\w+)( =|;)`
Replace: `$1 /*final*/ $5: $4$6`
```

--------------------------------

### Variable Declaration Refactoring

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Converts variable declarations to TypeScript syntax with explicit type annotations.

```regex
Search: `^(\s*)([\w\[\]]+) (\w+) =`
Replace: `$1let $3: $2 =`
```

```regex
Search: `^(\s*)([\w\[\]]+) (\w+);`
Replace: `$1let $3: $2;`
```

--------------------------------

### Java to TypeScript type mapping

Source: https://github.com/zxing-js/library/blob/master/CONTRIBUTING.md

Mapping table for common Java array types to their corresponding TypeScript TypedArray equivalents.

```markdown
| Java     | TypeScript          |
| -------- | ------------------- |
| `byte[]` | `Uint8ClampedArray` |
| `int[]`  | `Int32Array`        |
```

--------------------------------

### Function Type Declaration

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Adjusts function signatures to use TypeScript return type syntax.

```regex
Search: `((private|public|static)( static)?) ([\w\[\]]+) (\w+\(.*?\))`
Replace: `$1 $5: $4`
```

```regex
Search: `([\w\[\]]+) (\w+\(.*?\))`
Replace: `$2: $1`
```

--------------------------------

### Numeric Cast Conversion

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Converts C-style numeric casts to TypeScript-style type assertions.

```regex
Search: `\((float|int|byte|short|long|char)\)\s*(\w+)`
Replace: `<$1>$2`
```

--------------------------------

### Numeric Type Mapping

Source: https://github.com/zxing-js/library/blob/master/HELPER_REGEX.md

Maps Java numeric types to TypeScript number type with original type preserved in comments.

```regex
Search: `: (byte|short|int|float|long)(\[\])?`
Replace: `: /*$1$2*/ number$2`
```
Tokens:
Raw