Barcode Scanner Library

@barcodesgg/scanner is a JavaScript library that reads UPC and EAN barcodes with the camera in the browser. Scanning works without a key. To look up the product of each barcode, add a publishable key (pk_...).

The library has three entry points:

Install

npm install @barcodesgg/scanner

The camera works only on HTTPS pages, and on localhost during development.

Web component

<script type="module">
  import '@barcodesgg/scanner/element';
</script>

<barcode-scanner publishable-key="pk_..." manual-entry></barcode-scanner>

<script>
  const scanner = document.querySelector('barcode-scanner');
  scanner.addEventListener('barcode-detect', (e) => console.log(e.detail.value));
  scanner.addEventListener('barcode-product', (e) => console.log(e.detail.product.name));
</script>

Leave out publishable-key to scan without a lookup. manual-entry shows a field to type a barcode.

Events: barcode-detect, barcode-product, barcode-not-found, barcode-error and barcode-state.

React hook

import { barcodesLookup } from '@barcodesgg/scanner';
import { useBarcodeScanner } from '@barcodesgg/scanner/react';

const lookup = barcodesLookup({ publishableKey: 'pk_...' });

export function ProductScanner() {
  const { videoRef, product, start, stop } = useBarcodeScanner({ lookup });

  return (
    <div>
      <video ref={videoRef} muted playsInline />
      <button onClick={start}>Scan</button>
      <button onClick={stop}>Stop</button>
      {product && <p>{product.name} {product.styleCode}</p>}
    </div>
  );
}

The hook also returns state, code, notFound, error, pause, lookup and setTorch.

Headless core

import { createScanner, barcodesLookup } from '@barcodesgg/scanner';

const scanner = createScanner({
  video: document.querySelector('video'),
  lookup: barcodesLookup({ publishableKey: 'pk_...' }),
});

scanner.on('detect', ({ value }) => console.log(value));
scanner.on('product', ({ product }) => console.log(product.name));
scanner.start();

Leave out lookup to scan without a lookup.

Product lookup

barcodesLookup({ publishableKey }) calls GET Lookup Barcode (/api/v2/barcode/lookup/{barcode}) from the browser. It accepts only keys that start with pk_. Never put a secret API token in a web page.

Lookups that find a product use API calls of your plan. Add the domain of your website to the allowed domains of the key. For local work, add localhost with its port, for example localhost:5173.

To look up products on your own server instead, use urlLookup('/your/endpoint/{barcode}') or the lookup-url attribute. Keep the secret API token on that server.

Other exports

• isPublishableKey(value): true for a pk_... key.
• isValidGtin(value): checks the check digit of an EAN, UPC or GTIN.
• expandUpcE(value): converts an 8-digit UPC-E to UPC-A.

The package page on npm is npmjs.com/package/@barcodesgg/scanner. It lists every option, attribute and error code. To try the scanner without code, use the free online barcode scanner.