From 2617d3afa6e985314ef2d4aa3aa567164233b589 Mon Sep 17 00:00:00 2001 From: DMGithubPublisher Date: Thu, 22 May 2025 03:40:31 +0800 Subject: [PATCH 1/2] update to internal commit e6d4f617 --- _includes/sidelist-codegallery.html | 4 ++-- api/mrz-scanner.md | 6 ++++-- codegallery/helloworld/index.md | 2 +- codegallery/index.md | 14 +++++++++----- guides/mrz-scanner-customization.md | 2 +- guides/mrz-scanner.md | 4 ++-- 6 files changed, 19 insertions(+), 13 deletions(-) diff --git a/_includes/sidelist-codegallery.html b/_includes/sidelist-codegallery.html index ae8466c..37c1bdc 100644 --- a/_includes/sidelist-codegallery.html +++ b/_includes/sidelist-codegallery.html @@ -3,9 +3,9 @@
  • Hello World
    • \ No newline at end of file diff --git a/api/mrz-scanner.md b/api/mrz-scanner.md index 71ad58d..0132831 100644 --- a/api/mrz-scanner.md +++ b/api/mrz-scanner.md @@ -434,8 +434,10 @@ export interface MRZData { | `lastName` | `string` | The last name of the MRZ document holder. | | `age` | `string` | The age of the MRZ document holder. | | `sex` | `string` | The sex of the MRZ document holder. | -| `issuingState` | `string` | The issuing state of the MRZ document. | -| `nationality` | `string` | The nationality of the MRZ document holder. | +| `issuingState` | `string` | The issuing state (represented as the full name of the country/region) of the MRZ document. | +| `issuingStateRaw` | `string` | The raw text from the MRZ string of the issuing state of the MRZ document. | +| `nationality` | `string` | The nationality (represented as the full name of the country/region) of the MRZ document holder. | +| `nationalityRaw` | `string` | The raw text from the MRZ string representing the nationality of the document holder. | | `dateOfBirth` | `MRZDate` | The date of birth of the MRZ document holder. | | `dateOfExpiry` | `MRZDate` | The date of expiry of the MRZ document. | diff --git a/codegallery/helloworld/index.md b/codegallery/helloworld/index.md index f6be3df..c5845ed 100644 --- a/codegallery/helloworld/index.md +++ b/codegallery/helloworld/index.md @@ -23,7 +23,7 @@ Hello World represents the most basic implementation of the MRZ Scanner. One of Dynamsoft MRZ Scanner - Hello World - + diff --git a/codegallery/index.md b/codegallery/index.md index 68011cb..9b0896f 100644 --- a/codegallery/index.md +++ b/codegallery/index.md @@ -20,19 +20,25 @@ As mentioned previously, this is the most rudimentary and basic implementation o The full code of Hello World can be found [**here**](helloworld/index.md). -## React +## Frameworks + +The Dynamsoft team has worked to create samples with the main web development frameworks that we have used for all of our browser-based products. These frameworks are **React**, **Angular**, and **Vue**. The samples are hosted on Github and we recommend using them as reference if you are looking to build a web application using the MRZ Scanner and one of these frameworks. + +If you come across any web development frameworks that you want to use with the MRZ Scanner, please let the Dynamsoft team know to see if it is feasible to come up with a sample for that framework. + +### React In this sample, a Hello World implementation is done with the [React](https://react.dev/) framework. Please find the full code of this sample [**here**](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/frameworks/react-hooks). -## Angular +### Angular In this sample, a Hello World implementation is done with the [Angular](https://angular.dev/) framework. Please find the full code of this sample [**here**](https://github.com/Dynamsoft/mrz-scanner-javascript/tree/main/samples/frameworks/angular). -## Vue +### Vue In this sample, a Hello World implementation is done with the [Vue](https://vuejs.org/) framework. @@ -44,6 +50,4 @@ The demo implementation adds a bit more colour and character to the Hello World The full code of the Demo can be found [**here**](demo/index.md). -## Official Dynamsoft MRZ Scanner Online Demo - For the best demonstration of the full capabilities of the MRZ Scanner JavaScript Edition, please visit the [official Dynamsoft MRZ Scanner JavaScript demo](https://demo.dynamsoft.com/mrz-scanner/). \ No newline at end of file diff --git a/guides/mrz-scanner-customization.md b/guides/mrz-scanner-customization.md index 0b6ee19..5041f88 100644 --- a/guides/mrz-scanner-customization.md +++ b/guides/mrz-scanner-customization.md @@ -46,7 +46,7 @@ Next, we go over the different ways that these properties can be used to customi > [!TIP] > Prerequisite: [Introduction to MRZ Formats]({{ site.introduction }}index.html#supported-mrz-formats) -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 quick snippet based on the Hello World code (from the [User Guide]({{ site.guides }}mrz-scanner.html)) that sets the specific MRZ formats to read using the `mrzFormatType1` property: +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 quick snippet based on the Hello World code (from the [User Guide]({{ site.guides }}mrz-scanner.html)) that sets the specific MRZ formats to read using the `mrzFormatType` property: ```ts const mrzScanner = new Dynamsoft.MRZScanner({ diff --git a/guides/mrz-scanner.md b/guides/mrz-scanner.md index 1ff09b1..98211b2 100644 --- a/guides/mrz-scanner.md +++ b/guides/mrz-scanner.md @@ -61,9 +61,9 @@ The simplest way to include the SDK is to use either the [**jsDelivr**](https:// When using a framework such as **React**, **Vue** or **Angular**, we recommend adding the package as a dependency using a package manager such as **npm** or **yarn**: ```sh - npm i dynamsoft-mrz-scanner@2.0.0 -E + npm i dynamsoft-mrz-scanner@2.1.0 -E # or - yarn add dynamsoft-mrz-scanner@2.0.0 -E + yarn add dynamsoft-mrz-scanner@2.1.0 -E ``` > [!WARNING] From 5278dd55f102f94ff0ae7b61864fc36fcdd7bf08 Mon Sep 17 00:00:00 2001 From: DMGithubPublisher Date: Sat, 24 May 2025 06:13:11 +0800 Subject: [PATCH 2/2] update to internal commit 20965a62 --- codegallery/helloworld/index.md | 2 +- guides/mrz-scanner-customization.md | 15 ++++++++-- guides/mrz-scanner-static-image.md | 2 +- guides/mrz-scanner.md | 44 ++++++++++++++++++----------- 4 files changed, 42 insertions(+), 21 deletions(-) diff --git a/codegallery/helloworld/index.md b/codegallery/helloworld/index.md index c5845ed..4d662d3 100644 --- a/codegallery/helloworld/index.md +++ b/codegallery/helloworld/index.md @@ -36,7 +36,7 @@ Hello World represents the most basic implementation of the MRZ Scanner. One of }); (async () => { // Launch the scanner and wait for the result - const result = await mrzScanner.launch({}); + const result = await mrzScanner.launch(); })(); diff --git a/guides/mrz-scanner-customization.md b/guides/mrz-scanner-customization.md index 5041f88..5359a61 100644 --- a/guides/mrz-scanner-customization.md +++ b/guides/mrz-scanner-customization.md @@ -15,6 +15,17 @@ permalink: /guides/mrz-scanner-customization.html > >Before going into the ways that you can customize the MRZ Scanner, please read the [MRZ Scanner JavaScript Edition User Guide]({{ site.guides }}mrz-scanner.html). +## Quick Links + +- [Setting Available MRTD formats](#setting-available-mrtd-formats) +- [Hiding the Result View](#hiding-the-result-view) +- [Changing the Scan Guide Frame](#changing-the-scan-guide-frame) +- [Reading Static Images and PDFs using the MRZ Scanner](#reading-static-images-and-pdfs-using-the-mrz-scanner) +- [Configuring the `onDone` Callback](#configuring-the-ondone-callback) +- [Enable Result Editing](#enable-result-editing) + +## Introduction + This guide expands on the User Guide that explored the MRZ Scanner Hello World sample project. Here we explore ways to customize the UI as well as the performance of the MRZ Scanner. We will walk through the three main configuration interfaces - [**`MRZScannerConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerconfig), [**`MRZScannerViewConfig`**]({{ site.api }}mrz-scanner.html#mrzscannerviewconfig), and [**`MRZResultViewConfig`**]({{ site.api }}mrz-scanner.html#mrzresultviewconfig). These configuration interfaces make customizing the MRZ Scanner as easy as adding or changing a few properties in the instance constructor. Every sample is a variation on the previous Hello World sample with a few additional properties defined in the configuration interfaces, and so we only show the differing portion rather than all the code. ## `MRZScannerConfig` Overview @@ -146,9 +157,9 @@ The `MRZScannerView` provides a guide frame for each of the three MRTD formats. Please contact the [Dynamsoft Support Team](https://www.dynamsoft.com/company/contact/) for any further inquiries, or to customize the frame guide selection logic. -### Reading Static Images using the MRZ Scanner +### Reading Static Images and PDFs using the MRZ Scanner -Starting from v2.1 of the MRZ Scanner, the library is now able to read MRZs **directly** from static images and PDFs. To support this, the MRZScannerViewConfig will need to be configured to support that, especially for PDFs. +Starting from **v2.1** of the MRZ Scanner, the library is now able to read MRZs **directly** from static images and PDFs. To support this, the MRZScannerViewConfig will need to be configured to support that, especially for PDFs. To learn more on how to create a web application that supports static image/PDF reading using the MRZ Scanner, please refer to this [guide]({{ site.guides }}mrz-scanner-static-image.html). Furthermore, please refer to the full File Input Sample that the previously linked guide walks you through. diff --git a/guides/mrz-scanner-static-image.md b/guides/mrz-scanner-static-image.md index 77d2950..9e0e84e 100644 --- a/guides/mrz-scanner-static-image.md +++ b/guides/mrz-scanner-static-image.md @@ -35,7 +35,7 @@ The first step in making the sample is to define the script references and the H Dynamsoft MRZ Scanner - Use File Input - + diff --git a/guides/mrz-scanner.md b/guides/mrz-scanner.md index 98211b2..bb479e3 100644 --- a/guides/mrz-scanner.md +++ b/guides/mrz-scanner.md @@ -91,7 +91,7 @@ Below is the complete Hello World sample page that uses the precompiled script s }); (async () => { // Launch the scanner and wait for the result - const result = await mrzScanner.launch({}); + const result = await mrzScanner.launch(); })(); @@ -100,8 +100,8 @@ Below is the complete Hello World sample page that uses the precompiled script s > [!NOTE] > -> This code is identical to the Hello World file mentioned in *Build from Source*, except for the script source. -> +> This code is a more simplified version of the Hello World file that is hosted on [Github](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/samples/hello-world.html). +> The file hosted on Github contains more code for a better final UI, but that extra code is not necessary to successfully launching the MRZ Scanner. All you need is the code shown above. > Please do not forget to replace `YOUR_LICENSE_KEY_HERE` with your own license key, whether it is trial or full. To run the sample, create a new file called `hello-world.html`, then copy and paste the code above into the file. Next, serve the page directly by deploying it to a server. @@ -176,30 +176,40 @@ The first step in setting up the HTML in the Hello World project is to include t MRZ Scanner comes with a **Ready-to-Use UI**. When the MRZ Scanner launches, it creates a container which it populates with the **Ready-to-Use UI**. - - ### Step 2: Initializing the MRZ Scanner -```js -// Initialize the Dynamsoft MRZ Scanner -const mrzscanner = new Dynamsoft.MRZScanner({ - license: "YOUR_LICENSE_KEY_HERE", -}); +```html + +

    Dynamsoft MRZ Scanner

    + + + ``` Above is the **simplest** way to initialize the [**`MRZScanner`**]({{ site.api }}mrz-scanner.html#mrzscanner). Note the configuration object used to set the behaviour of the MRZ Scanner instance. The single property that is **required** to be defined in this configuration object is the **license key**. Without a valid license, the MRZ Scanner view fails to launch, and the user will be met with a license key error message. Please refer to the [licensing](#license) section of the guide for instructions on acquiring a license key. ### Step 3: Launching the MRZ Scanner -```js -(async () => { - // Launch the scanner and wait for the result - const result = await mrzscanner.launch({}); - console.log(result); -})(); +```html + ``` -Now that the [**`MRZScanner`**]({{ site.api }}mrz-scanner.html#mrzscanner) has been initialized and configured, it is ready to be launched! Upon launch, the MRZ Scanner presents the main **`MRZScannerView`** UI in its container on the page, and is ready to start scanning. Upon scanning an MRZ (via video or static image), the MRZ Scanner then switches to the **`MRZResultView`** , which displays a cropped image of the MRZ document as well as the parsed fields of the MRZ text. Let's break down these two Views: +Now that the [**`MRZScanner`**]({{ site.api }}mrz-scanner.html#mrzscanner) has been initialized and configured, it is ready to be launched! Upon launch, the MRZ Scanner presents the main **`MRZScannerView`** UI in its container on the page, and is ready to start scanning. Upon scanning an MRZ (via video or static image), the MRZ Scanner then switches to the **`MRZResultView`**, which displays a cropped image of the MRZ document as well as the parsed fields of the MRZ text. Let's break down these two Views: #### `MRZScannerView`