Barcode Scanner UI | Capacitor Document Scanner
The Scanbot SDK provides a Ready-To-Use UI screen component for Barcode and QR-Code scanning.
Integrating the Barcode Scanner UI
Use the plugin API method ScanbotSDK.startBarcodeScanner to start the Barcode Scanner UI.
import { ScanbotSDK } from 'capacitor-plugin-scanbot-sdk';
// Always make sure you have a valid license on runtime via ScanbotSDK.getLicenseInfo()
if (!licenseCheckMethod()) { return; }
const configuration: BarcodeScannerConfiguration = {
// Customize colors, text resources, behavior, etc..
finderTextHint: 'Please align the barcode or QR code in the frame above to scan it.',
orientationLockMode: 'PORTRAIT',
finderLineColor: '#0000ff',
//barcodeFormats: ['QR_CODE', 'EAN_13', ...], // optional filter for specific barcode types
// see further configs ...
};
const result = await ScanbotSDK.startBarcodeScanner(configuration);
if (result.status === 'CANCELED') {
// user has canceled the scanning operation
return;
}
// handle the scanned barcode(s) from result
// result.barcodes[n]...
Handling the Result
The result object contains the following fields:
result.status: Result status,'OK'if at least one barcode was scanned,'CANCELED'if the user canceled the operation.result.barcodes[]: An array of detected barcodes. If no barcodes were detected, the array will be empty or null.result.barcodes[n].type: Format of detected barcode/QR code (e.g.CODE_128,EAN_13,QR_CODE, etc).result.barcodes[n].text: Text value of detected and decoded barcode/QR code.
Customization
The UI and the behavior of the Barcode Scanner can be customized by passing the configs value via BarcodeScannerConfiguration.
All configuration options are optional.
export interface BarcodeScannerConfiguration {
/** 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;
/** Filter barcodes results by regular expression. To accept scanned barcode, regular expression should match the entire barcode value. By default, no filter is applied */
barcodeValueFilter?: string;
/** 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;
}
Integrating the Batch Barcode Scanner UI
The Batch Barcode Scanner supports scanning and collecting multiple barcodes and QR-codes in a row.
Use the plugin API method ScanbotSDK.startBatchBarcodeScanner to start the Batch Barcode Scanner UI.
import { ScanbotSDK } from 'capacitor-plugin-scanbot-sdk';
// Always make sure you have a valid license on runtime via ScanbotSDK.getLicenseInfo()
if (!licenseCheckMethod()) { return; }
const configuration: BatchBarcodeScannerConfiguration = {
// Customize colors, text resources, behavior, etc..
finderTextHint: 'Please align the barcode or QR code in the frame above to scan it.',
orientationLockMode: 'PORTRAIT',
finderLineColor: '#0000ff',
//barcodeFormats: ['QR_CODE', 'EAN_13', ...], // optional filter for specific barcode types
// see further configs ...
};
const result = await ScanbotSDK.startBatchBarcodeScanner(configuration);
if (result.status === 'CANCELED') {
// user has canceled the scanning operation
return;
}
// handle the scanned barcode(s) from result
// result.barcodes[n]...
Handling the Result
The result object contains the following fields:
result.status: Result status,'OK'if at least one barcode was scanned,'CANCELED'if the user canceled the operation.result.barcodes[]: An array of detected barcodes. If no barcodes were detected, the array will be empty or null.result.barcodes[n].type: Format of detected barcode/QR code (e.g.CODE_128,EAN_13,QR_CODE, etc).result.barcodes[n].text: Text value of detected and decoded barcode/QR code.result.canceledDueToTimeout: Optional boolean field. Available only in case ofstatus="CANCELED":trueIf the config valueautoCancelTimeoutwas specified, AND the UI was auto-canceled due to timeout.falseIf the user closed the UI via the "cancel" button.
Customization
The UI and the behavior of the Batch Barcode Scanner can be customized by passing the configs value via BatchBarcodeScannerConfiguration.
All configuration options are optional.
export interface BatchBarcodeScannerConfiguration {
/** 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;
/** Filter barcodes results by regular expression. To accept scanned barcode, regular expression should match the entire barcode value. By default, no filter is applied */
barcodeValueFilter?: string;
/** 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 (0.0; 12.0). iOS only. */
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;
/** String being displayed on the cancel button. */
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;
}
Selection Overlay Configuration (AR Overlay)
Our Scanbot Barcode Scanner UI and Batch Barcode Scanner UI accept a overlayConfiguration property that allows you to customise the AR Overlay look and behavior.
You can refer to the following classes:
export interface SelectionOverlayConfiguration {
/** Whether the barcode selection overlay is enabled or not. */
overlayEnabled: boolean;
/** Whether the barcode is selected automatically when being detected or not. */
automaticSelectionEnabled: boolean;
/** Define the way of how to show barcode data with selection overlay. */
textFormat: BarcodeOverlayTextFormat;
/** The color of the polygon in the selection overlay. */
polygonColor: string;
/** The color of the text in the selection overlay. */
textColor: string;
/** The color of the texts background in the selection overlay. */
textContainerColor: string;
/** The color of the polygon in the selection overlay, when highlighted. */
highlightedPolygonColor: string;
/** The color of the text in the selection overlay, when highlighted. */
highlightedTextColor: string;
/** The color of the texts background in the selection overlay, when highlighted. */
highlightedTextContainerColor: string;
}
/** Barcode scanner engine mode */
export declare type BarcodeOverlayTextFormat =
/** Show only barcode overlay frame. */
'NONE'
/** Show barcode value with extention. */
| 'CODE'
/** Show barcode value with barcode format. */
| 'CODE_AND_TYPE';
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 LicenseWhat do you think of this documentation?
What can we do to improve it? Please be as detailed as you like.