Skip to main content

Data Scanner | Cordova Document Scanner

The Data Scanner is a generic text recognizer and provides the ability to scan small text blocks with 1-2 lines in real-time. It is based on the OCR engine of Scanbot SDK. The UI contains a configurable finder (frame) within which the text to be scanned can be captured.

Typical use cases for the Data Scanner are the recognition of single-line text modules like IBAN numbers, insurance numbers, phone numbers, dates, and other simple textual data fields.

Furthermore, a special configuration of the Data Scanner allows scanning digits and characters from LC Dot-Matrix Displays.

alt text

Integrating the Data Scanner UI#

The Data Scanner is based on the OCR feature and thus requires the proper installation of the corresponding OCR language files (e.g. for English please add the file eng.traineddata). For more details on how to set up OCR language files please refer to the OCR section.

Use the plugin API method ScanbotSdk.UI.startDataScanner() to start the Data Scanner UI.

Start a scanner for an arbitrary text:

import ScanbotSdk, { DataScannerConfiguration, TextDataScannerStep } from 'cordova-plugin-scanbot-sdk';
private SDK = ScanbotSdk.promisify();
// Always make sure you have a valid license on runtime via SDK.getLicenseInfo()if (!licenseCheckMethod()) { return; }
const uiConfigs: DataScannerConfiguration = {  // Customize colors, text resources, behavior, etc..  cancelButtonTitle: 'Cancel',  topBarBackgroundColor: '#c8193c',  topBarButtonsColor: '#ffffff',  finderLineColor: '#c8193c',  orientationLockMode: 'PORTRAIT',  // see further configs...};
const scannerStep: TextDataScannerStep = {  textFilterStrategy: 'DOCUMENT',  guidanceText: 'Place the text line in the frame to scan it',  // an optional pattern can be used to validate scanned text and get better OCR results  // '?' for any character, '#' for any digit, all other characters represent themselves.  //pattern: '',  ...};
const result = await this.SDK.UI.startDataScanner({uiConfigs, scannerStep});
if (result.status === 'CANCELED') {  // user has canceled the scanning operation  return;}
// handle the extracted data// result.dataResult.textValue...

Start a scanner for LC Dot-Matrix Displays:

const uiConfigs: DataScannerConfiguration = {  // Customize colors, text resources, behavior, etc..};
const scannerStep: TextDataScannerStep = {  guidanceText: 'Place the LC display in the frame to scan it',  textFilterStrategy: 'LC_DOT_MATRIX_DISPLAY',};
const result = await this.SDK.UI.startDataScanner({uiConfigs, scannerStep});
if (result.status === 'CANCELED') { return; }
// handle the extracted data// result.dataResult.textValue...

Handling the Result#

The result object contains the following fields:

  • status: 'OK' if data was extracted, 'CANCELED' if the user canceled the operation (tapped on the "cancel" button).
  • dataResult.textValue: Extracted text value.
  • dataResult.confidence: Confidence in the accuracy of textValue

Customization#

The UI and the behavior of the Data Scanner can be customized by passing the configs value via DataScannerConfiguration and TextDataScannerStep. All configuration options are optional.

export interface DataScannerConfiguration {    /**     * Background color of the top bar.     */    topBarBackgroundColor?: string;    /**     * Color of the top bar buttons.     */    topBarButtonsColor?: string;    /**     * String being displayed on the cancel button.     */    cancelButtonTitle?: string;    /**     * Color of the finder window's outline.     */    finderLineColor?: string;    /**     * Thickness of the finder window's outline.     */    finderLineWidth?: number;    /**     * Color of the text hint under the finder window.     */    finderTextHintColor?: string;    /**     * Should the flashlight be enabled on start?     */    flashEnabled?: boolean;    /**     * Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE.     * Android only.     */    useButtonsAllCaps?: boolean;    /**     * 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;    /**     * Orientation lock mode of the UI and the camera preview.     * By default the orientation is not locked.     */    orientationLockMode?: CameraOrientationMode;}
export interface TextDataScannerStep {    /**     * User guidance hint text.     */    guidanceText: string;    /**     * Validation pattern to automatically validate recognized text.     * '?' = any character,     * '#' - any digit,     * all other characters represent themselves.     * An empty string or nil value will disable the validation pattern.     */    pattern?: string;    /**     * If set to TRUE pattern validation also validates successfully if only a part of the whole recognized text matches     * the the validation pattern.     * If set to FALSE, the whole text must match the validation pattern.     * Applies to pattern validation only. Defaults to FALSE.     */    shouldMatchSubstring?: boolean;    /**     * The cameras zoom level preferred for this step. The actual zoom might be different from the preferred one     * to avoid clipping of finder area and maintain its aspect ratio and height;     */    preferredZoom?: number;    /**     * The aspect ratio of the view finder area.     */    aspectRatio?: FinderAspectRatio;    /**     * The preferred height of the finder for zoom scale 1.0 (unzoomed).     * The actual finder height might change to maintain aspect ratio and to not clip the screen.     * Defaults to 40 points.     */    unzoomedFinderHeight?: number;    /**     * A string (list) of accepted characters during text recognition. If empty or nil, all characters are accepted.     * Defaults to nil.     */    allowedSymbols?: string;    /**     * Recognition strategy for the text.     */    textFilterStrategy?: TextFilterStrategy;    /**     * Threshold used to pause the detection after significant movement occurred.     * -1 is default value     * Default = 0 for textFilterStrategy='DOCUMENT' and 1000 for textFilterStrategy='LCD_DOT_MATRIX_DISPLAY'     */    significantShakeDelay?: number;}