Skip to main content

Barcode Scanner UI | Capacitor Barcode Scanner

The Scanbot Barcode Scanner SDK provides a Ready-To-Use UI screen component for Barcode and QR-Code scanning.

alt text

Integrating the Barcode Scanner UI

Use the plugin API method ScanbotBarcodeSDK.startBarcodeScanner to start the Barcode Scanner UI.

// Always make sure you have a valid license on runtime via ScanbotBarcodeSDK.getLicenseInfo()
if (!(await this.isLicenseValid())) {
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: '#ffffff',
barcodeFormats: await this.scanbotUtils.getAcceptedBarcodeFormats(), // optional filter for specific barcode types
acceptedDocumentFormats: await this.scanbotUtils.getAcceptedBarcodeDocumentFormats(), // optional filter for specific document types
finderAspectRatio: { width: 1, height: 1 },
useButtonsAllCaps: false,
// see further configs ...
};

try {
const result = await ScanbotBarcodeSDK.startBarcodeScanner(configuration);

if (result.status === 'CANCELED') {
// User has canceled the scanning operation
} else if (result.data?.barcodes && result.data.barcodes.length > 0) {
// Handle the scanned barcode from result
this.utils.showResultInfo(JSON.stringify(result.data.barcodes, null, 2));
} else {
this.utils.showInfoAlert('No barcode scanned');
}
} catch (error: any) {
this.utils.showErrorAlert(error);
}

Handling the Result

The result object contains status property indicating if the operations is canceled or not, and data property that represent an array of detected barcodes:

/** The Barcode Scanner Result Field */
export interface BarcodeResultField {
/** The recognized barcode type */
type: BarcodeFormat;

/** The recognized barcode text */
text: string;

/** The recognized barcode text with extension (if available) */
textWithExtension: string;

/** The array of raw bytes that compose the recognized barcode */
rawBytes: number[];

/** True if the Barcode Document has been parsed successfully */
parsedSuccessful: boolean;

/** The formatted barcode document (if it was parsed succesfully) */
formattedResult?: AAMVADocumentFormat | BoardingPassDocumentFormat | GS1DocumentFormat | IDCardPDF417DocumentFormat | MedicalCertificateDocumentFormat | MedicalPlanDocumentFormat | SEPADocumentFormat | SwissQRCodeDocumentFormat | VCardDocumentFormat;
}

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;

/** 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 results by regular expression. To accept scanned barcode, regular expression should match the entire barcode value. By default, no filter is applied. */
barcodeValueFilter?: string;
}

Force Close

You can programmatically force the Barcode Scanner to close with:

await ScanbotBarcodeSDK.closeBarcodeScanner();

Integrating the Batch Barcode Scanner UI

The Batch Barcode Scanner supports scanning and collecting multiple barcodes and QR-codes in a row.

alt text

Use the plugin API method ScanbotBarcodeSDK.startBatchBarcodeScanner to start the Batch Barcode Scanner UI.

// Always make sure you have a valid license on runtime via ScanbotBarcodeSDK.getLicenseInfo()
if (!(await this.isLicenseValid())) {
return;
}

const configuration: BatchBarcodeScannerConfiguration = {
// Customize colors, text resources, behavior, etc..
finderTextHint: 'Please align the code in the frame above to scan it.',
orientationLockMode: 'PORTRAIT',
finderLineColor: '#ffffff',
barcodeFormats: await this.scanbotUtils.getAcceptedBarcodeFormats(), // optional filter for specific barcode types
acceptedDocumentFormats: await this.scanbotUtils.getAcceptedBarcodeDocumentFormats(), // optional filter for specific document types
finderAspectRatio: { width: 1, height: 1 },
useButtonsAllCaps: false,
// see further configs ...
}

try {
const result = await ScanbotBarcodeSDK.startBatchBarcodeScanner(configuration);

if (result.status === 'CANCELED') {
// User has canceled the scanning operation
} else if (result.data?.barcodes && result.data?.barcodes.length > 0) {
// Handle the scanned barcode(s) from result
this.utils.showResultInfo(JSON.stringify(result.data.barcodes, null, 2));
} else {
this.utils.showInfoAlert('No barcodes scanned');
}
} catch (error: any) {
this.utils.showErrorAlert(error);
}

Handling the Result

Result received from the batch and single scanning is the same.

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;

/** 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 results by regular expression. To accept scanned barcode, regular expression should match the entire barcode value. By default, no filter is applied. */
barcodeValueFilter?: string;
}

Force Close

You can programmatically force the Batch Barcode Scanner to close with:

await ScanbotBarcodeSDK.closeBatchBarcodeScanner();

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

What do you think of this documentation?