Scan Data Matrix codes in your web app

What is a Data Matrix code?

Data Matrix is a high-density, 2D matrix code widely used in manufacturing, healthcare, logistics and retail for efficient data encoding and retrieval. Data Matrix is standardised as ISO/IEC 16022 and GS1 Data Matrix.

Data Matrix consists of a square or rectangular matrix of black and white cells bordered by a solid, L-shaped finder pattern on the left and bottom sides, and an alternating strip of black and white on the upper and right sides, the timing pattern. The code must be surrounded by a small amount of empty space, the quiet zone.

Data Matrix is known for being high-density, allowing considerable amounts of data to be packed into a compact space. It is often seen on small items, packaging and electronic components.

Data Matrix has strong error correction based on Reed-Solomon (ECC 200), ensuring accurate reads even if the code is partially damaged or obscured.

Square Data Matrix sizes and capacity

Data Matrix codes are usually square and come in a fixed number of sizes, from 10x10 up to 144x144 rows/columns. Data Matrix codes can store numeric (digits) and alphanumeric (characters and digits) data.

Increasing the number of rows and columns increases the code's capacity, but also makes the code harder to read. The table below lists the code capacities in numeric and alphanumeric mode for each size.

Size	Capacity num/alpha	Size	Capacity num/alpha
10x10	6/3	44x44	288/214
12x12	10/6	48x48	348/259
14x14	16/10	52x52	408/304
16x16	24/16	64x64	560/418
18x18	36/25	72x72	736/550
20x20	44/31	80x80	912/682
22x22	60/43	88x88	1152/862
24x24	72/52	96x96	1392/1042
26x26	88/64	104x104	1632/1222
32x32	124/91	120x120	2100/1573
36x36	172/127	132x132	2608/1954
40x40	228/169	144x144	3116/2335

Rectangular Data Matrix sizes and DMRE

Rectangular Data Matrix codes are less common than square ones. These codes are often used on postage, retail items or containers.

ISO/IEC 16022 defines six rectangular sizes, ranging from 8x18 to 16x48 rows/columns. The table below lists the code capacities for each size.

Size	Capacity (numeric/alphanumeric)
8x18	10/6
8x32	20/13
12x26	32/22
12x36	44/31
16x36	64/46
16x48	98/72

STRICH supports all six rectangular sizes since version 1.14.0. The 18 additional rectangular sizes defined in ISO/IEC 21471 (Data Matrix Rectangular Extension, DMRE), which extend up to 26x64 rows/columns, will be supported in a future release.

For more information on the Data Matrix symbology and how the SDK supports it, please refer to our SDK documentation.

Scanning Data Matrix codes in JavaScript

With the STRICH barcode scanning SDK, scanning Data Matrix codes in a web app takes just a few lines of JavaScript: initialize the SDK with your license key and enable the datamatrix symbology. Scanning runs entirely on the device, in the browser. Pick the integration that fits your app:

Built-in scanning UI with PopupScanner

The PopupScanner opens a dialog with a camera preview and returns the scanned codes. It is the quickest way to add scanning to an existing form.

import { StrichSDK, PopupScanner } from '@pixelverse/strichjs-sdk';

await StrichSDK.initialize('<your license key>');

const detections = await PopupScanner.scan({
    symbologies: ['datamatrix']
});
if (detections) {
    console.log(detections[0].data);
}

Embedded scanner with BarcodeReader

For full control over layout and scanning flow, the BarcodeReader renders the camera preview inside an element of your page and keeps scanning until you stop it, which is ideal for scanning many items in a row. The host element needs a known size:

<div id="scanner" style="position: relative; height: 240px"></div>

Each detection contains the decoded data, the symbology identifier (]d2 for GS1 Data Matrix) and Data Matrix metadata such as the symbol size:

import { StrichSDK, BarcodeReader } from '@pixelverse/strichjs-sdk';

await StrichSDK.initialize('<your license key>');

const barcodeReader = await new BarcodeReader({
    selector: '#scanner',
    engine: {
        symbologies: ['datamatrix'],
        // enable for light-on-dark codes, e.g. laser-etched part markings
        invertedCodes: false
    }
}).initialize();

barcodeReader.detected = (detections) => {
    for (const detection of detections) {
        // ]d2 is the symbology identifier for GS1 Data Matrix
        const isGS1 = detection.symbologyIdentifier === ']d2';
        const { rows, cols } = detection.metadata;
        console.log(detection.data, isGS1, `${rows}x${cols}`);
    }
};
await barcodeReader.start();

Reading Data Matrix codes from images with ImageScanner

If the codes come from photos or screenshots instead of a live camera, the ImageScanner decodes them from a file, an image element or a blob:

import { StrichSDK, ImageScanner } from '@pixelverse/strichjs-sdk';

await StrichSDK.initialize('<your license key>');

// e.g. from an <input type="file" accept="image/*">
const file = document.querySelector('input[type=file]').files[0];
const detections = await ImageScanner.scan(file, {
    engine: { symbologies: ['datamatrix'] }
});

For more information on Data Matrix support in STRICH, please refer to our SDK documentation.

Open-source alternatives

Not all open-source JavaScript barcode scanners read Data Matrix codes: Quagga2, for example, only supports 1D barcodes. Our comparison of open-source JavaScript barcode scanner libraries shows which libraries support which symbologies, with live code snippets for each.

Try it online

Want to see how STRICH handles your codes? Open the STRICH demo app on your smartphone and scan a Data Matrix code with the camera, no app install or sign-up needed. To read a code from a photo or screenshot, use our free online barcode scanner.