Barcode Scanner UI | Cordova Barcode Scanner

Barcode and QR Code Scanning UI

Barcode Scanner

ScanbotBarcodeSDK.startBarcodeScanner(successCallback, errorCallback, config) Opens a Scanning UI for barcodes and QR codes.

alt

Example:

var config = {
  finderLineColor: '#ff0000',
  cancelButtonTitle: 'Cancel',
  barcodeFormats: [], // or use a filter like so ['DATA_MATRIX', 'QR_CODE', ...]
  finderTextHint: 'Please align the code in the frame above to scan it',
  // See further customization configs...
};

ScanbotBarcodeSDK.startBarcodeScanner(function(result) {
  if (result.status === 'OK') {
    showBarcodeResults(result.data);
  }
}, sdkErrorCallback, config);

Result:

result.status - OK If the scanning is completed, CANCELED if the user has canceled the operation (tapped on the "cancel" button).
result.data?.barcodes - Optional List of recognized barcodes as items. See the barcode item structure below.

Barcode item structure:

type - Format of detected barcode/QR code (e.g. "CODE_128", "EAN_13", "QR_CODE", etc).
text - Raw text value of detected barcode/QR code.
textWithExtension - The raw text with extension encoded in the barcode.
rawBytes - The array of raw bytes contained in the barcode.
parsedSuccessful - True if the Barcode Document has been parsed successfully.
formattedResult - Optional formatted barcode document (if it was parsed succesfully).

BarcodeScannerConfiguration

Use this configuration class to customize the UI and the behavior of the Barcode Scanner UI. All config properties are optional.

