Skip to main content

Cordova MRZ Scanner UI Components - SDK Features

The MRZ (Machine Readable Zone) Scanner is able to scan and decode the MRZ data on an ID card or passport.

alt text

Integrating the MRZ Scanner UI

Use the plugin API method ScanbotSdk.UI.startMrzScanner() to start the MRZ Scanner UI.

import ScanbotSdk, { MrzScannerConfiguration } 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 configs: MrzScannerConfiguration = {
// Customize colors, text resources, behavior, etc..
finderTextHint: 'Please hold your phone over the 2- or 3-line MRZ code at the front of your passport.',
interfaceOrientation: 'PORTRAIT',
// see further configs ...
};

const result = await this.SDK.UI.startMrzScanner({uiConfigs: configs});

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

// handle the extracted data fields
// result.mrzResult.fields[n]...
...

Handling the Result

The result object contains the following fields:

  • status: 'OK' if some MRZ data was detected, 'CANCELED' if the user canceled the operation (tapped on the "cancel" button).
  • mrzResult.fields[]: An array of MRZ fields. Each field is an object with the following properties:
    • field.name - the field type
    • field.value - the value of the field
    • field.confidence - confidence in the accuracy of value

Customization

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

export interface MrzScannerConfiguration
{
/**
* Background color outside of the finder window.
*/
cameraOverlayColor?: string;
/**
* Title of the cancel button.
*/
cancelButtonTitle?: 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;
/**
* Height of the finder window in pixels.
*/
finderHeight?: number;
/**
* Color of the finder window's outline.
*/
finderLineColor?: string;
/**
* Thickness of the finder window's outline.
*/
finderLineWidth?: number;
/**
* Text hint shown under the finder window.
*/
finderTextHint?: string;
/**
* Color of the text hint under the finder window.
*/
finderTextHintColor?: string;
/**
* Width of the finder window in pixels.
*/
finderWidth?: number;
/**
* The title for the flash button
*/
flashButtonTitle?: string;
/**
* Controls whether the flash should be initially enabled.
* The default value is FALSE.
*/
flashEnabled?: boolean;
/**
* Orientation lock mode of the UI and the camera preview.
* By default the orientation is not locked.
*/
interfaceOrientation?: UIInterfaceOrientationMask;
/**
* Controls whether to play a beep sound after a successful detection.
* Default value is TRUE.
*/
successBeepEnabled?: boolean;
/**
* Background color of the top toolbar.
*/
topBarBackgroundColor?: string;
/**
* Color of the titles of all buttons in the top toolbar.
*/
topBarButtonsColor?: string;
/**
* Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE.
* Android only.
*/
useButtonsAllCaps?: boolean;
}

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?