diff --git a/_config.yml b/_config.yml index 89ea1a4..5bf3132 100644 --- a/_config.yml +++ b/_config.yml @@ -23,6 +23,14 @@ maui_api: /mrz-scanner/docs/mobile/programming/maui/api-reference/ maui_release_notes: /mrz-scanner/docs/mobile/programming/maui/release-notes/ maui_faq: /mrz-scanner/docs/mobile/programming/maui/faq/ +flutter: /mrz-scanner/docs/mobile/programming/flutter/ +flutter_api: /mrz-scanner/docs/mobile/programming/flutter/api-reference/ +flutter_release_notes: /mrz-scanner/docs/mobile/programming/flutter/release-notes/ + +react_native: /mrz-scanner/docs/mobile/programming/react-native/ +react_native_api: /mrz-scanner/docs/mobile/programming/react-native/api-reference/ +react_native_release_notes: /mrz-scanner/docs/mobile/programming/react-native/release-notes/ + dcvb_android_api: /capture-vision/docs/mobile/programming/android/api-reference/ dcvb_ios_api: /capture-vision/docs/mobile/programming/ios/api-reference/ diff --git a/_includes/sidelist-full-tree.html b/_includes/sidelist-full-tree.html index 4f24b6e..18029d9 100644 --- a/_includes/sidelist-full-tree.html +++ b/_includes/sidelist-full-tree.html @@ -1,12 +1,21 @@
  • - MRZ Scanner-iOS Introduction + MRZ Scanner iOS Introduction
  • {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-programming/programming-ios.html" -%}
  • - MRZ Scanner-Android Introduction + MRZ Scanner Android Introduction
  • {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-programming/programming-android.html" -%}
  • - MRZ Scanner-MAUI Introduction + MRZ Scanner MAUI Introduction
  • {%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-programming/programming-maui.html" -%} +
  • + MRZ Scanner Flutter Introduction +
  • +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-programming/programming-maui.html" -%} +
  • + MRZ Scanner React Native Introduction +
  • +{%- include liquid_searchVersionTreeFile.html ver=include.ver curPath=include.curPath targetRelativePath="sidelist-programming/programming-maui.html" -%} + diff --git a/_includes/sidelist-programming/programming-flutter.html b/_includes/sidelist-programming/programming-flutter.html new file mode 100644 index 0000000..e4bdecd --- /dev/null +++ b/_includes/sidelist-programming/programming-flutter.html @@ -0,0 +1,47 @@ +
  • DEVELOPMENT
  • + +
  • User Guide + +
  • +
  • Demo & Samples
  • + +
  • API Reference + +
  • + +
  • USEFUL RESOURCES
  • + +
  • Release Notes + +
  • + +
  • License Initialization
  • + +
  • OTHERS
  • +
  • Develop for iOS (Objective-C & Swift)
  • +
  • Develop for Android (Java & Kotlin)
  • +
  • Develop for MAUI
  • +
  • Develop for React Native
  • + diff --git a/_includes/sidelist-programming/programming-react-native.html b/_includes/sidelist-programming/programming-react-native.html new file mode 100644 index 0000000..fcb4c8c --- /dev/null +++ b/_includes/sidelist-programming/programming-react-native.html @@ -0,0 +1,47 @@ +
  • DEVELOPMENT
  • + +
  • User Guide + +
  • +
  • Demo & Samples
  • + +
  • API Reference + +
  • + +
  • USEFUL RESOURCES
  • + +
  • Release Notes + +
  • + +
  • License Initialization
  • + +
  • OTHERS
  • +
  • Develop for iOS (Objective-C & Swift)
  • +
  • Develop for Android (Java & Kotlin)
  • +
  • Develop for MAUI
  • +
  • Develop for Flutter
  • + diff --git a/programming/flutter/api-reference/document-type.md b/programming/flutter/api-reference/document-type.md new file mode 100644 index 0000000..807a201 --- /dev/null +++ b/programming/flutter/api-reference/document-type.md @@ -0,0 +1,35 @@ +--- +layout: default-layout +title: EnumDocumentType - Dynamsoft MRZ Scanner Flutter Edition +description: EnumDocumentType of DynamsoftMRZScanner Flutter is an enumeration class that defines the result status of the MRZScanResult. +keywords: document type, id cards, passports +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: EnumDocumentType +--- + +# EnumDocumentType + +`EnumDocumentType` is an enumeration class that defines the type of document to scan, such as ID cards or passports. + +## Definition + +*Assembly:* dynamsoft_mrz_scanner_bundle_flutter + +```dart +public enum EnumDocumentType +{ + all, // supports both ID cards (TD1 and TD2) and passports (TD3) + id, // only supports ID cards (TD1 and TD2) + passport // only supports passports (TD3) +} +``` + +## Members + +| Member | Description | +| ------ | ----------- | +| `all` | Supports both ID cards (TD1 and TD2) and passports (TD3) | +| `id` | Only supports ID cards (TD1 and TD2) | +| `passport` | Only supports passports (TD3) | + diff --git a/programming/flutter/api-reference/index.md b/programming/flutter/api-reference/index.md new file mode 100644 index 0000000..7dc281b --- /dev/null +++ b/programming/flutter/api-reference/index.md @@ -0,0 +1,21 @@ +--- +layout: default-layout +title: MRZScanner API reference - Dynamsoft MRZ Scanner Flutter Edition +description: This is the main page of MRZScanner API Reference for Flutter Language. +keywords: MRZScanner, api reference, Flutter +--- + +# MRZScanner API References + +`MRZScanner` is a ready-to-use component that enables developers to quickly set up an app for scanning MRZ codes on passports and ID cards. The `MRZScanner` simplifies the integration of MRZ scanning functionality into any application, making it easy to extract and process information from travel and identity documents. + +## Classes + +| Class | Description | +| ----- | ----------- | +| [`MRZScanner`](mrz-scanner.md) | The main class of `MRZScanner` component. It is an activity class that implements MRZ scanning features. | +| [`MRZScannerConfig`](mrz-scanner-config.md) | The class that provides MRZ scanning configurations. | +| [`MRZScanResult`](mrz-scan-result.md) | The MRZ scan result class. | +| [`MRZData`](mrz-data.md) | The class that contains the parsed MRZ information. | +| [`EnumResultStatus`](result-status.md) | A enumeration class that describes the result status. | +| [`EnumDocumentType`](document-type.md) | A enumeration class that defines the type of document to scan, such as ID cards or passports. | diff --git a/programming/flutter/api-reference/mrz-data.md b/programming/flutter/api-reference/mrz-data.md new file mode 100644 index 0000000..9ba9403 --- /dev/null +++ b/programming/flutter/api-reference/mrz-data.md @@ -0,0 +1,125 @@ +--- +layout: default-layout +title: MRZData Class - Dynamsoft MRZ Scanner Flutter Edition +description: MRZData of DynamsoftMRZScanner Flutter is a result class that contains the parsed MRZ information. +keywords: MRZ, scanner, scan result +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: MRZData +--- + +# MRZData + +`MRZData` is a result class that is used to represent the parsed MRZ information. + +## Definition + +*Assembly:* dynamsoft_mrz_scanner_bundle_flutter + +```dart +class MRZData +``` + +## Properties + +| Property | Type | Description | +| -------- | ---- | ----------- | +| [`firstName`](#firstname) | *String* | The first name of the MRZ document holder. | +| [`lastName`](#lastname) | *String* | The last name of the MRZ document holder. | +| [`sex`](#sex) | *String* | The sex of the MRZ document holder. | +| [`issuingState`](#issuingstate) | *String* | The issuing state (represented as the full name of the country/region) of the MRZ document. | +| [`nationality`](#nationality) | *String* | The nationality (represented as the full name of the country/region) of the MRZ document holder. | +| [`dateOfBirth`](#dateofbirth) | *String* | The date of birth of the MRZ document holder. | +| [`dateOfExpire`](#dateofexpire) | *String* | The expiry date of the MRZ document. | +| [`documentType`](#documenttype) | *String* | The type of MRTD that the MRZ document is. | +| [`documentNumber`](#documentnumber) | *String* | The MRZ document number. | +| [`age`](#age) | *int* | The age of the MRZ document holder. | +| [`mrzText`](#mrztext) | *String* | The raw unparsed text of the MRZ. | + +### firstName + +Represents the first name of the MRZ document holder. + +```dart +String firstName; +``` + +### lastName + +Represents the last name of the MRZ document holder. + +```dart +String lastName; +``` + +### sex + +Represents the sex of the MRZ document holder. + +```dart +String sex; +``` + +### issuingState + +Represents the issuing state of the MRZ document. + +```dart +String issuingState; +``` + +### nationality + +Represents the nationality of the MRZ document holder. + +```dart +String nationality; +``` + +### dateOfBirth + +Represents the date of birth of the MRZ document holder. + +```dart +String dateOfBirth; +``` + +### dateOfExpire + +Represents the expiry date of the MRZ document. + +```dart +String dateOfExpire; +``` + +### documentType + +Represents the type of MRZ document. + +```dart +String documentType; +``` + +### documentNumber + +Represents the MRZ document number. + +```dart +String documentNumber; +``` + +### age + +Represents the age of the MRZ document holder. + +```dart +int age; +``` + +### mrzText + +Represents the raw text of the MRZ. + +```dart +String mrzText; +``` diff --git a/programming/flutter/api-reference/mrz-scan-result.md b/programming/flutter/api-reference/mrz-scan-result.md new file mode 100644 index 0000000..ee3c37a --- /dev/null +++ b/programming/flutter/api-reference/mrz-scan-result.md @@ -0,0 +1,70 @@ +--- +layout: default-layout +title: MRZScanResult Class - Dynamsoft MRZ Scanner Flutter Edition +description: MRZScanResult of DynamsoftMRZScanner Flutter is a result class that contains the parsed MRZ information from one scan and the additional information. +keywords: MRZ, scanner, scan result +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: MRZScanResult +--- + +# MRZScanResult + +`MRZScanResult` is the most basic class to represent the full MRZ result object. It comes with a result status and the parsed MRZ info as a MRZData object. + +## Definition + +*Assembly:* dynamsoft_mrz_scanner_bundle_flutter + +```dart +class MRZScanResult +``` + +## Properties + +| Property | Type | Description | +| -------- | ---- | ----------- | +| [`mrzData`](#mrzdata) | [*MRZData?*](mrz-data.md) | Represents the parsed MRZ data. | +| [`status`](#status) | [*EnumResultStatus*](result-status.md) | Represents the status of the result, which can be finished, canceled or exception. | +| [`errorCode`](#errorcode) | *int?* | Represents the error code should something go wrong during the MRZ scanning process. | +| [`errorString`](#errorstring) | *String?* | Represents the error message associated with the error code should something go wrong during the MRZ scanning process. | + +### mrzData + +Represents the parsed MRZ information as a [`MRZData`](mrz-data.md) object. + +```dart +MRZData? mrzData; +``` + +### status + +Represents the status of the result, which can be finished, canceled or exception. The status comes in the form of a [`EnumResultStatus`](result-status.md). + +```dart +EnumResultStatus status; +``` + +**Remarks** + +The result status can be one of three things: + +- `finished`: The MRZ scanning is finished. +- `canceled`: The MRZ scanning activity is closed before the process is finished. +- `exception`: Failed to start MRZ scanning or an error occurs when scanning the MRZ. + +### errorCode + +Returns the error code when an exception occurs. This value is only valid when resultStatus is `exception`. + +```dart +int? errorCode; +``` + +### errorString + +Returns the error message associated with the error code when an exception occurs. This value is only valid when resultStatus is `exception`. + +```dart +String? errorMessage; +``` diff --git a/programming/flutter/api-reference/mrz-scanner-config.md b/programming/flutter/api-reference/mrz-scanner-config.md new file mode 100644 index 0000000..d0f7c97 --- /dev/null +++ b/programming/flutter/api-reference/mrz-scanner-config.md @@ -0,0 +1,118 @@ +--- +layout: default-layout +title: MRZScannerConfig Class - Dynamsoft MRZ Scanner Flutter Edition +description: MRZScannerConfig of DynamsoftMRZScanner Flutter is the class that defines the configurations for MRZ scanning. +keywords: MRZ, scanner, config, flutter +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: MRZScannerConfig +--- + +# MRZScannerConfig + +`MRZScannerConfig` is responsible for the configuration of the MRZ Scanner, from assigning the MRZ Scanner license to configuring the supported document types, along with other customizations. + +> [!NOTE] +> If you are wondering about the different ways you can customize the MRZ Scanner, please refer to the [MRZ Scanner Customization Guide](../user-guide/customize-mrz-scanner.md). + +## Definition + +*Assembly:* dynamsoft_mrz_scanner_bundle_flutter + +```dart +final class MRZScannerConfig +``` + +## Properties + +| Property | Type | Description | +| -------- | ---- | ----------- | +| [`license`](#license) | *String* | Represents the MRZ Scanner license string. | +| [`templateFile`](#templatefile) | *String* | Specifies the template configuration that defines the various MRZ Scanner parameters. | +| [`documentType`](#documenttype) | [*EnumDocumentType*](document-type.md) | Specifies the type of document (ID or Passport) that the MRZ Scanner will recognize. | +| [`isTorchButtonVisible`](#istorchbuttonvisible) | *bool* | Represents the visibility status of the torch button. | +| [`isBeepEnabled`](#isbeepenabled) | *bool* | Determines whether a beep sound is triggered upon a successful MRZ scan. | +| [`isCloseButtonVisible`](#isclosebuttonvisible) | *bool* | Represents the visibility status of the close button. | +| [`isGuideFrameVisible`](#isguideframevisible) | *bool* | Represents the visibility status of the guide frame on the display. | +| [`isCameraToggleButtonVisible`](#iscameratogglebuttonvisible) | *bool* | Specifies whether the camera toggle button is displayed or not. | +| [`isVibrateEnabled`](#isvibrateenabled) | *bool* | Controls the scanner's ability to make the scanning device vibrate upon a successful MRZ scan. | + +### license + +The license key is the only property whose ***value must be specified when instantiating the MRZ Scanner instance***. If the license is undefined, invalid, or expired, the MRZ Scanner cannot proceed with scanning, and instead displays a pop-up error message instructing the user to contact the app administrator to resolve this license issue. + +```dart +String license; +``` + +### templateFile + +Specifies the template configuration with a file path or a JSON string that defines the various MRZ Scanner parameters. These specialized templates are usually used for very specific and customized scanning scenarios. + +```dart +String? templateFile; +``` + +**Remarks** + +The MRZ Scanner comes with a default template file, but you may choose to use a custom template to target specialized use cases. We recommend contacting the [Dynamsoft Technical Support Team](https://www.dynamsoft.com/company/contact/) for assistance with template customization. + +### documentType + +Specifies the type of document that the MRZ Scanner will recognize, represented as a [`EnumDocumentType`](document-type.md). This property accepts values defined in the EnumDocumentType such as `EnumDocumentType.all` (TD1/2/3), `EnumDocumentType.id` (TD1/2), or `EnumDocumentType.passport` (TD3). + +```dart +EnumDocumentType? documentType; +``` + +**Remarks** + +If you would like to learn more about the supported document types, please refer to the [Supported Document Types](../user-guide/index.md#supported-machine-readable-travel-document-types) section of the user guide. + +### isTorchButtonVisible + +Determines whether the torch (flashlight) toggle button is visible on the scanning interface. Set to true to allow users to switch the device's flashlight on or off during MRZ scanning. + +```dart +bool? isTorchButtonVisible; +``` + +### isBeepEnabled + +Determines whether a beep sound is triggered upon a successful MRZ scan. When enabled (true), the scanner will play a sound to provide audible feedback. + +```dart +bool? isBeepEnabled; +``` + +### isCloseButtonVisible + +Controls the visibility of the close button on the scanner's UI. If true, a close button will be displayed allowing users to exit the MRZ scanning interface. + +```dart +bool? isCloseButtonVisible; +``` + +### isGuideFrameVisible + +Determines the visibility status of the guide frame on the display. If set to true, a visual overlay will be displayed in the centre of the camera view to allow users to easily line up the MRZ document + +```dart +bool IsGuideFrameVisible { get; set; }; +``` + +### isCameraToggleButtonVisible + +Specifies whether the camera toggle button is displayed. This button lets users switch between available cameras (e.g., front and rear). + +```dart +bool? isCameraToggleButtonVisible; +``` + +### isVibrateEnabled + +Controls the scanner's ability to make the scanning device vibrate upon a successful MRZ scan. When enabled (true), the scanner will vibrate to provide haptic feedback if the device supports it. + +```dart +bool? isVibrateEnabled; +``` diff --git a/programming/flutter/api-reference/mrz-scanner.md b/programming/flutter/api-reference/mrz-scanner.md new file mode 100644 index 0000000..85c8604 --- /dev/null +++ b/programming/flutter/api-reference/mrz-scanner.md @@ -0,0 +1,68 @@ +--- +layout: default-layout +title: MRZScanner Class - Dynamsoft MRZ Scanner Flutter Edition +description: MRZScanner of DynamsoftMRZScanner Flutter is an activity class that implements MRZ scanning features. +keywords: MRZ, scanner, activity +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: MRZScanner +--- + +# Class MRZScanner + +`MRZScanner` is the main class for setting up and running the MRZ Scanner. + +## Definition + +*Assembly:* dynamsoft_mrz_scanner_bundle_flutter + +```dart +class MRZScanner +``` + +## Methods + +## launch + +Starts the MRZ (Machine Readable Zone) scanner by launching a new page (Activity on Android or ViewController on iOS). + +This function initiates the MRZ scanning process by launching a new page dedicated to scanning. It accepts an optional configuration object to customize the scanning behavior. If no configuration is provided, it uses a default configuration. The function returns a Promise that resolves with the scan result or rejects with an error if the scanning process fails. + +For Android, this function starts an Activity that handles the MRZ scanning. For iOS, it presents a ViewController for the same purpose. After scanning, the function handles the result and closes the scanning page if necessary. + +```dart +Future launch(MRZScannerConfig config) +``` + +## Code Snippet + +```dart +void _launchMrzScanner() async { + var config = MRZScannerConfig( + license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", + ); + MRZScanResult mrzScanResult = await MRZScanner.launch(config); + + setState(() { + if(mrzScanResult.status == EnumResultStatus.canceled) { + _displayString = "Scan canceled"; + } else if(mrzScanResult.status == EnumResultStatus.exception) { + _displayString = "ErrorCode: ${mrzScanResult.errorCode}\n\nErrorString: ${mrzScanResult.errorMessage}"; + } else { //EnumResultStatus.finished + MRZData data = mrzScanResult.mrzData!; + _displayString = "Name:\t${data.firstName} ${data.lastName}\n\n" + "Sex: ${data.sex.substring(0,1).toUpperCase() + data.sex.substring(1)}\n\n" + "Age: ${data.age}\n\n" + "Document Type: ${data.documentType}\n\n" + "Document Number: ${data.documentNumber}\n\n" + "Issuing State: ${data.issuingState}\n\n" + "Nationality: ${data.nationality}\n\n" + "Date of Birth(YYYY-MM-DD): ${data.dateOfBirth}\n\n" + "Date of Expiry(YYYY-MM-DD): ${data.dateOfExpire}"; + } + }); +} +``` + +> [!NOTE] +> If you would like to see the full code to implement the full Hello World sample, please refer to the [User Guide](../user-guide/index.md). diff --git a/programming/flutter/api-reference/result-status.md b/programming/flutter/api-reference/result-status.md new file mode 100644 index 0000000..d97a105 --- /dev/null +++ b/programming/flutter/api-reference/result-status.md @@ -0,0 +1,34 @@ +--- +layout: default-layout +title: EnumResultStatus - Dynamsoft MRZ Scanner Flutter Edition +description: EnumResultStatus of DynamsoftMRZScanner Flutter is an enumeration class that defines the result status of the MRZScanResult. +keywords: MRZScanner, MRZScanResult +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: EnumResultStatus +--- + +# EnumResultStatus + +`EnumResultStatus` is a enumeration class that defines the result status of the `MRZScanResult`. + +## Definition + +*Assembly:* dynamsoft_mrz_scanner_bundle_flutter + +```dart +enum EnumResultStatus +{ + finished, + canceled, + exception +} +``` + +## Members + +| Member | Description | +| ------ | ----------- | +| `finished` | The MRZ scanning process was a success and the MRZ result has been received. | +| `canceled` | The MRZ scanning process was cancelled by the user (usually by closing the UI using the close button). | +| `exception` | Something went wrong during the barcode decoding process and an exception has been thrown. | diff --git a/programming/flutter/index.md b/programming/flutter/index.md new file mode 100644 index 0000000..088239b --- /dev/null +++ b/programming/flutter/index.md @@ -0,0 +1,60 @@ +--- +layout: default-layout +title: Main Page - Dynamsoft MRZ Scanner for Flutter +description: This is the main page of Dynamsoft MRZ Scanner for Flutter SDK. +keywords: Flutter +needAutoGenerateSidebar: false +breadcrumbText: Flutter +--- + +# Dynamsoft MRZ Scanner Flutter Edition + +Dynamsoft MRZ Scanner SDK Flutter Edition is designed to integrate the ability to scan MRZ documents such as passports, ID cards, and other travel documents. + +## Using the SDK + +### System Requirements + +#### Flutter + +- Latest Flutter framework (the sample was last tested with Flutter 3.35.7) + +#### Android + +- Supported OS: **Android 5.0** (API Level 21) or higher. +- Supported ABI: **armeabi-v7a**, **arm64-v8a**, **x86** and **x86_64**. +- Development Environment: Android Studio 2022.2.1+ (2025.2.1 recommended); Java 17+; Gradle 8.0+ +- JDK: 1.8+ + +#### iOS + +- Supported OS: **iOS 13.0** or higher. +- Supported ABI: **arm64** and **x86_64**. +- Development Environment: Xcode 14.3+ recommended. + +### User Guide + +- [MRZ Scanner User Guide](user-guide/index.md) +- [Customizing the MRZ Scanner](user-guide/customize-mrz-scanner.md) + +### Samples and Demos + +- [Samples & Demos](samples/index.md) + +### API Reference + +- [API Reference](./api-reference/index.md) + +## Release Notes + +- [Version 3.x](release-notes/index.md) + +## License Subscription + +To develop and run your application with Dynamsoft MRZ Scanner SDK, you need an active license key: + +- [Request a 30-day free trial license](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=docs&product=mrz&package=flutter){:target="_blank"} + +## Contact Us + +Feel free to [contact us](https://www.dynamsoft.com/company/customer-service/#contact){:target="_blank"} if you have any questions. diff --git a/programming/flutter/release-notes/index.md b/programming/flutter/release-notes/index.md new file mode 100644 index 0000000..f7f03d4 --- /dev/null +++ b/programming/flutter/release-notes/index.md @@ -0,0 +1,35 @@ +--- +layout: default-layout +title: Flutter Release Notes v3.x - Dynamsoft MRZ Scanner +description: This is the release notes page of Dynamsoft MRZ Scanner for Flutter SDK v3.x. +keywords: release notes, MAUI, version 3.x, +needAutoGenerateSidebar: true +needGenerateH3Content: false +noTitleIndex: true +--- + +# Dynamsoft MRZ Scanner Flutter SDK - Release Notes + +## 3.2.3000 (11/06/2025) + +### Highlighted Features + +- Updated the underlying Capture Vision bundle to 3.2.3000 for major improvements in reading accuracy and speed. +- Neural MRZ Localization – The new MRZLocalization model improves region detection accuracy and delivers up to **42.7% faster processing** for MRZ-based document workflows. +- Configurable Localization Control – The new LocalizationModes parameter allows configuration for text line detection. + +## 3.0.5200 (08/28/2025) + +This is the introductory version of the MRZ Scanner (Flutter Edition) to include the newly designed and developed ready-to-use `MRZScanner` component. + +### Highlighted Features + +- Automatic detection and parsing of MRZs in passports and IDs +- Support for the following MRTD formats: TD3 (Passport), TD2 (ID), and TD1 (ID) +- Ready-to-use UI to simplify the development process +- Modular, view-based design for easy maintenance and customization +- Added support for 16kb page sizes for Android. + +### Improvements + +- **License Validation Behavior**: Instead of stopping execution immediately on an invalid license module, the library now continues processing and returns results from modules with valid licenses. An error is still reported to indicate the license issue. diff --git a/programming/flutter/samples/index.md b/programming/flutter/samples/index.md new file mode 100644 index 0000000..df444a8 --- /dev/null +++ b/programming/flutter/samples/index.md @@ -0,0 +1,22 @@ +--- +layout: default-layout +title: Demo & Samples - Dynamsoft MRZ Scanner Flutter Edition +description: The index of Dynamsoft MRZ Scanner Flutter demo & samples. +keywords: demo, sample, index, Flutter +needAutoGenerateSidebar: true +noTitleIndex: false +--- + +# Demo and Samples + +## MRZScanner Demo + +- [View in Google Play Store](https://play.google.com/store/apps/details?id=com.dynamsoft.mrzscanner){:target="_blank"} +- [View in Apple Store](https://apps.apple.com/us/app/dynamsoft-mrz-scanner/id6736854735){:target="_blank"} +- [Download APK](https://download2.dynamsoft.com/mrzscanner/android/DynamsoftMRZScannerDemoAndroid.apk) + +## ScanMRZ Sample + +Scan the MRZ code from a passport or ID card and extract the information using the ready-to-use component(`MRZScanner`) + +[Check the code on GitHub!](https://github.com/Dynamsoft/capture-vision-flutter-samples/tree/main/ScanMRZ) diff --git a/programming/flutter/user-guide/customize-mrz-scanner.md b/programming/flutter/user-guide/customize-mrz-scanner.md new file mode 100644 index 0000000..4403276 --- /dev/null +++ b/programming/flutter/user-guide/customize-mrz-scanner.md @@ -0,0 +1,105 @@ +--- +layout: default-layout +title: Customize MRZ Scanner - Dynamsoft MRZ Scanner Flutter Edition +description: Customize the MRZ scan settings via MRZScannerConfig class when using MRZ Scanner Flutter Edition +keywords: Customize, config, MRZScannerConfig, Flutter +breadcrumbText: Customize MRZ Scanner +noTitleIndex: true +needGenerateH3Content: true +needAutoGenerateSidebar: true +--- + +# Customizing the MRZ Scanner + +When developing with `MRZScanner` component (see the [User Guide](index.md)), you can add extra configurations via the `MRZScannerConfig` class. Before diving into the different ways in which you can customize the MRZ Scanner, let's first break down the different properties of the `MRZScannerConfig` class. + +## `MRZScannerConfig` Overview + +The [**`MRZScannerConfig`**](../api-reference/mrz-scanner-config.md) class is capable of configuring almost all customization options applicable to MRZ scanning use cases with the MRZ Scanner. The MRZ Scanner uses passes an `MRZScannerConfig` object to the constructor when creating an MRZ Scanner instance. `MRZScannerConfig` contains the following properties: + +1. **`license`** - the license key is the only property whose ***value must be specified when instantiating the MRZ Scanner instance***. If the license is undefined, invalid, or expired, the MRZ Scanner cannot proceed with scanning, and instead displays a pop-up error message instructing the user to contact the app administrator to resolve this license issue. + +2. **`documentType`** - specifies the type of document that the MRZ Scanner will recognize. This property accepts values defined in the EnumDocumentType such as `EnumDocumentType.all`, `EnumDocumentType.id`, or `EnumDocumentType.passport`. It helps the scanner to optimize its processing based on the expected document type. To learn more about the different document types that are supported, please refer to the [Supported Document Types](index.md#supported-machine-readable-travel-document-types) section of the user guide. + +3. **`templateFile`** - a template file is a JSON file or JSON string that contains a series of algorithm parameter settings (called Capture Vision templates) that is usually used for very specific and customized scanning and parsing scenarios. The `templateFile` points to the location of the JSON file. The MRZ Scanner comes with a default template file, but you may choose to use a custom template to target specialized use cases. We recommend contacting the [Dynamsoft Technical Support Team](https://www.dynamsoft.com/company/contact/) for assistance with template customization. + +4. **`isBeepEnabled`** (default value `false`) - a boolean that determines whether a beep sound is triggered upon a successful MRZ scan. When enabled (true), the scanner will play a sound to provide audible feedback. + +5. **`isCameraToggleButtonVisible`** (default value `false`) - a boolean that specifies whether the camera toggle button is displayed. This button lets users switch between available cameras (e.g., front and rear). + +6. **`isCloseButtonVisible`** (default value `true`) - a boolean to control the visibility of the close button on the scanner's UI. If true, a close button will be displayed allowing users to exit the MRZ scanning interface. + +7. **`isGuideFrameVisible`** (default value `true`) - serves as a toggle to show or hide the guide frame in the UI during scanning. The guide frame assists users in properly aligning the document for optimal MRZ detection. When set to true, a visual overlay is displayed on the scanning interface. + +8. **`isTorchButtonVisible`** (default value `true`) - determines whether the torch (flashlight) toggle button is visible on the scanning interface. Set to true to allow users to switch the device's flashlight on or off during MRZ scanning. + +9. **`isVibrateEnabled`** (default value `false`) - controls the scanner's ability to make the scanning device vibrate upon a successful MRZ scan. When enabled (true), the scanner will vibrate to provide haptic feedback if the device supports it. + +Next, we go over the different ways that these properties can be used to customize the scanner with a few examples. + + +## Setting the MRZ Document Type + +The MRZ Scanner reads all three MRZ formats, but it can optionally restrict the MRZ format that it reads. For example, you may want to configure MRZ scanner to only read **TD1** and passport (**TD3**) document types, while **ignoring TD2** documents. Here is a simple edit to the launchMrzScanner function that we implemented in the [User Guide](index.md) that sets the specific MRZ formats to read using the `documentType` property: + +```dart +void _launchMrzScanner() async { + var config = MRZScannerConfig( + license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", + documentType: EnumDocumentType.passport, // configuring the scanner to just recognize passports + ); + MRZScanResult mrzScanResult = await MRZScanner.launch(config); + if(mrzScanResult.status == EnumResultStatus.finished) { + MRZData data = mrzScanResult.mrzData!; + // do something with the data + } +} +``` + +## Customizing the UI Elements + +
    +

    mrz-scanner

    +

    MRZ Scanner UI

    +
    + +The MRZ Scanner UI comes with three main elements that you can configure: + +- *Close button*: Stop MRZ scanning and go back to the previous activity. +- *Torch button*: A clickable button that can turn on/off the torch. +- *Guide Frame*: A visual overlap to assist users in lining up the MRZ document in the camera frame. + +```dart +void _launchMrzScanner() async { + var config = MRZScannerConfig( + license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", + isCloseButtonVisible: false, // hiding the close button + isTorchButtonVisible: false, // hiding the torch button + isGuideFrameVisible: false, // hiding the guide frame + ); + MRZScanResult mrzScanResult = await MRZScanner.launch(config); + if(mrzScanResult.status == EnumResultStatus.finished) { + MRZData data = mrzScanResult.mrzData!; + // do something with the data + } +} +``` + +## Enabling Audio and Haptic Feedback + +The MRZ Scanner library also offers the option to enable audio and haptic feedback upon a successful MRZ scan. Through the `isBeepEnabled` and `isVibrateEnabled` properties, you can choose to play a sound or make the device vibrate once the MRZ is recognized. + +```dart +void _launchMrzScanner() async { + var config = MRZScannerConfig( + license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", + isBeepEnabled: true, // play a beep upon a successful MRZ scan + isVibrateEnabled: true, // make the phone vibrate upon a successful MRZ scan + ); + MRZScanResult mrzScanResult = await MRZScanner.launch(config); + if(mrzScanResult.status == EnumResultStatus.finished) { + MRZData data = mrzScanResult.mrzData!; + // do something with the data + } +} +``` diff --git a/programming/flutter/user-guide/index.md b/programming/flutter/user-guide/index.md new file mode 100644 index 0000000..c71133c --- /dev/null +++ b/programming/flutter/user-guide/index.md @@ -0,0 +1,293 @@ +--- +layout: default-layout +title: User Guide - Dynamsoft MRZ Scanner for Flutter (Ready to Use UI edition) +description: This is the user guide of Dynamsoft MRZ Scanner for Flutter SDK demonstrating the Ready to Use UI. +keywords: user guide, dart, Flutter, ready to use, mrz +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: true +multiProgrammingLanguage: true +enableLanguageSelection: true +--- + +# MRZ Scanner User Guide (Flutter Edition) + +This user guide will explore using the Dynamsoft MRZ Scanner (Flutter Edition) to easily integrate the ability to read MRZ data from identity documents such as passports and ID cards. The Dynamsoft MRZ Scanner comes with a ready-to-use setup that simplifies the development process, allowing you to focus on other aspects of the application. + +`MRZScanner` is the ready-to-use component that allows developers to quickly set up an MRZ scanning app. With the built-in component, it streamlines the integration of MRZ scanning functionality into any application. + +## Supported Machine-Readable Travel Document Types + +The Machine Readable Travel Documents (MRTD) standard specified by the International Civil Aviation Organization (ICAO) defines how to encode information for optical character recognition on official travel documents. + +Currently, the SDK supports three types of MRTD: + +> [!NOTE] +> If you need support for other types of MRTDs, our SDK can be easily customized. Please contact our [support team](https://www.dynamsoft.com/contact/). + +### ID (TD1 Size) + +The MRZ (Machine Readable Zone) in TD1 format consists of 3 lines, each containing 30 characters. + +
    + Example of MRZ in TD1 format +
    + +### ID (TD2 Size) + +The MRZ (Machine Readable Zone) in TD2 format consists of 2 lines, with each line containing 36 characters. + +
    + Example of MRZ in TD2 format +
    + +### Passport (TD3 Size) + +The MRZ (Machine Readable Zone) in TD3 format consists of 2 lines, with each line containing 44 characters. + +
    + Example of MRZ in TD2 format +
    + +## System Requirements + +* Latest [Flutter SDK](https://flutter.dev/) +* Android + * Supported OS: Android 5.0 (API Level 21) and higher + * Supported ABI: armeabi-v7a, arm64-v8a, x86 and x86_64 + * Development Environment: Android Studio Meerkat (2024.3.1); Java 17+; Gradle 8.0+ +* iOS + * Supported OS: iOS 13+ + * Supported ABI: arm64 and x86_64 + * Development Environment: Xcode 13+ (Xcode 14.1+ recommended) + +## Including the Library + +Run the following command in the root directory of your Flutter project to add `dynamsoft_mrz_scanner_bundle_flutter` to the dependencies: + +```bash +flutter pub add dynamsoft_mrz_scanner_bundle_flutter +``` + +Then run the command to install all dependencies: + +```bash +flutter pub get +``` + +## Building the MRZ Scanner Widget + +Now that the package is added, it's time to start building the `MRZScanner` Widget using the SDK. + +### Importing the Library + +To use the MRZScanner API, please import `dynamsoft_mrz_scanner_bundle_flutter` in your dart file: + +```dart +import 'package:dynamsoft_mrz_scanner_bundle_flutter/dynamsoft_mrz_scanner_bundle_flutter.dart'; +``` + +### Quick Start + +The code below shows the simplest function implementation to initialize and start the MRZ Scanner + +```dart +import 'package:dynamsoft_mrz_scanner_bundle_flutter/dynamsoft_mrz_scanner_bundle_flutter.dart'; + +void _launchMrzScanner() async { + var config = MRZScannerConfig( + license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", + ); + MRZScanResult mrzScanResult = await MRZScanner.launch(config); + if(mrzScanResult.status == EnumResultStatus.finished) { + MRZData data = mrzScanResult.mrzData!; + // do something with the data + } +} +``` + +You can call the above function anywhere (e.g., when the app starts, on a button click, etc.) to achieve the effect: +open an MRZ scanning interface, and after scanning is complete, close the interface and return the result. + +This next code snippet is the **full Hello World implementation** that uses the above `_launchMrzScanner` function. This is done in *main.dart* but can be used as a reference for your own implementation, whether it is in *main.dart* or any other page. + +```dart +import 'package:dynamsoft_mrz_scanner_bundle_flutter/dynamsoft_mrz_scanner_bundle_flutter.dart'; +import 'package:flutter/material.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({super.key}); + + // This widget is the root of your application. + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Scan MRZ', + theme: ThemeData( + colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange), + ), + home: const MyHomePage(title: 'Scan MRZ'), + ); + } +} + +class MyHomePage extends StatefulWidget { + final String title; + const MyHomePage({super.key, required this.title}); + @override + State createState() => _MyHomePageState(); +} + +class _MyHomePageState extends State { + String _displayString = ""; + + void _launchMrzScanner() async { + var config = MRZScannerConfig( + license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", + ); + MRZScanResult mrzScanResult = await MRZScanner.launch(config); + + setState(() { + if(mrzScanResult.status == EnumResultStatus.canceled) { + _displayString = "Scan canceled"; + } else if(mrzScanResult.status == EnumResultStatus.exception) { + _displayString = "ErrorCode: ${mrzScanResult.errorCode}\n\nErrorString: ${mrzScanResult.errorMessage}"; + } else { //EnumResultStatus.finished + MRZData data = mrzScanResult.mrzData!; + _displayString = "Name:\t${data.firstName} ${data.lastName}\n\n" + "Sex: ${data.sex.substring(0,1).toUpperCase() + data.sex.substring(1)}\n\n" + "Age: ${data.age}\n\n" + "Document Type: ${data.documentType}\n\n" + "Document Number: ${data.documentNumber}\n\n" + "Issuing State: ${data.issuingState}\n\n" + "Nationality: ${data.nationality}\n\n" + "Date of Birth(YYYY-MM-DD): ${data.dateOfBirth}\n\n" + "Date of Expiry(YYYY-MM-DD): ${data.dateOfExpire}"; + } + }); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + backgroundColor: Theme.of(context).colorScheme.inversePrimary, + title: Text(widget.title), + ), + body: Center( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + _displayString, + style: Theme.of(context).textTheme.bodyLarge, + ), + SizedBox(height: 20), // Add a spacing of 20 + TextButton( + onPressed: _launchMrzScanner, + style: TextButton.styleFrom( + backgroundColor: Colors.orange, + foregroundColor: Colors.white, + ), + child: const Text("Scan an MRZ"), + ), + ], + ), + ) + ); + } +} +``` + +> [!NOTE] +> +>- The license string here grants a time-limited free trial which requires network connection to work. +>- You can request a 30-day trial license via the [Trial License portal](https://www.dynamsoft.com/customer/license/trialLicense?product=mrz&utm_source=github&package=mobile). + +### MRZ Result and Data + +Once the scan process completes and the MRZ Scanner successfully recognizes a MRZ, a `MRZScanResult` is produced, representing all of the decrypted data contained within the MRZ. + +[`MRZScanResult`](../api-reference/mrz-scan-result.md) has the following properties: + +- **resultStatus**: The status of the MRZ scan result, of type [`EnumResultStatus`](../api-reference/result-status.md). + - *finished*: The MRZ scan was successful. + - *canceled*: The MRZ scanning activity is closed before the process is finished. + - *exception*: Failed to start MRZ scanning or an error occurs when scanning the MRZ. +- **errorCode**: The error code indicates if something went wrong during the MRZ scanning process (0 means no error). Only defined when the `resultStatus` is `exception`. +- **errorString**: The error message associated with the error code if an error occurs during MRZ scanning process. Only defined when the `resultStatus` is `exception`. +- **data**: The parsed MRZ data as a `MRZData` object. + +[`MRZData`](../api-reference/mrz-data.md) holds the actual decrypted data of the MRZ result, and it comes with the following fields: + +- **documentType**: The type of MRZ document, which would either be `EnumDocumentType.passport`, `EnumDocumentType.id`, or `EnumDocumentType.all`. You can check out the [Supported Machine-Readable Travel Document Types](#supported-machine-readable-travel-document-types) to learn more. +- **firstName**: The first name of the MRZ document holder. +- **lastName**: The last name of the MRZ document holder. +- **sex**: The sex of the MRZ document holder. +- **issuingState**: The issuing state of the MRZ document. +- **nationality**: The nationality of the MRZ document holder. +- **dateOfBirth**: The date of birth of the MRZ document holder. +- **dateOfExpiry**: The expiry date of the MRZ document. +- **documentNumber**: The MRZ document number. +- **age**: The age of the MRZ document holder. +- **mrzText**: The raw text of the MRZ. + + +### Customizing the MRZ Scanner (Optional) + +Even though the default settings of the ready-to-use MRZ Scanner is sufficient to cover the majority of MRZ scanning scenarios, the [`MRZScannerConfig`](../api-reference/mrz-scanner-config.md) class allows you to change the behaviour of the MRZ Scanner to fit your specific scenario. Using this class can help you customize different UI elements and determine the settings of the scanner engine itself. + +To learn of the different ways in which the MRZ scanner can be customized, please refer to the [MRZ Scanner Customization Guide](customize-mrz-scanner.md). + +## Run the Project + +### iOS + +Before the project can be deployed to a *iOS* device, the camera permissions and the developer signature must first be set. To add the camera permissions to the iOS portion of the app, we recommend first installing the **pods** dependencies to generate the **.xcworkspace** project under the ios folder (`ios/Runner.xcworkspace`). Please run the following commands from the root directory: + +```bash +cd ios/ +pod install --repo-update +``` + +Once the pods are installed, *Runner.xcworkspace* should now be generated in the *ios* folder. + +#### Camera Permissions + +To add the **camera permissions**, open the generated *Runner.xcworkspace* and navigate to the *Info* section of the project settings. Then you must add the "Privacy - Camera Usage Description" key to the list (where you can also assign a string message to show in the alert box). + +#### Deploying to Device + +In order to deploy the app to a iOS device, we recommend doing it via Xcode by using the `Runner.xcworkspace` project that was generated when the pods were installed. Since the camera permissions are taken care of, all you need to do is properly configure the *Signing & Capabilities* section of the project settings. Should the iOS device be connected to the computer, you can now run and deploy the app to the device. + +If everything is set up correctly, you should see the app running on your device. + +### Android + +#### Deploying to Device + +Go to the project root folder, open a new terminal and run the following command: + +```bash +flutter run +# or +flutter run -d +``` + +You can get the IDs of all connected (physical) devices by running the command `flutter devices` in the terminal. + +## Full Sample Code + +The full sample code is available [here](https://github.com/Dynamsoft/capture-vision-flutter-samples/tree/main/ScanMRZ). + +## License + +- You can request a 30-day trial license via the [Request a Trial License](https://www.dynamsoft.com/customer/license/trialLicense?product=mrz&utm_source=github&package=mobile) link. + +## Contact + +https://www.dynamsoft.com/company/contact/ \ No newline at end of file diff --git a/programming/maui/release-notes/index.md b/programming/maui/release-notes/index.md index 4c07f04..19e3f11 100644 --- a/programming/maui/release-notes/index.md +++ b/programming/maui/release-notes/index.md @@ -9,6 +9,7 @@ breadcrumbText: Release Notes # Dynamsoft MRZ Scanner MAUI SDK - Release Notes +- [3.2.3000 (11/18/2025)]({{ site.maui_release_notes }}maui-3.html#323000-11182025) - [3.0.5200 (08/18/2025)]({{ site.maui_release_notes }}maui-3.html#305200-08182025) - [3.0.5100 (08/12/2025)]({{ site.maui_release_notes }}maui-3.html#305100-08122025) - [3.0.3100 (05/30/2025)]({{ site.maui_release_notes }}maui-3.html#303000-05302025) diff --git a/programming/maui/release-notes/maui-3.md b/programming/maui/release-notes/maui-3.md index c04cab3..487e6eb 100644 --- a/programming/maui/release-notes/maui-3.md +++ b/programming/maui/release-notes/maui-3.md @@ -10,6 +10,12 @@ noTitleIndex: true # Release Notes for MAUI SDK - 3.x +## 3.2.3000 (11/19/2025) + +- Updated the underlying Capture Vision bundle to 3.2.3000 for major improvements in reading accuracy and speed. +- Neural MRZ Localization – The new MRZLocalization model improves region detection accuracy and delivers up to **42.7% faster processing** for MRZ-based document workflows. +- Configurable Localization Control – The new LocalizationModes parameter allows configuration for text line detection. + ## 3.0.5200 (08/18/2025) ### Fixed diff --git a/programming/maui/user-guide/configure-mrz-scanner.md b/programming/maui/user-guide/configure-mrz-scanner.md deleted file mode 100644 index 23de95c..0000000 --- a/programming/maui/user-guide/configure-mrz-scanner.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -layout: default-layout -title: Configure MRZ Scanner - Dynamsoft MRZ Scanner MAUI Edition -description: Configure the MRZ scan settings via MRZScannerConfig class when using MRZ Scanner MAUI Edition -keywords: Configure, config, MRZScannerConfig, MAUI -breadcrumbText: Configure MRZ Scanner -noTitleIndex: true -needGenerateH3Content: true -needAutoGenerateSidebar: true ---- - -# Configure MRZ Scanner - -When developing with `MRZScanner` component, you can add configurations via the `MRZScannerConfig` class. This page will guide you on how to configure the settings. - -## Scan Document Type - -### Set the document type via APIs - -Specifies the type of document to scan, such as ID cards or passports. It also improves the processing speed and the accuracy. - -```csharp -var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); -config.DocumentType = EnumDocumentType.Passport; -``` - -**Related APIs** - -- [`DocumentType`]({{ site.maui_api }}mrz-scanner-config.html#documenttype) - -### Setup a customized template file - -A template file is a JSON file that includes a series of algorithm parameter settings. It is always used to customize the performance for different usage scenarios. [Contact us](https://www.dynamsoft.com/company/customer-service/#contact) to get a customized template for your scanner. - -1. Put your JSON file in the **Resources\Raw** folder of your project. - -2. Specify the template file via `TemplateFile` - -```csharp -var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); -config.TemplateFile = "CustomizedTemplate.json"; -``` - -> [!NOTE] You can also use a JSON string as the template file. - -**Related APIs** - -- [`TemplateFile`]({{ site.maui_api }}mrz-scanner-config.html#templatefile) - -## Configure the UI Elements - -
    -

    mrz-scanner

    -

    MRZ Scanner UI Component

    -
    - -- Close button: Stop MRZ scanning and go back to the previous activity. -- Torch button: A clickable button that can turn on/off the torch. - -```csharp -var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); -config.IsTorchButtonVisible = true; -config.IsGuideFrameVisible = true; -config.IsCloseButtonVisible = true; -``` - -**Related APIs** - -- [`IsTorchButtonVisible`]({{ site.maui_api }}mrz-scanner-config.html#istorchbuttonvisible) -- [`IsGuideFrameVisible`]({{ site.maui_api }}mrz-scanner-config.html#isguideframevisible) -- [`IsCloseButtonVisible`]({{ site.maui_api }}mrz-scanner-config.html#isclosebuttonvisible) - -### Beep - -Let the app to trigger a beep sound when MRZ is scanned successfully. - -```csharp -var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); -config.IsBeepEnabled = true; -``` - -**Related API** - -- [`IsBeepEnabled`]({{ site.maui_api }}mrz-scanner-config.html#setbeepenabled) diff --git a/programming/maui/user-guide/customize-mrz-scanner.md b/programming/maui/user-guide/customize-mrz-scanner.md new file mode 100644 index 0000000..e9b93c3 --- /dev/null +++ b/programming/maui/user-guide/customize-mrz-scanner.md @@ -0,0 +1,108 @@ +--- +layout: default-layout +title: Customize MRZ Scanner - Dynamsoft MRZ Scanner MAUI Edition +description: Customize the MRZ scan settings via MRZScannerConfig class when using MRZ Scanner MAUI Edition +keywords: Customize, config, MRZScannerConfig, MAUI +breadcrumbText: Customize MRZ Scanner +noTitleIndex: true +needGenerateH3Content: true +needAutoGenerateSidebar: true +--- + +# Customizing the MRZ Scanner + +When developing with `MRZScanner` component (see the [User Guide](index.md)), you can add extra configurations via the `MRZScannerConfig` class. Before diving into the different ways in which you can customize the MRZ Scanner, let's first break down the different properties of the `MRZScannerConfig` class. + +## `MRZScannerConfig` Overview + +The [**`MRZScannerConfig`**](../api-reference/mrz-scanner-config.md) class is capable of configuring almost all customization options applicable to MRZ scanning use cases with the MRZ Scanner. The MRZ Scanner uses passes an `MRZScannerConfig` object to the constructor when creating an MRZ Scanner instance. `MRZScannerConfig` contains the following properties: + +1. **`License`** - the license key is the only property whose ***value must be specified when instantiating the MRZ Scanner instance***. If the license is undefined, invalid, or expired, the MRZ Scanner cannot proceed with scanning, and instead displays a pop-up error message instructing the user to contact the app administrator to resolve this license issue. + +2. **`DocumentType`** - specifies the type of document that the MRZ Scanner will recognize. This property accepts values defined in the EnumDocumentType such as `EnumDocumentType.All`, `EnumDocumentType.Id`, or `EnumDocumentType.Passport`. It helps the scanner to optimize its processing based on the expected document type. To learn more about the different document types that are supported, please refer to the [Supported Document Types](index.md#supported-machine-readable-travel-document-types) section of the user guide. + +3. **`TemplateFile`** - a template file is a JSON file or JSON string that contains a series of algorithm parameter settings (called Capture Vision templates) that is usually used for very specific and customized scanning and parsing scenarios. The `templateFile` points to the location of the JSON file. The MRZ Scanner comes with a default template file, but you may choose to use a custom template to target specialized use cases. We recommend contacting the [Dynamsoft Technical Support Team](https://www.dynamsoft.com/company/contact/) for assistance with template customization. + +4. **`IsBeepEnabled`** (default value `false`) - a boolean that determines whether a beep sound is triggered upon a successful MRZ scan. When enabled (true), the scanner will play a sound to provide audible feedback. + +5. **`IsCameraToggleButtonVisible`** (default value `false`) - a boolean that specifies whether the camera toggle button is displayed. This button lets users switch between available cameras (e.g., front and rear). + +6. **`IsCloseButtonVisible`** (default value `true`) - a boolean to control the visibility of the close button on the scanner's UI. If true, a close button will be displayed allowing users to exit the MRZ scanning interface. + +7. **`IsGuideFrameVisible`** (default value `true`) - serves as a toggle to show or hide the guide frame in the UI during scanning. The guide frame assists users in properly aligning the document for optimal MRZ detection. When set to true, a visual overlay is displayed on the scanning interface. + +8. **`IsTorchButtonVisible`** (default value `true`) - determines whether the torch (flashlight) toggle button is visible on the scanning interface. Set to true to allow users to switch the device's flashlight on or off during MRZ scanning. + +9. **`IsVibrateEnabled`** (default value `false`) - controls the scanner's ability to make the scanning device vibrate upon a successful MRZ scan. When enabled (true), the scanner will vibrate to provide haptic feedback if the device supports it. + +Next, we go over the different ways that these properties can be used to customize the scanner with a few examples. + + +## Setting the MRZ Document Type + +The MRZ Scanner reads all three MRZ formats, but it can optionally restrict the MRZ format that it reads. For example, you may want to configure MRZ scanner to only read **TD1** and passport (**TD3**) document types, while **ignoring TD2** documents. Here is a simple edit to the `OnScanMRZ` function that we implemented in the [User Guide](index.md) that sets the specific MRZ formats to read using the `DocumentType` property: + +```c# +private async void OnScanMRZ(object sender, EventArgs e) +{ + // The string "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" here grants a time-limited free trial which requires network connection to work. + // You can request a 30-day trial license via the Request a Trial License page https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=guide&package=maui. + var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); + config.DocumentType = EnumDocumentType.Passport; // configuring the scanner to just recognize passports + var result = await MRZScanner.Start(config); + if (result.ResultStatus == EnumResultStatus.Finished && result.Data is not null) + { + /* Do something with the MRZ Result */ + } +} +``` + +## Customizing the UI Elements + +
    +

    mrz-scanner

    +

    MRZ Scanner UI

    +
    + +The MRZ Scanner UI comes with three main elements that you can configure: + +- *Close button*: Stop MRZ scanning and go back to the previous activity. +- *Torch button*: A clickable button that can turn on/off the torch. +- *Guide Frame*: A visual overlap to assist users in lining up the MRZ document in the camera frame. + +```c# +private async void OnScanMRZ(object sender, EventArgs e) +{ + // The string "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" here grants a time-limited free trial which requires network connection to work. + // You can request a 30-day trial license via the Request a Trial License page https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=guide&package=maui. + var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); + config.IsCloseButtonVisible = false; // hiding the close button + config.IsTorchButtonVisible = false; // hiding the torch button + config.IsGuideFrameVisible = false; // hiding the guide frame + var result = await MRZScanner.Start(config); + if (result.ResultStatus == EnumResultStatus.Finished && result.Data is not null) + { + /* Do something with the MRZ Result */ + } +} +``` + +## Enabling Audio and Haptic Feedback + +The MRZ Scanner library also offers the option to enable audio and haptic feedback upon a successful MRZ scan. Through the `IsBeepEnabled` and `IsVibrateEnabled` properties, you can choose to play a sound or make the device vibrate once the MRZ is recognized. + +```c# +private async void OnScanMRZ(object sender, EventArgs e) +{ + // The string "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" here grants a time-limited free trial which requires network connection to work. + // You can request a 30-day trial license via the Request a Trial License page https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=guide&package=maui. + var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); + config.IsBeepEnabled = true; // play a beep upon a successful MRZ scan + config.IsVibrateEnabled = true; // make the phone vibrate upon a successful MRZ scan + var result = await MRZScanner.Start(config); + if (result.ResultStatus == EnumResultStatus.Finished && result.Data is not null) + { + /* Do something with the MRZ Result */ + } +} +``` diff --git a/programming/maui/user-guide/index.md b/programming/maui/user-guide/index.md index b4086a1..47620ae 100644 --- a/programming/maui/user-guide/index.md +++ b/programming/maui/user-guide/index.md @@ -10,33 +10,10 @@ multiProgrammingLanguage: true enableLanguageSelection: true --- -# MAUI User Guide for MRZ Scanner Integration - -## Table of Contents - -- [MAUI User Guide for MRZ Scanner Integration](#maui-user-guide-for-mrz-scanner-integration) - - [Table of Contents](#table-of-contents) - - [Supported Machine-Readable Travel Document Types](#supported-machine-readable-travel-document-types) - - [ID (TD1 Size)](#id-td1-size) - - [ID (TD2 Size)](#id-td2-size) - - [Passport (TD3 Size)](#passport-td3-size) - - [System Requirements](#system-requirements) - - [.Net](#net) - - [Android](#android) - - [iOS](#ios) - - [Installation](#installation) - - [Visual Studio for Mac](#visual-studio-for-mac) - - [Visual Studio for Windows](#visual-studio-for-windows) - - [Build Your MRZ Scanner App](#build-your-mrz-scanner-app) - - [Set up Development Environment](#set-up-development-environment) - - [Initialize the Project](#initialize-the-project) - - [Visual Studio](#visual-studio) - - [Visual Studio for Mac](#visual-studio-for-mac-1) - - [Include the Library](#include-the-library) - - [Add Your Code for MRZ Scanning](#add-your-code-for-mrz-scanning) - - [Configure the Camera Permission](#configure-the-camera-permission) - - [Run the Project](#run-the-project) - - [Licensing](#licensing) +# MRZ Scanner User Guide (MAUI Edition) +This user guide will explore using the Dynamsoft MRZ Scanner (MAUI Edition) to easily integrate the ability to read MRZ data from identity documents such as passports and ID cards. The Dynamsoft MRZ Scanner comes with a ready-to-use setup that simplifies the development process, allowing you to focus on other aspects of the application. + +`MRZScanner` is the ready-to-use component that allows developers to quickly set up an MRZ scanning app. With the built-in component, it streamlines the integration of MRZ scanning functionality into any application. ## Supported Machine-Readable Travel Document Types @@ -45,7 +22,7 @@ The Machine Readable Travel Documents (MRTD) standard specified by the Internati Currently, the SDK supports three types of MRTD: > [!Note] -> If you need support for other types of MRTDs, our SDK can be easily customized. Please contact support@dynamsoft.com. +> If you need support for other types of MRTDs, our SDK can be easily customized. Please contact our [support team](https://www.dynamsoft.com/contact/). ### ID (TD1 Size) @@ -73,28 +50,51 @@ The MRZ (Machine Readable Zone) in TD3 format consists of 2 lines, with each lin ## System Requirements -### .Net +### .NET -- 8.0 and 9.0. +- 8.0 / 9.0 / 10.0 ### Android -- Supported OS: **Android 5.0** (API Level 21) or higher. -- Supported ABI: **armeabi-v7a**, **arm64-v8a**, **x86** and **x86_64**. -- Development Environment: Visual Studio 2022 recommended. +- Supported OS: **Android 5.0** (API Level 21) or higher +- Supported ABI: **armeabi-v7a**, **arm64-v8a**, **x86** and **x86_64** +- Development Environment: Visual Studio 2022 recommended - JDK: 1.8+ ### iOS -- Supported OS: **iOS 13.0** or higher. -- Supported ABI: **arm64** and **x86_64**. -- Development Environment: Visual Studio 2022 for Mac and Xcode 14.3+ recommended. +- Supported OS: **iOS 13.0** or higher +- Supported ABI: **arm64** and **x86_64** +- Development Environment: Xcode 14.3+ + +## Including the Library + +### Visual Studio Code for Mac + +Once the MAUI app is initialized in Visual Studio Code, the easiest way to include the library is to use the .NET CLI in the terminal. All you need to do is + +1. Open the Terminal in Visual Studio Code +2. Navigate to the project root directory (please note this is the folder that is in the same directory as .sln) +3. Run the following command `dotnet add package Dynamsoft.MRZScannerBundle.Maui --version 3.2.3000` + +If the installation is successful, you should see the following line in the *.csproj* file -## Installation +```xml + +``` + +When the project is built, the package will be downloaded and installed. + +> [!IMPORTANT] +> Please note that the default MAUI app configuration includes the Windows and Mac Catalyst platforms. The Dynamsoft MRZ Scanner MAUI library currently only supports iOS and Android. +> +> **Please remove the Windows and Mac Catalyst platforms from the `` of the *.csproj* to avoid build errors.** + + +> [!TIP] +> To learn fully about how to use Visual Studio Code to create a new .NET MAUI project, please visit this [guide](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-10.0&tabs=visual-studio-code&pivots=devices-ios) by Microsoft. -### Visual Studio for Mac -In the **NuGet Package Manager>Manage Packages for Solution** of your project, search for **Dynamsoft.MRZScannerBundle.Maui**. Select it and click **install**. ### Visual Studio for Windows @@ -107,127 +107,133 @@ You need to add the library via the project file and complete additional steps f ... ... - + ``` -2. Open the **Package Manager Console** and run the following commands: +2. Open the **Package Manager Console** and run the following command: ```bash dotnet build ``` -> [!Note] +> [!IMPORTANT] > -> - Windows system have a limitation of 260 characters in the path. If you don't use console to install the package, you will receive error "Could not find a part of the path 'C:\Users\admin\.nuget\packages\dynamsoft.imageprocessing.ios\2.4.200\lib\net7.0-ios16.1\Dynamsoft.ImageProcessing.iOS.resources\DynamsoftImageProcessing.xcframework\ios-arm64\dSYMs\DynamsoftImageProcessing.framework.dSYM\Contents\Resources\DWARF\DynamsoftImageProcessing'" -> - The library only support Android & iOS platform. Be sure that you remove the other platforms like Windows, maccatalyst, etc. +> Windows system paths have a limitation of 260 characters. If the console is not used to install the package, you will receive an error saying +> +> `Could not find a part of the path 'C:\Users\admin\.nuget\packages\dynamsoft.imageprocessing.ios\2.4.200\lib\net7.0-ios16.1\Dynamsoft.ImageProcessing.iOS.resources\DynamsoftImageProcessing.xcframework\ios-arm64\dSYMs\DynamsoftImageProcessing.framework.dSYM\Contents\Resources\DWARF\DynamsoftImageProcessing'` +> +> +> The library only support the iOS and Android platforms. Be sure that you remove the other platforms like Windows, maccatalyst, etc. -## Build Your MRZ Scanner App +## Building the MRZ Scanner Component -Now you will learn how to create a simple MRZ scanner using DynamsoftMRZScanner MAUI SDK. +Now that the package is added, it's time to start building the `MRZScanner` component. -> [!Note] +> [!NOTE] > -> - You can get the similar source code of the ScanMRZ app from the following link -> - [C#](https://github.com/Dynamsoft/mrz-scanner-mobile-maui/tree/main/ScanMRZ){:target="_blank"}. +> You can get the full source code of the ScanMRZ app from this [Github repo](https://github.com/Dynamsoft/mrz-scanner-mobile-maui/tree/main/ScanMRZ){:target="_blank"}. -### Set up Development Environment +### Set up the Development Environment -If you are a beginner with MAUI, please follow the guide on the .Net MAUI official website to set up the development environment. +If you are a beginner with MAUI, please follow the guide on the .NET MAUI official website to set up the development environment. + +> [!TIP] +> On Mac, you need to use Visual Studio Code with the .NET MAUI extension in order to create .NET MAUI apps. ### Initialize the Project -#### Visual Studio +#### Visual Studio (Windows) 1. Open the Visual Studio and select **Create a new project**. -2. Select **.Net MAUI App** and click **Next**. +2. Select **.NET MAUI App** and click **Next**. 3. Name the project **ScanMRZ**. Select a location for the project and click **Next**. -4. Select **.Net 9.0** and click **Create**. +4. Select **.NET 10.0** and click **Create**. + +#### Visual Studio Code (MacOS) + +To set up a new .NET MAUI app on Visual Studio Code for Mac, please follow the instructions provided by Microsoft [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-10.0&tabs=visual-studio-code&pivots=devices-ios#create-an-app-1). -#### Visual Studio for Mac +> [!NOTE] +> ScanMRZ is the project name that we use throughout this guide, but of course it is not a requirement. -1. Open Visual Studio and select **New**. -2. Select **Multiplatform > App > .Net MAUI App > C#** and click **Continue**. -3. Select **.Net 9.0** and click **Continue**. -4. Name the project **ScanMRZ** and select a location, click **Create**. +> [!TIP] +> Please note that this guide uses .NET 10, but you can use .NET 8 or 9 if you wish. Before doing so, please check that the version of .NET that you want to use is currently supported on this [page](https://learn.microsoft.com/en-us/dotnet/core/releases-and-support). -### Include the Library -Please view the [installation section](#installation) on how to add the library. +### Importing the Library -Add the following code to the **App.xaml.cs** file to use the library: +With the package now added to the project, you can import the library by adding the following code at the top of the **App.xaml.cs** file: ```c# using Dynamsoft.MRZScannerBundle.Maui; ``` -### Add Your Code for MRZ Scanning - -1. Edit the **MainPage.xaml** file. - - Replace your **MainPage.xaml** with the following code. - - ```c# - using System.Collections.ObjectModel; - using Dynamsoft.MRZScannerBundle.Maui; - - namespace ScanMRZ; - - public partial class MainPage : ContentPage - { - public ObservableCollection TableItems { get; set; } = new(); - - public MainPage() - { - InitializeComponent(); - BindingContext = this; - } - - private async void OnScanMRZ(object sender, EventArgs e) - { - // The string "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" here grants a time-limited free trial which requires network connection to work. - // You can request a 30-day trial license via the Request a Trial License page https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=guide&package=maui. - var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); - var result = await MRZScanner.Start(config); - - TableItems.Clear(); - - if (result.ResultStatus == EnumResultStatus.Finished && result.Data is not null) - { - var data = result.Data; - - TableItems.Add(new TableItem { Key = "Name", Value = $"{data.FirstName} {data.LastName}" }); - TableItems.Add(new TableItem { Key = "Sex", Value = data.Sex.ToUpperInvariant() }); - TableItems.Add(new TableItem { Key = "Age", Value = data.Age.ToString() }); - TableItems.Add(new TableItem { Key = "Document Type", Value = data.DocumentType }); - TableItems.Add(new TableItem { Key = "Document Number", Value = data.DocumentNumber }); - TableItems.Add(new TableItem { Key = "Issuing State", Value = data.IssuingState }); - TableItems.Add(new TableItem { Key = "Nationality", Value = data.Nationality }); - TableItems.Add(new TableItem { Key = "Date Of Birth (YYYY-MM-DD)", Value = data.DateOfBirth }); - TableItems.Add(new TableItem { Key = "Date Of Expire (YYYY-MM-DD)", Value = data.DateOfExpire }); - } - else - { - var msg = result.ResultStatus == EnumResultStatus.Canceled - ? "Scanning canceled" - : result.ErrorString ?? "Unknown error"; - - TableItems.Add(new TableItem { Key = "Result", Value = msg }); - } - } - } - - public class TableItem - { - public string Key { get; set; } - public string Value { get; set; } - } - ``` - -2. Edit the MainPage.xaml file. +### Quick Start + +In this section we will take you through the full *Hello World* implementation in **MainPage.xaml.cs** as well as **MainPage.xaml**. + +1. First, let's edit **MainPage.xaml.cs** in order to define the operation of the MRZ Scanner + + ```c# + using System.Collections.ObjectModel; + using Dynamsoft.MRZScannerBundle.Maui; + + namespace ScanMRZ; + + public partial class MainPage : ContentPage + { + public ObservableCollection TableItems { get; set; } = new(); + + public MainPage() + { + InitializeComponent(); + BindingContext = this; + } + + private async void OnScanMRZ(object sender, EventArgs e) + { + // The string "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" here grants a time-limited free trial which requires network connection to work. + // You can request a 30-day trial license via the Request a Trial License page https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=guide&package=maui. + var config = new MRZScannerConfig("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); + var result = await MRZScanner.Start(config); + + TableItems.Clear(); + + if (result.ResultStatus == EnumResultStatus.Finished && result.Data is not null) + { + var data = result.Data; + + TableItems.Add(new TableItem { Key = "Name", Value = $"{data.FirstName} {data.LastName}" }); + TableItems.Add(new TableItem { Key = "Sex", Value = data.Sex.ToUpperInvariant() }); + TableItems.Add(new TableItem { Key = "Age", Value = data.Age.ToString() }); + TableItems.Add(new TableItem { Key = "Document Type", Value = data.DocumentType }); + TableItems.Add(new TableItem { Key = "Document Number", Value = data.DocumentNumber }); + TableItems.Add(new TableItem { Key = "Issuing State", Value = data.IssuingState }); + TableItems.Add(new TableItem { Key = "Nationality", Value = data.Nationality }); + TableItems.Add(new TableItem { Key = "Date Of Birth (YYYY-MM-DD)", Value = data.DateOfBirth }); + TableItems.Add(new TableItem { Key = "Date Of Expire (YYYY-MM-DD)", Value = data.DateOfExpire }); + } + else + { + var msg = result.ResultStatus == EnumResultStatus.Canceled + ? "Scanning canceled" + : result.ErrorString ?? "Unknown error"; + + TableItems.Add(new TableItem { Key = "Result", Value = msg }); + } + } + } + + public class TableItem + { + public string Key { get; set; } + public string Value { get; set; } + } + ``` - Add the following code to the **MainPage.xaml** file: +2. Edit **MainPage.xaml** to setup the UI portion of the app ```xml @@ -269,25 +275,80 @@ using Dynamsoft.MRZScannerBundle.Maui; ``` +> [!NOTE] +> +>- The license string here grants a time-limited free trial which requires network connection to work. +>- You can request a 30-day trial license via the [Trial License portal](https://www.dynamsoft.com/customer/license/trialLicense?product=mrz&utm_source=github&package=mobile). + +### MRZ Result and Data + +Once the scan process completes and the MRZ Scanner successfully recognizes a MRZ, a `MRZScanResult` is produced, representing all of the decrypted data contained within the MRZ. + +[`MRZScanResult`](../api-reference/mrz-scan-result.md) has the following properties: + +- **resultStatus**: The status of the MRZ scan result, of type [`EnumResultStatus`](../api-reference/result-status.md). + - *Finished*: The MRZ scan was successful. + - *Canceled*: The MRZ scanning activity is closed before the process is finished. + - *Exception*: Failed to start MRZ scanning or an error occurs when scanning the MRZ. +- **errorCode**: The error code indicates if something went wrong during the MRZ scanning process (0 means no error). Only defined when the `resultStatus` is `Exception`. +- **errorString**: The error message associated with the error code if an error occurs during MRZ scanning process. Only defined when the `resultStatus` is `Exception`. +- **data**: The parsed MRZ data as a `MRZData` object. + +[`MRZData`](../api-reference/mrz-data.md) holds the actual decrypted data of the MRZ result, and it comes with the following fields: -### Configure the Camera Permission +- **documentType**: The type of MRZ document, which would either be `EnumDocumentType.Passport`, `EnumDocumentType.Id`, or `EnumDocumentType.All`. You can check out the [Supported Machine-Readable Travel Document Types](#supported-machine-readable-travel-document-types) to learn more. +- **firstName**: The first name of the MRZ document holder. +- **lastName**: The last name of the MRZ document holder. +- **sex**: The sex of the MRZ document holder. +- **issuingState**: The issuing state of the MRZ document. +- **nationality**: The nationality of the MRZ document holder. +- **dateOfBirth**: The date of birth of the MRZ document holder. +- **dateOfExpiry**: The expiry date of the MRZ document. +- **documentNumber**: The MRZ document number. +- **age**: The age of the MRZ document holder. +- **mrzText**: The raw text of the MRZ. -Open the **Info.plist** file under the **Platforms/iOS/** folder (Open with XML Text Editor). Add the following lines to request camera permission on iOS platform: +### Customizing the MRZ Scanner (Optional) + +Even though the default settings of the ready-to-use MRZ Scanner is sufficient to cover the majority of MRZ scanning scenarios, the [`MRZScannerConfig`](../api-reference/mrz-scanner-config.md) class allows you to change the behaviour of the MRZ Scanner to fit your specific scenario. Using this class can help you customize different UI elements and determine the settings of the scanner engine itself. + +To learn of the different ways in which the MRZ scanner can be customized, please refer to the [MRZ Scanner Customization Guide](customize-mrz-scanner.md). + +## Run the Project + +### iOS + +#### Configure Camera Permissions + +Open the **Info.plist** file under the **Platforms/iOS/** folder using a IDE or text editor. Add the following lines towards the bottom (right before to request camera permission on iOS platform: ```xml NSCameraUsageDescription The APP needs to access your camera. ``` -### Run the Project +#### Deploying to Device -Select your device and run the project. +In order to deploy the app to your connected iPhone, please make sure that there is valid provisioning profile for the app ID set in the *.csproj* or else you will encounter a general build error on Visual Studio Code. -You can get the similar source code of the ScanMRZ app from the following link: +The app can then be run using the C# Dev Kit extension of Visual Studio Code per the instructions [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-10.0&tabs=visual-studio-code&pivots=devices-ios). -- [C#](https://github.com/Dynamsoft/mrz-scanner-mobile-maui/tree/main/ScanMRZ){:target="_blank"}. +> [!IMPORTANT] +> It is highly recommended to use the C# Dev Kit extension when developing for iOS on Visual Studio Code. However, you can also run the app via command-line. -> [!Note] +### Android + +#### Configure Camera Permissions + +On Android, there is no need to configure the camera permissions as that is handled internally by the library. + +#### Deploying to Device + +If you are running on **Visual Studio**, simply select the target Android phone and run the project. + +If you are running on **Visual Studio Code**, use the C# Dev Kit to run the Android target on the selected Android phone, similar to the iOS workflow. + +> [!NOTE] > If you are running Android only on Visual Studio Windows, please manually exclude iOS and Windows platforms. Otherwise, the Visual Studio will report type or namespace not found errors. ![Exclude iOS and Windows from targets](../../assets/maui-exclude.png) diff --git a/programming/react-native/api-reference/document-type.md b/programming/react-native/api-reference/document-type.md new file mode 100644 index 0000000..baf2854 --- /dev/null +++ b/programming/react-native/api-reference/document-type.md @@ -0,0 +1,35 @@ +--- +layout: default-layout +title: EnumDocumentType - Dynamsoft MRZ Scanner React Native Edition +description: EnumDocumentType of DynamsoftMRZScanner React Native is an enumeration class that defines the result status of the MRZScanResult. +keywords: document type, id cards, passports +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: EnumDocumentType +--- + +# EnumDocumentType + +`EnumDocumentType` is an enumeration class that defines the type of document to scan, such as ID cards or passports. + +## Definition + +*Assembly:* dynamsoft-capture-vision-react-native + +```ts +export enum EnumDocumentType +{ + DT_ALL, // supports both ID cards (TD1 and TD2) and passports (TD3) + DT_ID, // only supports ID cards (TD1 and TD2) + DT_PASSPORT // only supports passports (TD3) +} +``` + +## Members + +| Member | Description | +| ------ | ----------- | +| `DT_ALL` | Supports both ID cards (TD1 and TD2) and passports (TD3) | +| `DT_ID` | Only supports ID cards (TD1 and TD2) | +| `DT_PASSPORT` | Only supports passports (TD3) | + diff --git a/programming/react-native/api-reference/index.md b/programming/react-native/api-reference/index.md new file mode 100644 index 0000000..3989726 --- /dev/null +++ b/programming/react-native/api-reference/index.md @@ -0,0 +1,21 @@ +--- +layout: default-layout +title: MRZScanner API reference - Dynamsoft MRZ Scanner React Native Edition +description: This is the main page of MRZScanner API Reference for React Native Language. +keywords: MRZScanner, api reference, React Native +--- + +# MRZScanner API References + +`MRZScanner` is a ready-to-use component that enables developers to quickly set up an app for scanning MRZ codes on passports and ID cards. The `MRZScanner` simplifies the integration of MRZ scanning functionality into any application, making it easy to extract and process information from travel and identity documents. + +## Classes + +| Class | Description | +| ----- | ----------- | +| [`MRZScanner`](mrz-scanner.md) | The main class of `MRZScanner` component. It is an activity class that implements MRZ scanning features. | +| [`MRZScannerConfig`](mrz-scanner-config.md) | The class that provides MRZ scanning configurations. | +| [`MRZScanResult`](mrz-scan-result.md) | The MRZ scan result class. | +| [`MRZData`](mrz-data.md) | The class that contains the parsed MRZ information. | +| [`EnumResultStatus`](result-status.md) | A enumeration class that describes the result status. | +| [`EnumDocumentType`](document-type.md) | A enumeration class that defines the type of document to scan, such as ID cards or passports. | diff --git a/programming/react-native/api-reference/mrz-data.md b/programming/react-native/api-reference/mrz-data.md new file mode 100644 index 0000000..ef92fd6 --- /dev/null +++ b/programming/react-native/api-reference/mrz-data.md @@ -0,0 +1,125 @@ +--- +layout: default-layout +title: MRZData Class - Dynamsoft MRZ Scanner React Native Edition +description: MRZData of DynamsoftMRZScanner React Native is a result class that contains the parsed MRZ information. +keywords: MRZ, scanner, scan result +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: MRZData +--- + +# MRZData + +`MRZData` is a result class that is used to represent the parsed MRZ information. + +## Definition + +*Assembly:* dynamsoft-capture-vision-react-native + +```ts +class MRZData +``` + +## Properties + +| Property | Type | Description | +| -------- | ---- | ----------- | +| [`firstName`](#firstname) | *string* | The first name of the MRZ document holder. | +| [`lastName`](#lastname) | *string* | The last name of the MRZ document holder. | +| [`sex`](#sex) | *string* | The sex of the MRZ document holder. | +| [`issuingState`](#issuingstate) | *string* | The issuing state (represented as the full name of the country/region) of the MRZ document. | +| [`nationality`](#nationality) | *string* | The nationality (represented as the full name of the country/region) of the MRZ document holder. | +| [`dateOfBirth`](#dateofbirth) | *string* | The date of birth of the MRZ document holder. | +| [`dateOfExpire`](#dateofexpire) | *string* | The expiry date of the MRZ document. | +| [`documentType`](#documenttype) | *string* | The type of MRTD that the MRZ document is. | +| [`documentNumber`](#documentnumber) | *string* | The MRZ document number. | +| [`age`](#age) | *number* | The age of the MRZ document holder. | +| [`mrzText`](#mrztext) | *string* | The raw unparsed text of the MRZ. | + +### firstName + +Represents the first name of the MRZ document holder. + +```ts +firstName?: string +``` + +### lastName + +Represents the last name of the MRZ document holder. + +```ts +lastName?: string +``` + +### sex + +Represents the sex of the MRZ document holder. + +```ts +sex?: string +``` + +### issuingState + +Represents the issuing state of the MRZ document. + +```ts +issuingState?: string +``` + +### nationality + +Represents the nationality of the MRZ document holder. + +```ts +nationality?: string +``` + +### dateOfBirth + +Represents the date of birth of the MRZ document holder. + +```ts +dateOfBirth?: string +``` + +### dateOfExpire + +Represents the expiry date of the MRZ document. + +```ts +dateOfExpire?: string +``` + +### documentType + +Represents the type of MRZ document. + +```ts +documentType?: string +``` + +### documentNumber + +Represents the MRZ document number. + +```ts +documentNumber?: string +``` + +### age + +Represents the age of the MRZ document holder. + +```ts +age?: number +``` + +### mrzText + +Represents the raw text of the MRZ. + +```ts +mrzText?: string +``` diff --git a/programming/react-native/api-reference/mrz-scan-result.md b/programming/react-native/api-reference/mrz-scan-result.md new file mode 100644 index 0000000..317e4ad --- /dev/null +++ b/programming/react-native/api-reference/mrz-scan-result.md @@ -0,0 +1,70 @@ +--- +layout: default-layout +title: MRZScanResult Class - Dynamsoft MRZ Scanner React Native Edition +description: MRZScanResult of DynamsoftMRZScanner React Native is a result class that contains the parsed MRZ information from one scan and the additional information. +keywords: MRZ, scanner, scan result +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: MRZScanResult +--- + +# MRZScanResult + +`MRZScanResult` is the most basic class to represent the full MRZ result object. It comes with a result status and the parsed MRZ info as a MRZData object. + +## Definition + +*Assembly:* dynamsoft-capture-vision-react-native + +```ts +class MRZScanResult +``` + +## Properties + +| Property | Type | Description | +| -------- | ---- | ----------- | +| [`data`](#mrzdata) | [*MRZData*](mrz-data.md) | Represents the parsed MRZ data. | +| [`resultStatus`](#resultstatus) | [*EnumResultStatus*](result-status.md) | Represents the status of the result, which can be finished, canceled or exception. | +| [`errorCode`](#errorcode) | *number?* | Represents the error code should something go wrong during the MRZ scanning process. | +| [`errorString`](#errorstring) | *string?* | Represents the error message associated with the error code should something go wrong during the MRZ scanning process. | + +### mrzData + +Represents the parsed MRZ information as a [`MRZData`](mrz-data.md) object. + +```ts +data?: MRZData +``` + +### resultStatus + +Represents the status of the result, which can be finished, canceled or exception. + +```ts +resultStatus: EnumResultStatus +``` + +**Remarks** + +The result status can be one of three things: + +- `RS_FINISHED`: The MRZ scanning is finished. +- `RS_CANCELED`: The MRZ scanning activity is closed before the process is finished. +- `RS_EXCEPTION`: Failed to start MRZ scanning or an error occurs when scanning the MRZ. + +### errorCode + +Returns the error code when an exception occurs. This value is only valid when resultStatus is `RS_EXCEPTION`. + +```ts +errorCode?: number +``` + +### errorString + +Returns the error message associated with the error code when an exception occurs. This value is only valid when resultStatus is `RS_EXCEPTION`. + +```ts +errorString?: string +``` diff --git a/programming/react-native/api-reference/mrz-scanner-config.md b/programming/react-native/api-reference/mrz-scanner-config.md new file mode 100644 index 0000000..a34fc23 --- /dev/null +++ b/programming/react-native/api-reference/mrz-scanner-config.md @@ -0,0 +1,130 @@ +--- +layout: default-layout +title: MRZScannerConfig Class - Dynamsoft MRZ Scanner React Native Edition +description: MRZScannerConfig of DynamsoftMRZScanner React Native is the class that defines the configurations for MRZ scanning. +keywords: MRZ, scanner, config, React Native +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: MRZScannerConfig +--- + +# MRZScanConfig + +`MRZScanConfig` is responsible for the configuration of the MRZ Scanner, from assigning the MRZ Scanner license to configuring the supported document types, along with other customizations. + +> [!NOTE] +> If you are wondering about the different ways you can customize the MRZ Scanner, please refer to the [MRZ Scanner Customization Guide](../user-guide/customize-mrz-scanner.md). + +## Definition + +*Assembly:* dynamsoft-capture-vision-react-native + +```ts +interface MRZScannerConfig +``` + +## Properties + +| Property | Type | Description | +| -------- | ---- | ----------- | +| [`license`](#license) | *String* | Represents the MRZ Scanner license string. | +| [`templateFile`](#templatefile) | *String* | Specifies the template configuration that defines the various MRZ Scanner parameters. | +| [`documentType`](#documenttype) | [*EnumDocumentType*](document-type.md) | Specifies the type of document (ID or Passport) that the MRZ Scanner will recognize. | +| [`isTorchButtonVisible`](#istorchbuttonvisible) | *bool* | Represents the visibility status of the torch button. | +| [`isBeepEnabled`](#isbeepenabled) | *bool* | Determines whether a beep sound is triggered upon a successful MRZ scan. | +| [`isCloseButtonVisible`](#isclosebuttonvisible) | *bool* | Represents the visibility status of the close button. | +| [`isGuideFrameVisible`](#isguideframevisible) | *bool* | Represents the visibility status of the guide frame on the display. | +| [`isCameraToggleButtonVisible`](#Iscameratogglebuttonvisible) | *bool* | Specifies whether the camera toggle button is displayed or not. | +| [`isVibrateEnabled`](#isvibrateenabled) | *bool* | Controls the scanner's ability to make the scanning device vibrate upon a successful MRZ scan. | + +### license + +The license key is the only property whose ***value must be specified when instantiating the MRZ Scanner instance***. If the license is undefined, invalid, or expired, the MRZ Scanner cannot proceed with scanning, and instead displays a pop-up error message instructing the user to contact the app administrator to resolve this license issue. + +```ts +license?: string +``` + +### templateFile + +Specifies the template configuration with a file path or a JSON string that defines the various MRZ Scanner parameters. These specialized templates are usually used for very specific and customized scanning scenarios. + +```ts +templateFile?: string +``` + +**Remarks** + +The MRZ Scanner comes with a default template file, but you may choose to use a custom template to target specialized use cases. We recommend contacting the [Dynamsoft Technical Support Team](https://www.dynamsoft.com/company/contact/) for assistance with template customization. + +### templateNodeRequire + +Provides a Node.js 'require' function to load the template file when running in a Node environment. This facilitates importing external template configuration files. + +```ts +templateNodeRequire?: NodeRequire +``` + +Remarks + +For most typical cases, this + +### documentType + +Specifies the type of document that the MRZ Scanner will recognize, represented as a [`EnumDocumentType`](document-type.md). This property accepts values defined in the EnumDocumentType such as `EnumDocumentType.DT_ALL` (TD1/2/3), `EnumDocumentType.DT_ID` (TD1/2), or `EnumDocumentType.DT_PASSPORT` (TD3). + +```ts +documentType?: EnumDocumentType +``` + +**Remarks** + +If you would like to learn more about the supported document types, please refer to the [Supported Document Types](../user-guide/index.md#supported-machine-readable-travel-document-types) section of the user guide. + +### isTorchButtonVisible + +Determines whether the torch (flashlight) toggle button is visible on the scanning interface. Set to true to allow users to switch the device's flashlight on or off during MRZ scanning. + +```ts +isTorchButtonVisible?: boolean +``` + +### isBeepEnabled + +Determines whether a beep sound is triggered upon a successful MRZ scan. When enabled (true), the scanner will play a sound to provide audible feedback. + +```ts +isBeepEnabled?: boolean +``` + +### isCloseButtonVisible + +Controls the visibility of the close button on the scanner's UI. If true, a close button will be displayed allowing users to exit the MRZ scanning interface. + +```ts +isCloseButtonVisible?: boolean +``` + +### isGuideFrameVisible + +Represents the visibility status of the guide frame on the display. + +```ts +isGuideFrameVisible?: boolean +``` + +### isCameraToggleButtonVisible + +Specifies whether the camera toggle button is displayed. This button lets users switch between available cameras (e.g., front and rear). + +```ts +isCameraToggleButtonVisible?: boolean +``` + +### isVibrateEnabled + +Controls the scanner's ability to make the scanning device vibrate upon a successful MRZ scan. When enabled (true), the scanner will vibrate to provide haptic feedback if the device supports it. + +```ts +isVibrateEnabled?: boolean +``` diff --git a/programming/react-native/api-reference/mrz-scanner.md b/programming/react-native/api-reference/mrz-scanner.md new file mode 100644 index 0000000..dfe95dc --- /dev/null +++ b/programming/react-native/api-reference/mrz-scanner.md @@ -0,0 +1,62 @@ +--- +layout: default-layout +title: MRZScanner Class - Dynamsoft MRZ Scanner React Native Edition +description: MRZScanner of DynamsoftMRZScanner React Native is an activity class that implements MRZ scanning features. +keywords: MRZ, scanner, activity +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: MRZScanner +--- + +# Class MRZScanner + +`MRZScanner` is the main class for setting up and running the MRZ Scanner. + +## Definition + +*Assembly:* dynamsoft-capture-vision-react-native + +```ts +class MRZScanner +``` + +## Methods + +## launch + +Starts the MRZ (Machine Readable Zone) scanner by launching a new page (Activity on Android or ViewController on iOS). + +This function initiates the MRZ scanning process by launching a new page dedicated to scanning. It accepts an optional configuration object to customize the scanning behavior. If no configuration is provided, it uses a default configuration. The function returns a Promise that resolves with the scan result or rejects with an error if the scanning process fails. + +For Android, this function starts an Activity that handles the MRZ scanning. For iOS, it presents a ViewController for the same purpose. After scanning, the function handles the result and closes the scanning page if necessary. + +```ts +launch(config?: MRZScanConfig): Promise +``` + +## Code Snippet + +```ts +const ScanMRZ = async () => { + let mrzScanConfig = { + license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', + } as MRZScanConfig; + let mrzResult = await MRZScanner.launch(mrzScanConfig); + let displayString: string; + if (mrzResult.resultStatus === EnumResultStatus.RS_FINISHED) { + let mrzData = mrzResult?.data!; + displayString = Object.entries(mrzData) + .map(([fieldName, fieldValue]) => `${fieldName} : \t${fieldValue}`) + .join('\n\n'); + } else if (mrzResult.resultStatus === EnumResultStatus.RS_CANCELED) { + displayString = 'Scan cancelled.'; + } else { + displayString = `ErrorCode: ${mrzResult.errorCode}\n\nErrorMessage: ${mrzResult.errorString}`; + } + setDisplayText(displayString); + setIsError(mrzResult.resultStatus === EnumResultStatus.RS_EXCEPTION); +}; +``` + +> [!NOTE] +> If you would like to see the full code to implement the full Hello World sample, please refer to the [User Guide](../user-guide/index.md). diff --git a/programming/react-native/api-reference/result-status.md b/programming/react-native/api-reference/result-status.md new file mode 100644 index 0000000..5718e7e --- /dev/null +++ b/programming/react-native/api-reference/result-status.md @@ -0,0 +1,34 @@ +--- +layout: default-layout +title: EnumResultStatus - Dynamsoft MRZ Scanner React Native Edition +description: EnumResultStatus of DynamsoftMRZScanner React Native is an enumeration class that defines the result status of the MRZScanResult. +keywords: MRZScanner, MRZScanResult +needAutoGenerateSidebar: true +needGenerateH3Content: true +breadcrumbText: EnumResultStatus +--- + +# EnumResultStatus + +`EnumResultStatus` is a enumeration class that defines the result status of the `MRZScanResult`. + +## Definition + +*Assembly:* dynamsoft-capture-vision-react-native + +```ts +enum EnumResultStatus +{ + RS_FINISHED, + RS_CANCELED, + RS_EXCEPTION +} +``` + +## Members + +| Member | Description | +| ------ | ----------- | +| `RS_FINISHED` | The MRZ scanning process was a success and the MRZ result has been received. | +| `RS_CANCELED` | The MRZ scanning process was cancelled by the user (usually by closing the UI using the close button). | +| `RS_EXCEPTION` | Something went wrong during the barcode decoding process and an exception has been thrown. | diff --git a/programming/react-native/index.md b/programming/react-native/index.md new file mode 100644 index 0000000..c2ef2b8 --- /dev/null +++ b/programming/react-native/index.md @@ -0,0 +1,64 @@ +--- +layout: default-layout +title: Main Page - Dynamsoft MRZ Scanner for React Native +description: This is the main page of Dynamsoft MRZ Scanner for React Native SDK. +keywords: React Native +needAutoGenerateSidebar: false +breadcrumbText: React Native +--- + +# Dynamsoft MRZ Scanner React Native Edition + +Dynamsoft MRZ Scanner SDK React Native Edition is designed to integrate the ability to scan MRZ documents such as passports, ID cards, and other travel documents. + +## Using the SDK + +### System Requirements + +#### React Native + +- Supported Version: 0.71.0+ (0.79.0+ recommended) + +#### Android + +- Supported OS: **Android 5.0** (API Level 21) or higher. +- Supported ABI: **armeabi-v7a**, **arm64-v8a**, **x86** and **x86_64**. +- Development Environment: Android Studio 2022.2.1+ (2025.2.1 recommended); Java 17+; Gradle 8.0+ +- JDK: 1.8+ + +#### iOS + +- Supported OS: **iOS 13.0** or higher. +- Supported ABI: **arm64** and **x86_64**. +- Development Environment: Xcode 14.3+ recommended. + +#### Node + +- Supported Version: 18+ + +### User Guide + +- [MRZ Scanner User Guide](user-guide/index.md) +- [Customizing the MRZ Scanner](user-guide/customize-mrz-scanner.md) + +### Samples and Demos + +- [Samples & Demos](samples/index.md) + +### API Reference + +- [API Reference](./api-reference/index.md) + +## Release Notes + +- [Version 3.x](release-notes/index.md) + +## License Subscription + +To develop and run your application with Dynamsoft MRZ Scanner SDK, you need an active license key: + +- [Request a 30-day free trial license](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=docs&product=mrz&package=reactnative){:target="_blank"} + +## Contact Us + +Feel free to [contact us](https://www.dynamsoft.com/company/customer-service/#contact){:target="_blank"} if you have any questions. diff --git a/programming/react-native/release-notes/index.md b/programming/react-native/release-notes/index.md new file mode 100644 index 0000000..3d14193 --- /dev/null +++ b/programming/react-native/release-notes/index.md @@ -0,0 +1,35 @@ +--- +layout: default-layout +title: React Native Release Notes v3.x - Dynamsoft MRZ Scanner +description: This is the release notes page of Dynamsoft MRZ Scanner for React Native SDK v3.x. +keywords: release notes, MAUI, version 3.x, +needAutoGenerateSidebar: true +needGenerateH3Content: false +noTitleIndex: true +--- + +# Dynamsoft MRZ Scanner React Native SDK - Release Notes + +## 3.2.3000 (11/06/2025) + +### Highlighted Features + +- Updated the underlying Capture Vision bundle to 3.2.3000 for major improvements in reading accuracy and speed. +- Neural MRZ Localization – The new MRZLocalization model improves region detection accuracy and delivers up to **42.7% faster processing** for MRZ-based document workflows. +- Configurable Localization Control – The new LocalizationModes parameter allows configuration for text line detection. + +## 3.0.5200 (08/28/2025) + +This is the introductory version of the MRZ Scanner (React Native Edition) to include the newly designed and developed ready-to-use `MRZScanner` component. + +### Highlighted Features + +- Automatic detection and parsing of MRZs in passports and IDs +- Support for the following MRTD formats: TD3 (Passport), TD2 (ID), and TD1 (ID) +- Ready-to-use UI to simplify the development process +- Modular, view-based design for easy maintenance and customization +- Added support for 16kb page sizes for Android. + +### Improvements + +- **License Validation Behavior**: Instead of stopping execution immediately on an invalid license module, the library now continues processing and returns results from modules with valid licenses. An error is still reported to indicate the license issue. diff --git a/programming/react-native/samples/index.md b/programming/react-native/samples/index.md new file mode 100644 index 0000000..e3a2176 --- /dev/null +++ b/programming/react-native/samples/index.md @@ -0,0 +1,22 @@ +--- +layout: default-layout +title: Demo & Samples - Dynamsoft MRZ Scanner React Native Edition +description: The index of Dynamsoft MRZ Scanner React Native demo & samples. +keywords: demo, sample, index, React Native +needAutoGenerateSidebar: true +noTitleIndex: false +--- + +# Demo and Samples + +## MRZScanner Demo + +- [View in Google Play Store](https://play.google.com/store/apps/details?id=com.dynamsoft.mrzscanner){:target="_blank"} +- [View in Apple Store](https://apps.apple.com/us/app/dynamsoft-mrz-scanner/id6736854735){:target="_blank"} +- [Download APK](https://download2.dynamsoft.com/mrzscanner/android/DynamsoftMRZScannerDemoAndroid.apk) + +## ScanMRZ Sample + +Scan the MRZ code from a passport or ID card and extract the information using the ready-to-use component(`MRZScanner`) + +[Check the code on GitHub!](https://github.com/Dynamsoft/capture-vision-react-native-samples/tree/main/ScanMRZ) diff --git a/programming/react-native/user-guide/customize-mrz-scanner.md b/programming/react-native/user-guide/customize-mrz-scanner.md new file mode 100644 index 0000000..482c402 --- /dev/null +++ b/programming/react-native/user-guide/customize-mrz-scanner.md @@ -0,0 +1,107 @@ +--- +layout: default-layout +title: Customize MRZ Scanner - Dynamsoft MRZ Scanner React Native Edition +description: Customize the MRZ scan settings via MRZScanConfig class when using MRZ Scanner React Native Edition +keywords: Customize, config, MRZScanConfig, React Native +breadcrumbText: Customize MRZ Scanner +noTitleIndex: true +needGenerateH3Content: true +needAutoGenerateSidebar: true +--- + +# Customizing the MRZ Scanner + +When developing with `MRZScanner` component (see the [User Guide](index.md)), you can add extra configurations via the `MRZScanConfig` class. Before diving into the different ways in which you can customize the MRZ Scanner, let's first break down the different properties of the `MRZScanConfig` class. + +## `MRZScanConfig` Overview + +The [**`MRZScanConfig`**](../api-reference/mrz-scanner-config.md) class is capable of configuring almost all customization options applicable to MRZ scanning use cases with the MRZ Scanner. The MRZ Scanner uses passes an `MRZScanConfig` object to the constructor when creating an MRZ Scanner instance. `MRZScanConfig` contains the following properties: + +1. **`license`** - the license key is the only property whose ***value must be specified when instantiating the MRZ Scanner instance***. If the license is undefined, invalid, or expired, the MRZ Scanner cannot proceed with scanning, and instead displays a pop-up error message instructing the user to contact the app administrator to resolve this license issue. + +2. **`documentType`** (default value `EnumDocumentType.DT_ALL`) - specifies the type of document that the MRZ Scanner will recognize. This property accepts values defined in the EnumDocumentType such as `EnumDocumentType.DT_ALL`, `EnumDocumentType.DT_ID`, or `EnumDocumentType.DT_PASSPORT`. It helps the scanner to optimize its processing based on the expected document type. To learn more about the different document types that are supported, please refer to the [Supported Document Types](index.md#supported-machine-readable-travel-document-types) section of the user guide. + +3. **`templateFile`** - a template file is a JSON file or JSON string that contains a series of algorithm parameter settings (called Capture Vision templates) that is usually used for very specific and customized scanning and parsing scenarios. The `templateFile` points to the location of the JSON file. The MRZ Scanner comes with a default template file, but you may choose to use a custom template to target specialized use cases. We recommend contacting the [Dynamsoft Technical Support Team](https://www.dynamsoft.com/company/contact/) for assistance with template customization. + +4. **`isBeepEnabled`** (default value `false`) - a boolean that determines whether a beep sound is triggered upon a successful MRZ scan. When enabled (true), the scanner will play a sound to provide audible feedback. + +5. **`isCameraToggleButtonVisible`** (default value `false`) - a boolean that specifies whether the camera toggle button is displayed. This button lets users switch between available cameras (e.g., front and rear). + +6. **`isCloseButtonVisible`** (default value `true`) - a boolean to control the visibility of the close button on the scanner's UI. If true, a close button will be displayed allowing users to exit the MRZ scanning interface. + +7. **`isGuideFrameVisible`** (default value `true`) - serves as a toggle to show or hide the guide frame in the UI during scanning. The guide frame assists users in properly aligning the document for optimal MRZ detection. When set to true, a visual overlay is displayed on the scanning interface. + +8. **`isTorchButtonVisible`** (default value `true`) - determines whether the torch (flashlight) toggle button is visible on the scanning interface. Set to true to allow users to switch the device's flashlight on or off during MRZ scanning. + +9. **`isVibrateEnabled`** (default value `false`) - controls the scanner's ability to make the scanning device vibrate upon a successful MRZ scan. When enabled (true), the scanner will vibrate to provide haptic feedback if the device supports it. + +10. **`templateNodeRequire`** - provides a Node.js 'require' function to load the template file when running in a Node environment. This facilitates importing external template configuration files. + + +Next, we go over the different ways that these properties can be used to customize the scanner with a few examples. + +## Setting the MRZ Document Type + +The MRZ Scanner reads all three MRZ formats, but it can optionally restrict the MRZ format that it reads. For example, you may want to configure MRZ scanner to only read **TD1** and passport (**TD3**) document types, while **ignoring TD2** documents. Here is a simple edit to the launchMrzScanner function that we implemented in the [User Guide](index.md) that sets the specific MRZ formats to read using the `documentType` property: + +```ts +async function ScanMRZ() { + const config = { + license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', // 24-hour license key + documentType: EnumDocumentType.DT_PASSPORT, // configuring the scanner to only recognize passports + } as MRZScanConfig; + const mrzResult = await MRZScanner.launch(config); + if (mrzResult.resultStatus === EnumResultStatus.RS_FINISHED) { + let mrzData = mrzResult?.data!; + // do something with the MRZData object + } +} +``` + +## Customizing the UI Elements + +
    +

    mrz-scanner

    +

    MRZ Scanner UI

    +
    + +The MRZ Scanner UI comes with three main elements that you can configure: + +- *Close button*: Stop MRZ scanning and go back to the previous activity. +- *Torch button*: A clickable button that can turn on/off the torch. +- *Guide Frame*: A visual overlap to assist users in lining up the MRZ document in the camera frame. + +```ts +async function ScanMRZ() { + const config = { + license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', // 24-hour license key + isCloseButtonVisible: false, // hiding the close button + isTorchButtonVisible: false, // hiding the torch button + isGuideFrameVisible: false, // hiding the guide frame + } as MRZScanConfig; + const mrzResult = await MRZScanner.launch(config); + if (mrzResult.resultStatus === EnumResultStatus.RS_FINISHED) { + let mrzData = mrzResult?.data!; + // do something with the MRZData object + } +} +``` + +## Enabling Audio and Haptic Feedback + +The MRZ Scanner library also offers the option to enable audio and haptic feedback upon a successful MRZ scan. Through the `isBeepEnabled` and `isVibrateEnabled` properties, you can choose to play a sound or make the device vibrate once the MRZ is recognized. + +```ts +async function ScanMRZ() { + const config = { + license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', // 24-hour license key + isBeepEnabled: true, // play a beep upon a successful MRZ scan + isVibrateEnabled: true, // make the phone vibrate upon a successful MRZ scan + } as MRZScanConfig; + const mrzResult = await MRZScanner.launch(config); + if (mrzResult.resultStatus === EnumResultStatus.RS_FINISHED) { + let mrzData = mrzResult?.data!; + // do something with the MRZData object + } +} +``` diff --git a/programming/react-native/user-guide/index.md b/programming/react-native/user-guide/index.md new file mode 100644 index 0000000..2514ea1 --- /dev/null +++ b/programming/react-native/user-guide/index.md @@ -0,0 +1,251 @@ +--- +layout: default-layout +title: User Guide - Dynamsoft MRZ Scanner for React Native (Ready to Use UI edition) +description: This is the user guide of Dynamsoft MRZ Scanner for React Native SDK demonstrating the Ready to Use UI. +keywords: user guide, dart, React Native, ready to use, mrz +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: true +multiProgrammingLanguage: true +enableLanguageSelection: true +--- + +# MRZ Scanner User Guide + +This user guide will explore using the Dynamsoft MRZ Scanner (React Native Edition) to easily integrate the ability to read MRZ data from identity documents such as passports and ID cards. The Dynamsoft MRZ Scanner comes with a ready-to-use setup that simplifies the development process, allowing you to focus on other aspects of the application. + +`MRZScanner` is the ready-to-use component that allows developers to quickly set up an MRZ scanning app. With the built-in component, it streamlines the integration of MRZ scanning functionality into any application. + +## Supported Machine-Readable Travel Document Types + +The Machine Readable Travel Documents (MRTD) standard specified by the International Civil Aviation Organization (ICAO) defines how to encode information for optical character recognition on official travel documents. + +Currently, the SDK supports three types of MRTD: + +> [!NOTE] +> If you need support for other types of MRTDs, our SDK can be easily customized. Please contact our [support team](https://www.dynamsoft.com/contact/). + +### ID (TD1 Size) + +The MRZ (Machine Readable Zone) in TD1 format consists of 3 lines, each containing 30 characters. + +
    + Example of MRZ in TD1 format +
    + +### ID (TD2 Size) + +The MRZ (Machine Readable Zone) in TD2 format consists of 2 lines, with each line containing 36 characters. + +
    + Example of MRZ in TD2 format +
    + +### Passport (TD3 Size) + +The MRZ (Machine Readable Zone) in TD3 format consists of 2 lines, with each line containing 44 characters. + +
    + Example of MRZ in TD2 format +
    + +## System Requirements + +* React Native 0.71.0+ (0.79.0+ recommended) +* Node 18+ +* Android + * Supported OS: Android 5.0 (API Level 21) and higher + * Supported ABI: armeabi-v7a, arm64-v8a, x86 and x86_64 + * Development Environment: Android Studio 2022.2.1+ (2025.2.1 recommended); Java 17+; Gradle 8.0+ +* iOS + * Supported OS: iOS 13+ + * Supported ABI: arm64 and x86_64 + * Development Environment: Xcode 13+ (Xcode 14.1+ recommended) + +## Including the Library + +Run the following command in the root directory of your React Native project to add `dynamsoft-capture-vision-react-native` to the dependencies: + +```bash +npm install dynamsoft-capture-vision-react-native +``` + +Then run this command to install all dependencies: + +```bash +npm install +``` + +## Building the MRZ Scanner Widget + +Now that the package is added, it's time to start building the `MRZScanner` Widget using the SDK. + +### Import + +To use the MRZScanner API, we have to import the relevant classes from the `dynamsoft-capture-vision-react-native` package. Please import `dynamsoft-capture-vision-react-native` in your dart file: + +```ts +import { MRZScanner, MRZScanResult, MRZScanConfig } from 'dynamsoft-mrz-scanner-bundle-react-native'; +``` + +### Quick Start + +The code below shows the simplest function implementation to initialize and start the MRZ Scanner + +```tsx +import { MRZScanner, MRZScanResult, MRZScanConfig } from 'dynamsoft-mrz-scanner-bundle-react-native'; + +async function ScanMRZ() { + const config = { + license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', // 24-hour license key + } as MRZScanConfig; + const mrzResult = await MRZScanner.launch(config); + if (mrzResult.resultStatus === EnumResultStatus.RS_FINISHED) { + let mrzData = mrzResult?.data!; + // do something with the MRZData object + } +} +``` + +You can call the above function anywhere (e.g., when the app starts, on a button click, etc.) to achieve the effect: +open an MRZ scanning interface, and after scanning is complete, close the interface and return the result. + +This next code snippet is the **full Hello World implementation** that uses the above `ScanMRZ` function. This is done in *App.tsx* but can be used as a reference for your own implementation, whether it is in *App.tsx* or any other page. + +```tsx +import React, {useState} from 'react'; +import {Button, ScrollView, StyleSheet, Text, View} from 'react-native'; +import {MRZScanner, EnumResultStatus, MRZScanConfig} from 'dynamsoft-mrz-scanner-bundle-react-native'; + +function App(): React.JSX.Element { + const [displayText, setDisplayText] = useState(''); + const [isError, setIsError] = useState(false); + const ScanMRZ = async () => { + let mrzScanConfig = { + license: 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', + } as MRZScanConfig; + let mrzResult = await MRZScanner.launch(mrzScanConfig); + let displayString: string; + if (mrzResult.resultStatus === EnumResultStatus.RS_FINISHED) { + let mrzData = mrzResult?.data!; + displayString = Object.entries(mrzData) + .map(([fieldName, fieldValue]) => `${fieldName} : \t${fieldValue}`) + .join('\n\n'); + } else if (mrzResult.resultStatus === EnumResultStatus.RS_CANCELED) { + displayString = 'Scan cancelled.'; + } else { + displayString = `ErrorCode: ${mrzResult.errorCode}\n\nErrorMessage: ${mrzResult.errorString}`; + } + setDisplayText(displayString); + setIsError(mrzResult.resultStatus === EnumResultStatus.RS_EXCEPTION); + }; + + return ( + + + + {displayText} + + +