Config:

  /** An optional array of barcode document formats that act as a detection filter. By default all supported document formats will be detected. */
  acceptedDocumentFormats?: BarcodeDocumentFormat[];
  /** The extension filter for EAN and UPC barcodes. */
  barcodesExtensionFilter?: BarcodesExtensionFilter;
  /** Background color of the detection overlay. */
  cameraOverlayColor?: string;
  /** Background color of the detection overlay. */
  cameraModule?: CameraModule;
  /** The relative initial zoom level of the camera in the range (0,1), where 0 is zoomed out and 1 is zoomed in. Default value is 0.0. */
  cameraZoomFactor?: number;
  /** Whether the cancel button is hidden or not. iOS only. */
  cancelButtonHidden?: boolean;
  /** String being displayed on the cancel button. */
  cancelButtonTitle?: string;
  /** The engine mode to be used for barcode scanning. The default value is NEXT_GEN. */
  engineMode?: EngineMode;
  /** Title of the button that opens the screen where the user can allow the usage of the camera by the app. */
  enableCameraButtonTitle?: string;
  /** Text that will be displayed when the app is not allowed to use the camera, prompting the user to enable the usage of the camera. */
  enableCameraExplanationText?: string;
  /** Foreground color of the detection overlay. */
  finderLineColor?: string;
  /** Width of finder frame border. Default is 2. */
  finderLineWidth?: number;
  /** String being displayed as description. */
  finderTextHint?: string;
  /** Foreground color of the description label. */
  finderTextHintColor?: string;
  /** Aspect ratio of finder frame (width \ height), which is used to build actual finder frame. Default is 1 - it is a square frame, which is good for QR capturing. */
  finderAspectRatio?: AspectRatio;
  /** Controls whether the flash toggle button is hidden or not. iOS only. */
  flashButtonHidden?: boolean;
  /** String being displayed on the flash button. iOS only. */
  flashButtonTitle?: string;
  /** Foreground color of the flash button when flash is off. */
  flashButtonInactiveColor?: string;
  /** Whether flash is toggled on or off. */
  flashEnabled?: boolean;
  /** Disables auto-focus and locks the lens at the specified focus lock lens position. Default value is false. iOS only. For Android, minFocusDistanceLock can be used. */
  focusLockEnabled?: boolean;
  /** The position of the lens. Values can be between 0.0f (minimum focusing distance) and 1.0f (maximum focusing distance). The default value is 0.0 iOS only. For Android, minFocusDistanceLock can be used. */
  focusLockPosition?: number;
  /** Whether touch-to-focus is enabled on camera preview. Enabled by default. Android only. */
  touchToFocusEnabled?: boolean;
  /** UI Interface orientation lock mode */
  orientationLockMode?: OrientationLockMode;
  /** Optional minimum required text length of the detected barcode. The default is 0 (setting is turned off). NOTE - This feature works on ITF barcodes only. */
  minimumTextLength?: number;
  /** Optional maximum text length of the detected barcode. The default is 0 (setting is turned off). NOTE - This feature works on ITF barcodes only. */
  maximumTextLength?: number;
  /** Lock focus distance withing minimum possible range */
  minFocusDistanceLock?: boolean;
  /** Optional minimum required quiet zone on the barcode. Measured in modules (the size of minimal bar on the barcode). The default is 10. NOTE - This feature works on ITF barcodes only. */
  minimum1DBarcodesQuietZone?: number;
  /** With this option enabled, the scanner removes checks digits for UPC, EAN and MSI Plessey codes. Has no effect if both single and double digit MSI Plessey checksums are enabled. The default is `false` */
  stripCheckDigits?: boolean;
  /** Whether scanner screen should make a sound on successful barcode or MRZ detection. */
  successBeepEnabled?: boolean;
  /** Background color of the top bar. */
  topBarBackgroundColor?: string;
  /** Foreground color of the cancel button. */
  topBarButtonsColor?: string;
  /** Accepted barcode formats */
  barcodeFormats?: BarcodeFormat[];
  /** Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE. Android only. */
  useButtonsAllCaps?: boolean;
  /** If `true`, replaces the cancel button in the top bar with a back arrow icon. The default value is FALSE. Android only. */
  replaceCancelButtonWithIcon?: boolean;
  /** Preview mode of the camera. FILL_IN or FIT_IN. Default is FILL_IN. Android only */
  cameraPreviewMode?: CameraPreviewMode;
  /** The range of valid camera zoom factors. Default value is (1.0; 12.0). */
  cameraZoomRange?: ZoomRange;
  /** Sets auto close timer in seconds. 0 = disabled and it is the default value. */
  autoCancelTimeout?: number;
  /** The GS1 handling mode. The default value is PARSE. */
  gs1HandlingMode?: Gs1HandlingMode;
  /** The checksum algorithm for MSI Plessey barcodes. The default value is MOD_10. */
  msiPlesseyChecksumAlgorithm?: MSIPlesseyChecksumAlgorithm;
  /** If `true`, enabled the mode which slightly decreases the scanning quality and the energy consumption, and increases the scanning speed. If `false` - mode is disabled. The default is `false`. Android only. */
  lowPowerMode?: boolean;
  /** The expected density of QR codes in an image. */
  codeDensity?: CodeDensity;
  /** Scanning delay after scanner appearance in seconds. Defaults to 0 secs. */
  initialScanDelay?: number;
  /** Freezes a preview after a scan for a given amount of seconds. Defaults to 0 secs. Android only. */
  delayAfterScan?: number;
  /** When this property is set to true, the zoom can be activated by double tapping somewhere in the receivers view. iOS only. */
  doubleTapToZoomEnabled?: boolean;
  /** When this property is set to true, the zoom can be activated by a pinch gesture somewhere in the receivers view. iOS only. */
  pinchToZoomEnabled?: boolean;
  /** Defines, if zooming in or out should be animated. iOS only. */
  shouldAnimateZooming?: boolean;
  /** Display the region of interest. The default value is TRUE. */
  viewFinderEnabled?: boolean;
  /** The confirmation dialog configuration. */
  confirmationDialogConfiguration?: ConfirmationDialogConfiguration;
  /** The selection overlay configuration. */
  overlayConfiguration?: SelectionOverlayConfiguration;
  /** Filter barcodes by regular expression. To accept scanned barcode, regular expression should match the entire barcode value */
  barcodeValueFilter?: string;

