Capacitor License Plate Scanner SDK - Introduction

The License Plate Scanner is a Ready-To-Use UI component for scanning EU license plates on vehicles in real-time. The recognition is based on the OCR engine and Machine Learning algorithms of Scanbot SDK. The UI contains a configurable finder (frame) that is used to capture the license plate.

Integrating the License Plate Scanner UI

Use the plugin API method ScanbotSDK.startLicensePlateScanner() to start the License Plate Scanner UI.

import { ScanbotSDK, LicensePlateScannerConfiguration } from 'capacitor-plugin-scanbot-sdk';

// Always make sure you have a valid license on runtime via ScanbotSDK.getLicenseInfo()
if (!licenseCheckMethod()) { return; }

const configuration: LicensePlateScannerConfiguration = {
  // Customize colors, text resources, behavior, etc..
  scanStrategy: 'MlBased',
  topBarBackgroundColor: '#c8193c',
  cancelButtonTitle: 'Cancel',
  finderLineColor: '#c8193c',
  finderLineWidth: 5,
  finderTextHint: 'Place the whole license plate in the frame to scan it',
  orientationLockMode: 'PORTRAIT',
  confirmationDialogConfirmButtonFilled: true,
  // see further configs...
};

const result = await ScanbotSDK.startLicensePlateScanner(configuration);

if (result.status === 'CANCELED') {
  // user has canceled the scanning operation
  return;
}

// handle the extracted data
// result.licensePlateResult...

Scan Strategy:

The scanner supports the following 2 modes for detection:

• ML_BASED: A new Machine Learning based approach to recognize license plates (aka v2). Recommended mode, as the algorithm is continuously developed and improved.
• CLASSIC: Classic OCR based approach (aka v1).

The mode can be set via configuration scanStrategy: 'ML_BASED' or scanStrategy: 'CLASSIC'.

Please note that the 'Classic' mode is based on the classic OCR feature and thus requires the proper installation of the OCR language file eng.traineddata. For more details on how to set up OCR language files please refer to the OCR section.

Handling the Result

The promise resolves to an object with the following properties:

• status - 'OK' if the License Plate was scanned, 'CANCELED' if the user canceled the scanner UI.
• licensePlate - the License Plate detected by the scanner
• confidence - confidence in the accuracy of the detection (0 - 100)
• countryCode - the Country Code on the License Plate as detected by the scanner

Customization

The UI and the behavior of the License Plate Scanner can be customized by passing the configs value via LicensePlateScannerConfiguration. All configuration options are optional.

export interface LicensePlateScannerConfiguration {
  /** The preferred camera module (default - BACK) */
  cameraModule?: CameraModule;

  /** Background color outside of the finder window. */
  cameraOverlayColor?: string;

  /** Title of the cancel button. */
  cancelButtonTitle?: string;

  /** Whether the cancel button is hidden or not. iOS only. */
  cancelButtonHidden?: boolean;

  /** The style of the confirmation dialog. iOS Only. */
  confirmationDialogStyle?: DialogStyle;

  /** The style of the confirmation dialogs confirm button. iOS Only. */
  confirmationDialogConfirmButtonStyle?: DialogButtonStyle;

  /** The style of the confirmation dialogs retry button. iOS Only. */
  confirmationDialogRetryButtonStyle?: DialogButtonStyle;

  /** 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;

  /** User guidance text below the finder view */
  finderTextHint?: string;

  /** Foreground color of the description label. */
  finderTextHintColor?: string;

  /** The preferred height of the view finder. Defaults to 150.0. iOS only. */
  finderPreferredHeight?: number;

  /** Controls whether the flash toggle button is hidden or not. iOS only. */
  flashButtonHidden?: boolean;

  /** Title of the flash toggle button. iOS only. */
  flashButtonTitle?: string;

  /** Controls whether the flash should be initially enabled. The default value is FALSE. */
  flashEnabled?: boolean;

  /** UI Interface orientation lock mode */
  orientationLockMode?: OrientationLockMode;

  /** The background color of the top toolbar. */
  topBarBackgroundColor?: string;

  /** The color of all active toggle buttons in the toolbar. */
  topBarButtonsActiveColor?: string;

  /** The color of all inactive toggle buttons in the toolbar. */
  topBarButtonsInactiveColor?: string;

  /** Minimum number of accumulated frames that have equal result */
  minNumberOfRequiredFramesWithEqualRecognitionResult?: number;

  /** Maximum number of accumulated frames to inspect before actual result is returned */
  maximumNumberOfAccumulatedFrames?: number;

  /** Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE. Android only. */
  useButtonsAllCaps?: boolean;

  /** 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'. Android only. */
  significantShakeDelay?: number;

  /** Detector mode, classic (OCR based) or ML (machine learning based) approach. */
  scanStrategy?: LicensePlateScanStrategy;

  /** The title of the confirmation dialog. */
  confirmationDialogTitle?: string;

  /** The message text of the confirmation dialog. */
  confirmationDialogMessage?: string;

  /** The title of the confirmation dialog retry button. */
  confirmationDialogConfirmButtonTitle?: string;

  /** The title of the confirmation dialog confirm button. */
  confirmationDialogRetryButtonTitle?: string;

  /** The accent color of buttons on a confirmation dialog. Android only. */
  confirmationDialogAccentColor?: string;

  /** Allows to set if the confirm button should be filled. Defaults to TRUE. Android only. */
  confirmationDialogConfirmButtonFilled?: boolean;

  /** Allows to set a text color of the filled button. See `confirmationDialogConfirmButtonFilled`. Android only. */
  confirmationDialogConfirmButtonFilledTextColor?: string;

  /** 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;

  /** Whether touch-to-focus is enabled on camera preview. Enabled by default. Android only. */
  touchToFocusEnabled?: boolean;
}

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get your free Trial License

What do you think of this documentation?

What can we do to improve it? Please be as detailed as you like.

---