Skip to main content

ID Card Scanner | Cordova Document Scanner

The ID Card Scanner detects and recognizes ID cards or passports on video frames and extracts the data fields, like names, dates, photo, signature, MRZ, etc.

Note: This feature is currently limited to German ID cards and passports.

Integrating the ID Card Scanner UI#

The ID Card Scanner is based on the OCR feature and thus requires the proper installation of the OCR language files deu.traineddata and eng.traineddata (aka. blob files). For more details on how to set up OCR language files please refer to the OCR section.

Use the plugin API method ScanbotSdk.UI.startIdCardScanner() to start the ID Card Scanner UI.

import ScanbotSdk, { IdCardScannerConfiguration } 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: IdCardScannerConfiguration = {  // Customize colors, text resources, behavior, etc..  shouldSavePhotoImageInStorage: true,  // see further configs...};
const result = await this.SDK.UI.startIdCardScanner({uiConfigs: config});
if (result.status === 'CANCELED') {  // user has canceled the scanning operation  return;}
// handle the extracted data// result.fields.surname// result.fields.givenNames// ...

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).
  • fields: An object with extracted data fields.

The fields property contains the following properties:

  • id
  • surname
  • givenNames
  • birthDate
  • nationality
  • expiryDate
  • mrz
  • photoImageUri
  • signatureImageUri

And additionally, depending on the type of card, the following properties:

  • birthplace
  • issueDate
  • issuingAuthority
  • address
  • eyeColor
  • height
  • pin
  • pseudonym
  • countryCode
  • gender
  • maidenName
  • passportType

Customization#

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

export interface IdCardScannerConfiguration{    /**     * Accepted document types. All other document types will be ignored.     * By default - DeIdFront, DeIdBack and DePassport     */    acceptedDocumentTypes?: IdCardDocumentType[]    /**     * Allowed orientations for automatic interface rotations. *     */    allowedInterfaceOrientations?: UIInterfaceOrientationMask;    /**     * Background color of the detection overlay.     */    cameraOverlayColor?: string;    /**     * Whether the cancel button is hidden or not.     */    cancelButtonHidden?: boolean;    /**     * String being displayed on the cancel button.     */    cancelButtonTitle?: string;    /**     * String being displayed on the clear button.     */    clearButtonTitle?: string;    /**     * String that shows average confidence value of scanned card. Use %li as number formatting symbol.     */    confidenceValue?: string;    /**     * Foreground color of the top bar buttons on the details screen.     */    detailsActionColor?: string;    /**     * Background color of the details screen.     */    detailsBackgroundColor?: string;    /**     * Text color in the details list. Also affects image background and separator.     */    detailsPrimaryColor?: string;    /**     * A title for address field in details screen.     */    fieldAddressTitle?: string;    /**     * A title for birth date field in details screen.     */    fieldBirthDateTitle?: string;    /**     * A title for birth place field in details screen.     */    fieldBirthPlaceTitle?: string;    /**     * Color of confidence value label background in details screen, when the field confidence level is high.     */    fieldConfidenceHighColor?: string;    /**     * Color of confidence value label background  in details screen, when the field confidence level is low.     */    fieldConfidenceLowColor?: string;    /**     * Color of confidence value label background  in details screen, when the field confidence level is moderate.     */    fieldConfidenceModerateColor?: string;    /**     * Color of confidence value label text in details.     */    fieldConfidenceTextColor?: string;    /**     * A title for country code field in details screen.     */    fieldCountryCodeTitle?: string;    /**     * A title for expiry date field in details screen.     */    fieldExpiryDateTitle?: string;    /**     * A title for eye color field in details screen.     */    fieldEyeColorTitle?: string;    /**     * A title for gender field in details screen.     */    fieldGenderTitle?: string;    /**     * A title for given names field in details screen.     */    fieldGivenNamesTitle?: string;    /**     * A title for height field in details screen.     */    fieldHeightTitle?: string;    /**     * A title for id field in details screen.     */    fieldIDTitle?: string;    /**     * A title for issuing date field in details screen.     */    fieldIssueDateTitle?: string;    /**     * A title for issuing authority  field in details screen.     */    fieldIssuingAuthorityTitle?: string;    /**     * A title for maiden name field in details screen.     */    fieldMaidenNameTitle?: string;    /**     * A title for machine readable zone field in details screen.     */    fieldMRZTitle?: string;    /**     * A title for nationality field in details screen.     */    fieldNationalityTitle?: string;    /**     * A title for passport type field in details screen.     */    fieldPassportTypeTitle?: string;    /**     * A title for photo field in details screen.     */    fieldPhotoTitle?: string;    /**     * A title for PIN field in details screen.     */    fieldPINTitle?: string;    /**     * A title for pseudonym field in details screen.     */    fieldPseudonymTitle?: string;    /**     * String used for displaying amount of detected fields. Use %li for number formatting symbol.     */    fieldsCountText?: string;    /**     * Text color of the fields count label.     */    fieldsCountTextColor?: string;    /**     * A title for signature field in details screen.     */    fieldSignatureTitle?: string;    /**     * A title for surname field in details screen.     */    fieldSurnameTitle?: string;    /**     * Foreground color of the detection overlay.     */    finderLineColor?: string;    /**     * Width of finder frame border. Default is 2.     */    finderLineWidth?: number;    /**     * Whether the torch light is toggled on or off.     */    flashEnabled?: boolean;    /**     * A title to show image content.     */    imageTitle?: string;    /**     * String that notifies that nothing was scanned yet.     */    noDataTitle?: string;    /**     * String that asks user to scan back side of a card.     */    scanBackSideTitle?: string;    /**     * String that asks user to scan front side of a card.     */    scanFrontSideTitle?: string;    /**     * String that notifies that both sides of card are scanned.     */    scannedEverythingTitle?: string;    /**     * Defines, if photo image should be stored in internal storage (SBSDKUIIDCardStorage) on disk.     */    shouldSavePhotoImageInStorage?: boolean;    /**     * Defines, if signature image should be stored in internal storage (SBSDKUIIDCardStorage) on disk.     */    shouldSaveSignatureImageInStorage?: boolean;    /**     * String that asks user to start scanning a card.     */    startScanningTitle?: string;    /**     * String being displayed on the submit button.     */    submitButtonTitle?: string;    /**     * Color of tip background on scanning screen.     */    tipBackgroundColor?: string;    /**     * Color of tip text on scanning screen.     */    tipTextColor?: string;    /**     * Background color of the top bar.     */    topBarBackgroundColor?: string;    /**     * Foreground color of the top bar buttons on the scanning screen.     */    topBarButtonsColor?: string;    /**     * Foreground color of the flash button when flash is off.     */    topBarButtonsInactiveColor?: string;    /**     * Controls whether buttons should use all capitals style, as defined by the Android Material Design. Defaults to TRUE.     * Android only.     */    useButtonsAllCaps?: boolean;    /**     * The accepted minimal sharpness score. Images with a score less than that will     * be rejected with blurry status.     *     * 0 - any image will be accepted.     * 80 - a good compromise; the recommended setting.     * 100 - only very sharp images will be accepted.     *     * The default value is 80.     */    sharpnessAcceptanceFactor?: number;}