Device Pairing for Web Apps

Prerequisites

• A valid Scandit License Key
• Access to the Scandit Express app on the sender device (iOS or Android)
• A web application (receiver) where scanned data will be received
• Node.js and npm installed on your development machine

Installation

Install the SDK via npm:

npm install @scandit/web-barcode-link

Implementation

1. Import the SDK

import {
  BarcodeLink,
  BarcodeLinkMode,
  BarcodeLinkUiFlow
} from '@scandit/web-barcode-link';

2. Initialize BarcodeLink

const barcodeLink = BarcodeLink.forLicenseKey('YOUR_SCANDIT_LICENSE_KEY');

3. Set the Scanning Mode

barcodeLink.setBarcodeLinkMode(BarcodeLinkMode.ContinuousScanning);

4. Configure Symbologies (Optional)

barcodeLink.setSymbologies({
  ean13Upca: { enabled: true },
  code128: { enabled: true },
  qr: { enabled: true }
});

5. Add Event Listeners

barcodeLink.addListener({
  onCapture: (barcodes) => {
    barcodes.forEach((barcode) => {
      console.log('Scanned:', barcode.data);
      // Handle the scanned data here
    });
  }
});

6. Start the UI Flow

await barcodeLink.initialize(new BarcodeLinkUiFlow());

Terminate the Session

await barcodeLink.dispose();

API Reference

The BarcodeLink class is used to configure and initialize your Barcode Link instance.

Creating an Instance

const barcodeLink = BarcodeLink.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

Use forLicenseKey(licenseKey: string): BarcodeLink to create a new BarcodeLink instance with your Scandit license key.

Configuration Methods

setBarcodeLinkMode(barcodeLinkMode: BarcodeLinkMode): BarcodeLink

barcodeLink.setBarcodeLinkMode(BarcodeLinkMode.ContinuousListBuilding);

Sets the scanning mode.

Available values:

Value	Description
SingleScanning	(Default) Scan one barcode and close the session
ContinuousScanning	Send barcodes in real-time and manually close the session
SingleListBuilding	Send a list of barcodes and close the session
ContinuousListBuilding	Send multiple lists and manually close the session

setListBehavior(listBehavior: BarcodeLinkListBehavior): BarcodeLink

barcodeLink.setListBehavior(BarcodeLinkListBehavior.Count);

Sets the behavior for how barcodes are listed.

Available values:

Value	Description
Unique	(Default) Each barcode appears only once per list
Count	Tracks how many times a barcode was scanned

note

Only used in SingleListBuilding and ContinuousListBuilding modes.

setDisconnectionTimeout(disconnectionTimeout: number): BarcodeLink

barcodeLink.setDisconnectionTimeout(30 * 60 * 1000);

Sets how long Barcode Link keeps trying to reconnect after the desktop and the smartphone lose their connection to each other. If the connection is not restored within this window, the session is aborted on both devices.

The value is in milliseconds. It defaults to 15 minutes (900000) and is clamped between 1 minute (60000) and 60 minutes (3600000).

setPlatform(platform: BarcodeLinkPlatform): BarcodeLink

barcodeLink.setPlatform(BarcodeLinkPlatform.Web);

Sets the platform used for scanning.

Available values:

Value	Description
Express	(Default) Launches the Scandit Express app
Web	Opens a browser tab using the Scandit Web SDK

setBarcodeRegexValidation(barcodeRegexValidation: RegExp): BarcodeLink

barcodeLink.setBarcodeRegexValidation(/\d+/);

Defines a regex to validate barcodes. Only matching barcodes are processed. By default no validation is applied.

setBarcodeTransformations(barcodeTransformations: unknown): BarcodeLink

barcodeLink.setBarcodeTransformations({ ... });

Sets barcode transformation logic. Only used when platform is BarcodeLinkPlatform.Express.

setSymbologies(symbologies: BarcodeLinkConfiguration['symbologies']): BarcodeLink

barcodeLink.setSymbologies({
  ean13upca: {
    enabled: true,
  },
});

Enables specific symbologies for scanning.

See all supported symbologies

Event Listeners

addListener(listener: BarcodeLinkListener): BarcodeLink

barcodeLink.addListener({
  onCapture(barcodes) {
    console.log("Scanned:", barcodes);
  },
});

Adds a listener for session events.

Available callbacks:

onCancel

barcodeLink.addListener({
  onCancel() {
    console.log("Session closed.");
  },
});

Called when the desktop closes the scanning session. Only available in BarcodeLinkUiFlow.

onCapture

barcodeLink.addListener({
  onCapture(barcodes: BarcodeLinkBarcode[], finished: boolean) {
    // Handle captured barcodes
  },
});

Called when the remote device sends barcodes.

• finished: Indicates if scanning has finished (used in continuous modes).

onConnectionStateChanged

barcodeLink.addListener({
  onConnectionStateChanged(connectionState: BarcodeLinkConnectionState) {
    switch (connectionState) {
      // Handle state changes
    }
  },
});

Tracks connection state changes. Only available in BarcodeLinkHeadlessFlow.

Available connection states:

Value	Description
MainDeviceDisconnected	Desktop disconnected from session
MainDeviceReconnected	Desktop reconnected to session
MainDeviceConnectionFailed	Reconnection failed repeatedly
RemoteDeviceConnected	Smartphone connected to session
RemoteDeviceDisconnected	Smartphone disconnected from session

removeListener(listener: BarcodeLinkListener): BarcodeLink

barcodeLink.removeListener(myListener);

Removes a previously added listener.

Initialization

initialize(flow: BarcodeLinkFlow): Promise

await barcodeLink.initialize(new BarcodeLinkUiFlow());

Initializes Barcode Link using a specific flow.

Flow types:

BarcodeLinkUiFlow

• Initializes with a pre-built UI.
• Shows a QR code for smartphone connection.

BarcodeLinkHeadlessFlow

• Initializes a headless session.
• Requires custom UI.
• Provides a QR code object for manual rendering.

Example:

const qrcode = await barcodeLink.initialize(new BarcodeLinkHeadlessFlow());

const img = document.createElement("img");
img.src = qrcode.src;

const a = document.createElement("a");
a.href = qrcode.href;
a.append(img);

document.body.append(a);

Disposing

dispose(): void

await barcodeLink.dispose();

Closes the Barcode Link session, useful when unmounting components or ending a session manually.