Notes

barcodeFormats is an optional array of barcode formats that acts as a detection filter. By default all supported formats will be detected.
acceptedDocumentFormats is an optional array of barcode document formats that act as a detection filter. By default all supported document formats will be detected.

Force Close

You can programmatically force the Barcode Scanner to close:

ScanbotBarcodeSDK.closeBarcodeScanner(successCallback, errorCallback);

Batch Barcode Scanner

ScanbotBarcodeSDK.startBatchBarcodeScanner(successCallback, errorCallback, config) Opens a Scanning UI to scan multiple barcodes and QR codes.

Callbacks:

successCallback : function(result)

result.status - OK If the scanning is completed, CANCELED if the user has canceled the operation (tapped on the "cancel" button).
result.data?.barcodes - Optional List of recognized barcodes as items. See the barcode item structure above.

errorCallback : function(error)

error.message - Contains the error message as a string.

Config:

All settings are optional.

barcodeFormats is an optional array of barcode formats that acts as a detection filter. By default all supported formats will be detected.
acceptedDocumentFormats is an optional array of barcode document formats that act as a detection filter. By default all supported document formats will be detected.

  /** An optional array of barcode document formats that act as a detection filter. By default all supported document formats will be detected. */
  acceptedDocumentFormats?: BarcodeDocumentFormat[];
  /** The extension filter for EAN and UPC barcodes. */
  barcodesExtensionFilter?: BarcodesExtensionFilter;
  /** Background color of the detection overlay. */
  cameraOverlayColor?: string;
  /** Background color of the detection overlay. */
  cameraModule?: CameraModule;
  /** The relative initial zoom level of the camera in the range (0,1), where 0 is zoomed out and 1 is zoomed in. The default value is 0. */
  cameraZoomFactor?: number;
  /** The range of valid camera zoom factors. Default value is (1.0; 12.0). */
  cameraZoomRange?: ZoomRange;
  /** Whether the cancel button is hidden or not. iOS only. */
  cancelButtonHidden?: boolean;
  /** String being displayed on the cancel button. */
  cancelButtonTitle?: string;
  /** When this property is set to true, the zoom can be activated by double tapping somewhere in the receivers view. iOS only. */
  doubleTapToZoomEnabled?: boolean;
  /** When this property is set to true, the zoom can be activated by a pinch gesture somewhere in the receivers view. iOS only. */
  pinchToZoomEnabled?: boolean;
  /** Defines, if zooming in or out should be animated. iOS only. */
  shouldAnimateZooming?: boolean;
  /** The engine mode to be used for barcode scanning. The default value is NEXT_GEN. */
  engineMode?: EngineMode;
  /** Foreground color of the detection overlay. */
  finderLineColor?: string;
  /** Width of finder frame border. Default is 2. */
  finderLineWidth?: number;
  /** String being displayed as description. */
  finderTextHint?: string;
  /** Foreground color of the description label. */
  finderTextHintColor?: string;
  /** Aspect ratio of finder frame (width \ height), which is used to build actual finder frame. Default is 1 - it is a square frame, which is good for QR capturing. */
  finderAspectRatio?: AspectRatio;
  /** Controls whether the flash toggle button is hidden or not. iOS only. */
  flashButtonHidden?: boolean;
  /** String being displayed on the flash button. iOS only. */
  flashButtonTitle?: string;
  /** Whether flash is toggled on or off. */
  flashEnabled?: boolean;
  /** Disables auto-focus and locks the lens at the specified focus lock lens position. The default value is false. iOS only. */
  focusLockEnabled?: boolean;
  /** The position of the lens. Values can be between 0.0f (minimum focusing distance) and 1.0f (maximum focusing distance). The default value is 0.0 iOS only. For Android, minFocusDistanceLock can be used. */
  focusLockPosition?: number;
  /** Whether touch-to-focus is enabled on camera preview. Enabled by default. Android only. */
  touchToFocusEnabled?: boolean;
  /** UI Interface orientation lock mode */
  orientationLockMode?: OrientationLockMode;
  /** Optional minimum required text length of the detected barcode. The default is 0 (setting is turned off). NOTE - This feature works on ITF barcodes only. */
  minimumTextLength?: number;
  /** Optional maximum text length of the detected barcode. The default is 0 (setting is turned off). NOTE - This feature works on ITF barcodes only. */
  maximumTextLength?: number;
  /** Optional minimum required quiet zone on the barcode. Measured in modules (the size of minimal bar on the barcode). The default is 10. NOTE - This feature works on ITF barcodes only. */
  minimum1DBarcodesQuietZone?: number;
  /** Lock focus distance withing minimum possible range */
  minFocusDistanceLock?: boolean;
  /** With this option enabled, the scanner removes checks digits for UPC, EAN and MSI Plessey codes. Has no effect if both single and double digit MSI Plessey checksums are enabled. The default is `false` */
  stripCheckDigits?: boolean;
  /** Whether scanner screen should make a sound on successful barcode or MRZ detection. */
  successBeepEnabled?: boolean;
  /** Background color of the top bar. */
  topBarBackgroundColor?: string;
  /** Foreground color of the cancel button. */
  topBarButtonsColor?: string;
  /** Foreground color of the top bar buttons when disabled. */
  topBarButtonsInactiveColor?: string;
  /** Accepted barcode formats */
  barcodeFormats?: BarcodeFormat[];
  /** Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE. Android only. */
  useButtonsAllCaps?: boolean;
  /** The GS1 handling mode. The default value is PARSE. */
  gs1HandlingMode?: Gs1HandlingMode;
  /** The checksum algorithm for MSI Plessey barcodes. The default value is MOD_10. */
  msiPlesseyChecksumAlgorithm?: MSIPlesseyChecksumAlgorithm;
  /** If `true`, enabled the mode which slightly decreases the scanning quality and the energy consumption, and increases the scanning speed. If `false` - mode is disabled. The default is `false`. Android only. */
  lowPowerMode?: boolean;
  /** The color for barcodes count text */
  barcodesCountText?: string;
  /** The color for barcodes count text */
  barcodesCountTextColor?: string;
  /** Text of the button which clears the list of scanned barcodes. */
  clearButtonTitle?: string;
  /** The color of Submit button */
  detailsActionColor?: string;
  /** The color of bottom sheet */
  detailsBackgroundColor?: string;
  /** The color of text elements in bottom sheet */
  detailsPrimaryColor?: string;
  /** String being displayed on the delete button. iOS only. */
  deleteButtonTitle?: string;
  /** Title of the button that opens the screen where the user can allow the usage of the camera by the app. */
  enableCameraButtonTitle?: string;
  /** Text that will be displayed when the app is not allowed to use the camera, prompting the user to enable the usage of the camera. */
  enableCameraExplanationText?: string;
  /** The text for the data fetching state of the barcode item in a list. Smth "Fetching info…" */
  fetchingStateText?: string;
  /** Text of the message that there are no barcodes scanned */
  noBarcodesTitle?: string;
  /** Text of the button which finishes the flow */
  submitButtonTitle?: string;
  /** The expected density of QR codes in an image. */
  codeDensity?: CodeDensity;
  /** If `true`, replaces the cancel button in the top bar with a back arrow icon. The default value is FALSE. Android only. */
  replaceCancelButtonWithIcon?: boolean;
  /** Preview mode of the camera. FILL_IN or FIT_IN. Default is FILL_IN. Android only */
  cameraPreviewMode?: CameraPreviewMode;
  /** Sets auto close timer in seconds. 0 = disabled and it is the default value. Android only */
  autoCancelTimeout?: number;
  /** Scanning delay after scanner appearance in seconds. Defaults to 0 secs. */
  initialScanDelay?: number;
  /** Display the region of interest. The default value is TRUE. */
  viewFinderEnabled?: boolean;
  /** The selection overay configuration. */
  overlayConfiguration?: SelectionOverlayConfiguration;
  /** Filter barcodes by regular expression. To accept scanned barcode, regular expression should match the entire barcode value */
  barcodeValueFilter?: string;

