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#


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


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.


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: "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.


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