Skip to main content

License Plate Scanner | Cordova Document Scanner

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.

alt text alt text

Integrating the License Plate Scanner UI#

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

import ScanbotSdk, { LicensePlateScannerConfiguration } 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 config: LicensePlateScannerConfiguration = {  // Customize colors, text resources, behavior, etc..  detectorMode: 'ML_BASED',  topBarBackgroundColor: '#c8193c',  topBarButtonsColor: '#ffffff',  cancelButtonTitle: 'Cancel',  finderLineColor: '#c8193c',  finderLineWidth: 5,  guidanceText: 'Place the whole license plate in the frame to scan it',  orientationLockMode: 'PORTRAIT',  confirmationDialogConfirmButtonFilled: true,  // see further configs...};
const result = await this.SDK.UI.startLicensePlateScanner({uiConfigs: config});
if (result.status === 'CANCELED') {  // user has canceled the scanning operation  return;}
// handle the extracted data// result.licensePlateResult...

Detector Mode:

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 detectorMode: 'ML_BASED' or detectorMode: '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 result object contains the following fields:

  • status: 'OK' if data was extracted, 'CANCELED' if the user canceled the operation (tapped on the "cancel" button).
  • licensePlateResult.rawText: Extracted raw text value.
  • licensePlateResult.countryCode: Parsed country code, if available.
  • licensePlateResult.licensePlate: Parsed value of the actual license plate.
  • licensePlateResult.confidence: Confidence in the accuracy of licensePlate

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 {    /**     * 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;    /**     * Detector mode, classic (OCR based) or ML (machine learning based) approach.     */    detectorMode?: LicensePlateDetectorMode;    /**     * User guidance hint text.     */    guidanceText?: string;    /**     * Maximum number of accumulated frames to inspect before actual result is returned.     */    maximumNumberOfAccumulatedFrames?: number;    /**     * Minimum number of accumulated frames that must have equal result.     */    minNumberOfRequiredFramesWithEqualRecognitionResult?: number;    /**     * Color of the titles of buttons in the top toolbar when inactive.     */    topBarButtonsInactiveColor?: string;    /**     * Background color outside of the finder window.     */    cameraOverlayColor?: string;    /**     * 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.     */    confirmationDialogRetryButtonTitle?: string;    /**     * The title of the confirmation dialog confirm button.     */    confirmationDialogConfirmButtonTitle?: string;    /**     * The accent color of buttons on a confirmation dialog.     */    confirmationDialogAccentColor?: string;    /**     * Allows to set if the confirm button should be filled. Defaults to TRUE.     */    confirmationDialogConfirmButtonFilled?: boolean;    /**     * Allows to set a text color of the filled button. See `confirmationDialogConfirmButtonFilled`.     */    confirmationDialogConfirmButtonFilledTextColor?: string;}