Skip to main content

Barcode Scanner | Web Document and Barcode Scanner

Barcode Scanner UI#

Scanbot WebSDK also features the option to scan and detect various barcodes.

The currently accepted formats are:

1D Barcodes#

2D Barcodes#

tip

You might also be interested in an overview in our blog post Types of barcodes and their usage.

Configuration#

ScanbotSDK Barcode Scanner takes an instance of BarcodeScannerConfiguration as its argument. This is your main object for configuration options, styling and receiving the results.

BarcodeScannerConfiguration inherits the base properties:

  • containerId โ€“ The id of the containing HTML element where the Barcode Scanner will be initialized. Required
  • videoConstraints โ€“ The desired video resolution. Optional, defaults to 3840x2160
  • mirrored - Whether the screen should be mirrored. Useful when using a user-facing camera. false by default
  • onError โ€“ Callback when something went wrong. Optional

Additionally, ScanbotSDK Barcode Scanner has the following configurable options:

  • captureDelay โ€“ The delay between receiving detection results. In milliseconds. Optional, defaults to 1000
  • onBarcodesDetected โ€“ Your callback for receiving detection results. Required
  • engineMode - The engine mode of the barcode recognizer. Defaults to 'NEXT_GEN'. To use legacy recognizer, please specify 'LEGACY'. Optional
  • barcodeFormats - An array which is used to specify the enabled barcode formats.

It is necessary to pass MSI_PLESSEY in barcodeFormats to be able to scan MSI Plessey barcodes. The following snippet shows the available formats:

[    "AZTEC",     "CODABAR",     "CODE_39",     "CODE_93",     "CODE_128",     "DATA_MATRIX",     "EAN_8",     "EAN_13",     "ITF",     "MAXICODE",     "PDF_417",     "QR_CODE",     "RSS_14",     "RSS_EXPANDED",     "UPC_A",     "UPC_E",     "UPC_EAN_EXTENSION",     "MSI_PLESSEY"]

The result of onBarcodesDetected is a BarcodeResult object that contains the following properties:

barcodes: Barcode[];

The list will always contain at least one element. No empty result is returned.

A barcode item contains the following properties:

  • format: BarcodeFormat โ€“ The type of barcode. One of the types listed in the previous paragraph
  • text: string โ€“ The data contained in the barcode
  • rawBytes: Uint8Array โ€“ The same data contained in the barcode. Can be disregarded in most scenarios, useful when the result is binary data, not a string.

Styling#

ScanbotSDK Barcode Scanner has the following style options and their default values:

style?: {    window: {        aspectRatio: 1,        paddingPropLeft: 0.5,        borderColor: "white",        left: "50%",        top: "50%",        transform: "translate(-50%, -50%)"    },    text: {        color: string = "white";        size: string = "0.9em";        weight: number = 300;    },    hint: "Please align the code in the frame above to scan it"    backgroundColor: string = "rgba(0, 0, 0, 0.7)";}

window element is used to configure the view-finder. It uses the WindowStyleConfiguration interface that has the following attributes:

width?: string;height?: string;aspectRatio?: number;paddingPropLeft?: number;borderColor?: string;left?: string;top?: string;transform?: string;

width and height elements can be used for configuring the size of the view-finder in pixels. However, aspectRatio and paddingPropLeft elements can be used for configuring the size of the view-finder in a more responsive way. aspectRatio specifies the aspect ratio as width/height paddingPropLeft specifies the proportional distance of the view-finder from the left side of the window

To change a specific style, simply assign it another value, e.g:

configuration.style.window.borderColor: "pink"

Default style configuration:

const WindowStyle: WindowStyleConfiguration = {    aspectRatio: 1,    paddingPropLeft: 0.5,    borderColor: "white",    left: "50%",    top: "50%",    transform: "translate(-50%, -50%)"}const TextStyle: TextStyleConfiguration = {    color: "white",    size: "0.9em",    weight: 300,}
const BarcodeScannerStyle: ViewFinderConfiguration = {    window: WindowStyle,    text: TextStyle,    backgroundColor: "rgba(0, 0, 0, 0.7)",    hint: "Please align the barcode or QR code in the frame to scan it."}

Opening the Scanner#

To open the Barcode Scanner, simply call the relevant SDK function with the configuration object:

const scanner = await scanbotSDK.createBarcodeScanner(configuration);

You should store the barcode scanner object in a globally accessible location, as additional barcode scanner actions are functions of that object.

API#

To handle barcode results (avoid duplicate scans etc), ScanbotSDK offers the following convenient methods to pause and resume detection while you are processing the data on your side:

resumeDetection(): void;
pauseDetection(): void;
isDetectionPaused(): boolean;

As with the Document Scanner, the Barcode Scanner should also be properly disposed of when you have detected and processed the relevant barcodes:

dispose(): void;

ScanbotSDK provides a handy API to detect barcodes on still images. Detect Barcodes on still images