Force Close

You can programmatically force the Batch Barcode Scanner to close:

ScanbotBarcodeSDK.closeBatchBarcodeScanner(successCallback, errorCallback);

Barcode Format

The following barcode formats are currently supported on Android and iOS.

1D Barcodes

BarcodeFormat.CODE_39
BarcodeFormat.CODE_93
BarcodeFormat.CODE_128
BarcodeFormat.CODABAR
BarcodeFormat.UPC_A
BarcodeFormat.UPC_E
BarcodeFormat.EAN_8
BarcodeFormat.EAN_13
BarcodeFormat.ITF
BarcodeFormat.RSS_14
BarcodeFormat.RSS_EXPANDED
BarcodeFormat.CODE_25
BarcodeFormat.MSI_PLESSEY
BarcodeFormat.IATA_2_OF_5
BarcodeFormat.INDUSTRIAL_2_OF_5
BarcodeFormat.USPS_INTELLIGENT_MAIL
BarcodeFormat.ROYAL_MAIL
BarcodeFormat.JAPAN_POST
BarcodeFormat.ROYAL_TNT_POST
BarcodeFormat.AUSTRALIA_POST
BarcodeFormat.DATABAR_LIMITED
BarcodeFormat.GS1_COMPOSITE

2D Barcodes

BarcodeFormat.QR_CODE
BarcodeFormat.MICRO_QR_CODE
BarcodeFormat.AZTEC
BarcodeFormat.PDF_417
BarcodeFormat.DATA_MATRIX

Data parsers

Barcodes, especially the two-dimensional ones, e.g. data matrices and QR codes, are often used to encode structured data or documents. This structured data can be parsed into document-like data structures that let you access the data fields conveniently, for example Swiss QR-Codes, SEPA forms, medical plans, boarding passes, medical certificates and vCard addresses.

The following data parsers are currently supported:

AAMVA: Parse the AAMVA data format from PDF-417 barcodes on US driver’s licenses.
Boarding pass data from PDF-417 barcodes.
Parser for German Medical Certificates (aka. Disability Certificate or AU-Bescheinigung) coded in a PDF-417 barcode.
GS1 encoded data from barcodes.
Data from PDF-417 barcodes on ID Cards.
Parse and extract data from XML of Data Matrix barcodes on Medical Plans (German Medikationsplan).
Data parser of QR-Code values printed on SEPA pay forms.
vCard data from a QR-Code (e.g. on business cards).
Swiss QR data from a QR-Code for easy, automatic and efficient payments.

Want to scan longer than one minute?

Generate your free "no-strings-attached" Trial License and properly test the Scanbot SDK.

Get your free Trial License

Barcode Scanner UI | Cordova Barcode Scanner

Barcode and QR Code Scanning UI

Barcode Scanner

BarcodeScannerConfiguration

Force Close

Batch Barcode Scanner

Callbacks:

Config:

Force Close

Barcode Format

1D Barcodes

2D Barcodes

Data parsers

Want to scan longer than one minute?

What do you think of this documentation?

On this page

Barcode Scanner UI | Cordova Barcode Scanner

Barcode and QR Code Scanning UI​

Barcode Scanner​

BarcodeScannerConfiguration​

Force Close​

Batch Barcode Scanner​

Callbacks:​

Config:​

Force Close​

Barcode Format​

1D Barcodes​

2D Barcodes​

Data parsers​

Want to scan longer than one minute?

What do you think of this documentation?

On this page

Barcode and QR Code Scanning UI

Barcode Scanner

BarcodeScannerConfiguration

Force Close

Batch Barcode Scanner

Callbacks:

Config:

Force Close

Barcode Format

1D Barcodes

2D Barcodes

Data parsers