From e72baea48e0a7fdb532ed0b1b172c0cb1e4cb928 Mon Sep 17 00:00:00 2001 From: DMGithubPublisher Date: Fri, 11 Oct 2024 16:32:23 +0800 Subject: [PATCH 1/3] update to internal commit 387ca76a --- _data/product_version.yml | 3 +- assets/js/dcvWebVersionSearch.json | 6 + .../multiple-image-processing-v2.0.10.md | 2 +- .../multiple-image-processing.md | 2 +- .../single-image-processing-v2.0.10.md | 2 +- .../single-image-processing.md | 2 +- .../core/core-module-class-v3.2.30.md | 241 ++++++++++++++ .../api-reference/core/core-module-class.md | 6 + .../api-reference/license/license-manager.md | 4 +- programming/javascript/release-notes/dcvb.md | 6 + programming/javascript/release-notes/index.md | 1 + .../user-guide/mrz-scanner-v2.4.2000.md | 302 ++++++++++++++++++ .../javascript/user-guide/mrz-scanner.md | 8 +- 13 files changed, 574 insertions(+), 11 deletions(-) create mode 100644 programming/javascript/api-reference/core/core-module-class-v3.2.30.md create mode 100644 programming/javascript/user-guide/mrz-scanner-v2.4.2000.md diff --git a/_data/product_version.yml b/_data/product_version.yml index 0665732..8c947d6 100644 --- a/_data/product_version.yml +++ b/_data/product_version.yml @@ -1,7 +1,8 @@ useGroupedVersion: true version_info_list: - - value: latest version(2.4.2000) + - value: latest version(2.4.2001) - value: 2.x child: + - 2.4.2000 - 2.2.3000 \ No newline at end of file diff --git a/assets/js/dcvWebVersionSearch.json b/assets/js/dcvWebVersionSearch.json index 03c60f8..57c4785 100644 --- a/assets/js/dcvWebVersionSearch.json +++ b/assets/js/dcvWebVersionSearch.json @@ -1,4 +1,10 @@ [ + { + "version": "2.4.2001", + "matchVersion": { + "javascript": "10.4.2001" + } + }, { "version": "2.4.2000", "matchVersion": { diff --git a/programming/javascript/api-reference/capture-vision-router/multiple-image-processing-v2.0.10.md b/programming/javascript/api-reference/capture-vision-router/multiple-image-processing-v2.0.10.md index ca2b980..fd9ac12 100644 --- a/programming/javascript/api-reference/capture-vision-router/multiple-image-processing-v2.0.10.md +++ b/programming/javascript/api-reference/capture-vision-router/multiple-image-processing-v2.0.10.md @@ -327,7 +327,7 @@ startCapturing(templateName?: string): Promise; **Parameters** -`templateName`: specifies a "CaptureVisionTemplate" to use. If not specified, "Default" is used. There are two types of CaptureVisionTemplates: the [preset ones](./preset-templates.md) which come with the SDK and the custom ones that get initialized when the user calls [initSettings](./settings.md#initsettings). Please be aware that the [preset CaptureVisionTemplates](./preset-templates.md) will be overwritten should the user calls [initSettings](./settings.md#initsettings) and pass his own settings. +`templateName`: specifies a "CaptureVisionTemplate" to use. If not specified, "Default" is used. There are two types of CaptureVisionTemplates: the [preset ones](./preset-templates.md) which come with the SDK and the custom ones that get initialized when the user calls [initSettings](./settings.md#initsettings). Please be aware that the [preset CaptureVisionTemplates](./preset-templates.md) will be overwritten if the user calls [initSettings](./settings.md#initsettings) and passes customized settings. **Return Value** diff --git a/programming/javascript/api-reference/capture-vision-router/multiple-image-processing.md b/programming/javascript/api-reference/capture-vision-router/multiple-image-processing.md index 710abe9..84575b2 100644 --- a/programming/javascript/api-reference/capture-vision-router/multiple-image-processing.md +++ b/programming/javascript/api-reference/capture-vision-router/multiple-image-processing.md @@ -342,7 +342,7 @@ startCapturing(templateName?: string): Promise; There are two types of CaptureVisionTemplates: the [preset ones](./preset-templates.md) which come with the SDK and the custom ones that get initialized when the user calls [initSettings](./settings.md#initsettings). -Please be aware that the [preset CaptureVisionTemplates](./preset-templates.md) will be overwritten should the user calls [initSettings](./settings.md#initsettings) and pass his own settings. +Please be aware that the [preset CaptureVisionTemplates](./preset-templates.md) will be overwritten if the user calls [initSettings](./settings.md#initsettings) and passes customized settings. **Return Value** diff --git a/programming/javascript/api-reference/capture-vision-router/single-image-processing-v2.0.10.md b/programming/javascript/api-reference/capture-vision-router/single-image-processing-v2.0.10.md index 017bf58..5b158e6 100644 --- a/programming/javascript/api-reference/capture-vision-router/single-image-processing-v2.0.10.md +++ b/programming/javascript/api-reference/capture-vision-router/single-image-processing-v2.0.10.md @@ -29,7 +29,7 @@ capture(imageOrFile: Core.DSImageData | string | Blob | HTMLImageElement | HTMLC `imageOrFile`: specifies the image or file to be processed. It can be the image itself in the form of `DSImageData`, the path of the image/file or the file itself in the form of `blob`, `HTMLImageElement` or `HTMLCanvasElement`. -`templateName`: specifies a "CaptureVisionTemplate" to use. If not specified, "Default" is used. There are two types of CaptureVisionTemplates: the [preset ones](./preset-templates.md) which come with the SDK and the custom ones that get initialized when the user calls [initSettings](./settings.md#initsettings). Please be aware that the [preset CaptureVisionTemplates](./preset-templates.md) will be overwritten should the user calls [initSettings](./settings.md#initsettings) and pass his own settings. +`templateName`: specifies a "CaptureVisionTemplate" to use. If not specified, "Default" is used. There are two types of CaptureVisionTemplates: the [preset ones](./preset-templates.md) which come with the SDK and the custom ones that get initialized when the user calls [initSettings](./settings.md#initsettings). Please be aware that the [preset CaptureVisionTemplates](./preset-templates.md) will be overwritten if the user calls [initSettings](./settings.md#initsettings) and passes customized settings. **Return value** diff --git a/programming/javascript/api-reference/capture-vision-router/single-image-processing.md b/programming/javascript/api-reference/capture-vision-router/single-image-processing.md index e170de1..7499011 100644 --- a/programming/javascript/api-reference/capture-vision-router/single-image-processing.md +++ b/programming/javascript/api-reference/capture-vision-router/single-image-processing.md @@ -33,7 +33,7 @@ capture(imageOrFile: Blob | HTMLImageElement | HTMLCanvasElement | HTMLVideoElem There are two types of CaptureVisionTemplates: the [preset ones](./preset-templates.md) which come with the SDK and the custom ones that get initialized when the user calls [initSettings](./settings.md#initsettings). -Please be aware that the [preset CaptureVisionTemplates](./preset-templates.md) will be overwritten should the user calls [initSettings](./settings.md#initsettings) and pass his own settings. +Please be aware that the [preset CaptureVisionTemplates](./preset-templates.md) will be overwritten if the user calls [initSettings](./settings.md#initsettings) and passes customized settings. **Return value** diff --git a/programming/javascript/api-reference/core/core-module-class-v3.2.30.md b/programming/javascript/api-reference/core/core-module-class-v3.2.30.md new file mode 100644 index 0000000..c82a065 --- /dev/null +++ b/programming/javascript/api-reference/core/core-module-class-v3.2.30.md @@ -0,0 +1,241 @@ +--- +layout: default-layout +title: API Reference Index - CoreModule Class in JavaScript +description: This page introduces the API for the CoreModule Class. +keywords: Core, CoreModule, api reference, javascript, js +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: true +--- + + +# CoreModule Class + +The CoreModule class defines common functionality in the Core module. + +| Name | Description | +| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +| `static` [detectEnvironment()](#detectenvironment) | Detects and returns information about the current runtime environment. | +| `static` [engineResourcePaths](#engineresourcepaths) | Configures the paths where the .wasm files and other necessary resources for modules are located. | +| `static` [getVersion()](#getversion) | Returns the version of the Core module. | +| `static` [isModuleLoaded()](#ismoduleloaded) | Returns whether the WebAssembly (.wasm) file for the specified module is successfully loaded. | +| `static` [loadWasm()](#loadwasm) | Initiates the loading process for the .wasm file(s) corresponding to the specified module(s). | + + + +## detectEnvironment + +Detects and returns information about the current runtime environment. + +```typescript +detectEnvironment(): Promise +``` + +**Return Value** + +A promise that resolves with the detected environment information (e.g., browser type and version, operating system, camera support, etc.). + +**Code snippet** + +```javascript +await Dynamsoft.Core.CoreModule.detectEnvironment(); +// Example return value: +// {"wasm":true,"worker":true,"getUserMedia":true,"camera":true,"browser":"Edge","version":119,"OS":"Windows"} +``` + +## engineResourcePaths + +Configures the paths where the .wasm files and other necessary resources for modules are located. It allows you to either return or set the paths that the system uses to find these resources. + +For resources loaded from popular CDNs like jsDelivr or UNPKG, the paths are automatically identified based on the JavaScript files referenced for these modules. Manual specification of these paths is necessary only in the following scenarios: + +1. When integrating the SDK within web frameworks such as Angular, React, or Vue. +2. If you opt for a CDN different from the default choices. +3. When you are serving the files on your own. + + +```typescript +static engineResourcePaths: { + /** + * Specifies the resource path for the dynamsoft-capture-vision-std module. + */ + "std"?: string; + /** + * Specifies the resource path for the dynamsoft-image-processing module. + */ + "dip"?: string; + /** + * Specifies the resource path for the dynamsoft-core module. + */ + "core"?: string; + /** + * Specifies the resource path for the dynamsoft-license module. + */ + "license"?: string; + /** + * Specifies the resource path for the dynamsoft-capture-vision-router module. + */ + "cvr"?: string; + /** + * Specifies the resource path for the dynamsoft-utility module. + */ + "utility"?: string; + /** + * Specifies the resource path for the dynamsoft-barcode-reader module. + */ + "dbr"?: string; + /** + * Specifies the resource path for the dynamsoft-label-recognizer module. + */ + "dlr"?: string; + /** + * Specifies the resource path for the dynamsoft-document-normalizer module. + */ + "ddn"?: string; + /** + * Specifies the resource path for the dynamsoft-code-parser module. + */ + "dcp"?: string; + /** + * Specifies the resource path for the dynamsoft-camera-enhancer module. + */ + "dce"?: string; +}; +``` + +**Code snippet** + +```javascript +// To specify the paths for multiple modules: +Dynamsoft.Core.CoreModule.engineResourcePaths = { + "std": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-capture-vision-std@1.0.0/dist/", + "dip": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-image-processing@2.0.20/dist/", + "core": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-core@3.0.20/dist/", + "license": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-license@3.0.20/dist/", + "cvr": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-capture-vision-router@2.0.20/dist/", + "utility": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-utility@1.0.20/dist/", + "dbr": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-barcode-reader@10.0.20/dist/" + "dlr": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-label-recognizer@3.0.20/dist/", + "ddn": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-document-normalizer@2.0.20/dist/" + "dcp": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-code-parser@2.0.20/dist/" +}; +// To specify the path for only one module: +Dynamsoft.Core.CoreModule.engineResourcePaths.dbr = "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-barcode-reader@10.0.20/dist/"; +``` + +## getVersion + +Returns the version of the Core module. + +```typescript +static getVersion(): string; +``` + +**Return Value** + +A string type representing the version. + +**Code snippet** + +```javascript +const version = Dynamsoft.Core.CoreModule.getVersion(); +console.log(version); +``` + +## isModuleLoaded + +Returns whether the WebAssembly (.wasm) file for the specified module is successfully loaded. + +```typescript +static isModuleLoaded(moduleName: string): boolean; +``` + +**Parameters** + +`moduleName`: specifies a module. + +**Return Value** + +Boolean indicating whether the .wasm file for the specified module is loaded. + +**Code snippet** + +```javascript +if(Dynamsoft.Core.CoreModule.isModuleLoaded("cvr")){ + console.log("cvr module is loaded!"). +} +``` + +## loadWasm + +Initiates the loading process for the .wasm file(s) corresponding to the specified module(s). If a module relies on other modules, the other modules will be loaded as well. + +```typescript +static loadWasm(moduleNames: Array | string): Promise; +``` + +**Parameters** + +`moduleNames`: specifies one or multiple modules. Supported module names are "cvr", "core", "license", "std", "dip", "dbr", "dlr", "ddn". + +**Return Value** + +A promise that resolves when the resources have been successfully released. It does not provide any value upon resolution. + +**Code snippet** + +```javascript +await Dynamsoft.Core.CoreModule.loadWasm("cvr"); +``` + + diff --git a/programming/javascript/api-reference/core/core-module-class.md b/programming/javascript/api-reference/core/core-module-class.md index c82a065..08ed70e 100644 --- a/programming/javascript/api-reference/core/core-module-class.md +++ b/programming/javascript/api-reference/core/core-module-class.md @@ -73,6 +73,10 @@ For resources loaded from popular CDNs like jsDelivr or UNPKG, the paths are aut --> ```typescript static engineResourcePaths: { + /** + * Specifies the root directory in which all the modules are located + */ + "rootDirectory"?: string; /** * Specifies the resource path for the dynamsoft-capture-vision-std module. */ @@ -123,6 +127,8 @@ static engineResourcePaths: { **Code snippet** ```javascript +// To specify the path for rootDirectory +Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/"; // To specify the paths for multiple modules: Dynamsoft.Core.CoreModule.engineResourcePaths = { "std": "https://[SPECIFY-THE-ROOT-DIRECTORY]/dynamsoft-capture-vision-std@1.0.0/dist/", diff --git a/programming/javascript/api-reference/license/license-manager.md b/programming/javascript/api-reference/license/license-manager.md index 25c5944..db66c0f 100644 --- a/programming/javascript/api-reference/license/license-manager.md +++ b/programming/javascript/api-reference/license/license-manager.md @@ -35,14 +35,14 @@ A promise which, upon resolution, yields a string corresponding to the device's Initializes the license for the application using a license key. This function is overloaded, providing two different usages based on the provided parameters. ```typescript -static initLicense(license: string, options?: {executeNow: boolean}): void | Promise; +static initLicense(license: string, options?: {executeNow: boolean} | boolean): void | Promise; ``` **Parameters** `license`: The license key to be used for initialization. -`options`: This is an object with a single property executeNow, which is a boolean indicates the function should immediately execute the license initialization or not. +`options`: It can be one of two types, a boolean or an object with a single property, executeNow, which is a boolean. If options is `true` or `{ executeNow: true }`, the license initialization action will be executed immediately. **Return Value** diff --git a/programming/javascript/release-notes/dcvb.md b/programming/javascript/release-notes/dcvb.md index 0f3e67d..099b19e 100644 --- a/programming/javascript/release-notes/dcvb.md +++ b/programming/javascript/release-notes/dcvb.md @@ -9,6 +9,12 @@ noTitleIndex: true # Release Notes - DynamsoftCaptureVisionBundle +## 2.4.2001 (10/11/2024) + +### Fixed + +- Fixed the issue where the rootPath definition in `engineResourcePaths` failed to function correctly in certain scenarios. + ## 2.4.2000 (10/10/2024) ### Highlights diff --git a/programming/javascript/release-notes/index.md b/programming/javascript/release-notes/index.md index 5026f94..f661967 100644 --- a/programming/javascript/release-notes/index.md +++ b/programming/javascript/release-notes/index.md @@ -9,5 +9,6 @@ noTitleIndex: true # Release Notes - Dynamsoft Capture Vision Bundle JavaScript +- [2.4.2001 (10/11/2024)](dcvb.md#242001-10112024) - [2.4.2000 (10/10/2024)](dcvb.md#242000-10102024) - [2.2.3000 (07/21/2024)](dcvb.md#223000-07212024) \ No newline at end of file diff --git a/programming/javascript/user-guide/mrz-scanner-v2.4.2000.md b/programming/javascript/user-guide/mrz-scanner-v2.4.2000.md new file mode 100644 index 0000000..aae58d3 --- /dev/null +++ b/programming/javascript/user-guide/mrz-scanner-v2.4.2000.md @@ -0,0 +1,302 @@ +--- +layout: default-layout +title: Scan & Parse MRZ - Dynamsoft Capture Vision JavaScript Edition +description: This page introduce how to use Dynamsoft Capture Vision JS edition to recognize the Machine-Readable Zone (MRZ) on a passport or ID card and converts the encoded strings into human-readable fields. +keywords: JavaScript, scan mrz, read mrz, scan passport, read passport, scan id mrz, read id mrz +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: true +--- + +# MRZ Scanner Solution for Your Website - User Guide + +This guide walks you through the process of creating a simple MRZ scanner solution. + +Table of Contents + +- [MRZ Scanner Solution for Your Website - User Guide](#mrz-scanner-solution-for-your-website---user-guide) + - [About the solution](#about-the-solution) + - [Web demo](#web-demo) + - [Run this Solution](#run-this-solution) + - [Project structure](#project-structure) + - [Building your own page](#building-your-own-page) + - [Include the SDK](#include-the-sdk) + - [Set up the solution](#set-up-the-solution) + - [Specify the license](#specify-the-license) + - [Load resources in advance](#load-resources-in-advance) + - [Create an CaptureVisionRouter instance and initialize the settings](#create-an-capturevisionrouter-instance-and-initialize-the-settings) + - [Use the camera as the image source](#use-the-camera-as-the-image-source) + - [Complete the Solution](#complete-the-solution) + - [Start recognition and coordinate image-processing tasks](#start-recognition-and-coordinate-image-processing-tasks) + - [Handle the captured result](#handle-the-captured-result) + - [Host the SDK yourself](#host-the-sdk-yourself) + - [System Requirements](#system-requirements) + - [Next Steps](#next-steps) + +## About the solution + +With the MRZ Scanner, you can use your camera to scan the MRZ code from a passport or ID. The scanner extracts data such as first name, last name, document number, nationality, date of birth, expiration date, and personal number from the MRZ string, converting it into human-readable fields. + +### Web demo + +The web demo is available at [https://demo.dynamsoft.com/solutions/mrz-scanner/index.html]( https://demo.dynamsoft.com/solutions/mrz-scanner/index.html). Rest assured, no personal data will be uploaded. + +### Run this Solution + +**1. Clone the repository to a working directory or download the code as a ZIP file** + +```sh +git clone https://github.com/Dynamsoft/mrz-scanner-javascript +``` + +**2. Deploy the files to a directory hosted on an HTTPS server** + +**3. Open the "index.html" file in your browser** + +> Basic Requirements +> +> * Internet connection +> * [A supported browser](#system-requirements) +> * An accessible Camera + +----- + +### Project structure + +```text +MRZ Scanner +├── assets +│ ├── ... +│ ├── ... +│ └── ... +├── css +│ └── index.css +├── font +│ ├── ... +│ ├── ... +│ └── ... +├── js +│ ├── const.js +│ ├── index.js +│ ├── init.js +│ └── util.js +├── index.html +└── template.json +``` + + * `/assets` : This directory contains all the static files such as images, icons, etc. that are used in the project. + * `/css` : This directory contains the CSS file(s) used for styling the project. + * `/font` : This directory contains the font files used in the project. + * `/js` : This directory contains all the JavaScript files used in the project. + * `const.js` : This file contains definitions of certain constants or variables used across the project. + * `index.js`: This is the main JavaScript file where the core logic of the project is implemented. + * `init.js` : This file is used for initialization purposes, such as initializing license, load resources, etc. + * `util.js` : This file contains utility functions that are used across the project. + * `index.html` : This is the main HTML file that represents the homepage of the project. + * `template.json` : This file contains predefined templates used in the project. + +> Note: A more detailed discussion about these files will be presented in the next section. + +## Building your own page + +In this section, we’ll walk through the key steps needed to build a web page that reads the machine-readable zone (MRZ) on a passport or ID. + +### Include the SDK + +The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. This project uses `jsDelivr` in [`index.html`](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/index.html). + +* jsDelivr + + ```html + + ``` + +* UNPKG + + ```html + + ``` + +> Besides using the public CDN, you can also download the SDK from the npm and host its files on your own server or a commercial CDN before including it in your application. Please see [Host the SDK yourself](#host-the-sdk-yourself) + +### Set up the solution + +Before using the SDK, you need to configure a few things in [`init.js`](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/js/init.js). + +#### Specify the license + +To enable the SDK's functionality, you must provide a valid license. Use the function `initLicense` to set your license key. + +```javascript +Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); +``` + +The key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this solution (found in the js/init.js file) is a test license valid for 24 hours for any newly authorized browser. If you wish to test the SDK further, you can request a 30-day free trial license through the Request a Trial License link. + +#### Load resources in advance + +To optimize image processing in a web environment, the algorithms are compiled into WebAssembly modules (files with a .wasm extension). These modules can be quite large, but the SDK can preload them asynchronously to enhance the user experience. For better performance, we recommend using [`loadWasm()`](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/core-module-class.html#loadwasm) to preload the necessary libraries. Since this solution uses DCE, DLR, and DCP, only the relevant resources need to be preloaded (no need to preload .wasm resources for DCE). + + +```javascript +Dynamsoft.Core.CoreModule.loadWasm(["DLR", "DCP"]); +``` + +In addition to the .wasm files, performance can be further enhanced by preloading the parsing standards and inference models (referred to as .data files) using the methods [`loadSpec()`](https://www.dynamsoft.com/code-parser/docs/web/programming/javascript/api-reference/code-parser-module-class.html#loadspec) and [`loadRecognitionData()`](https://www.dynamsoft.com/label-recognition/docs/web/programming/javascript/api-reference/label-recognizer-module-class.html#loadrecognitiondata), respectively. + +In our solution, we preload the parsing standards for `MRTD_TD3_PASSPORT`, `MRTD_TD1_ID`, and `MRTD_TD2_ID`, along with the .data file for `MRZ` recognition. + +```javascript +Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_PASSPORT"); +Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD1_ID"); +Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD2_ID"); +Dynamsoft.DLR.LabelRecognizerModule.loadRecognitionData("MRZ"); +``` + +> All these files are cached locally after being downloaded, so they load much faster on subsequent uses. + +#### Create an CaptureVisionRouter instance and initialize the settings + +The `Dynamsoft.CVR.CaptureVisionRouter.createInstance()` method creates a `CaptureVisionRouter` object, `cvRouter`, which controls the entire process. First, a [template file](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/template.json) is loaded, where specific image processing workflows, such as "ReadPassport", "ReadId", and "ReadPassportAndId", are defined. + +> If you'd like to understand the template file, refer to the [Overview of DCV parameters](https://www.dynamsoft.com/capture-vision/docs/core/parameters/file/index.html). + +```javascript +cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); +await cvRouter.initSettings("./template.json"); +``` + +#### Use the camera as the image source + +`cvRouter` connects to the image source using the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js){:target="_blank"} interface via the `setInput()` method. + +> In our case, the image source is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object, created using `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`. + +```javascript +cameraView = await Dynamsoft.DCE.CameraView.createInstance(cameraViewContainer); +cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); +cvRouter.setInput(cameraEnhancer); +``` + +### Complete the Solution + +#### Start recognition and coordinate image-processing tasks + +We use `cameraEnhancer.open()` to start video streaming, and `cvRouter` begins the process by specifying a template name ("ReadPassport", "ReadId", or "ReadPassportAndId") in the `startCapturing()` method. + +```javascript +await cameraEnhancer.open(); +await cvRouter.startCapturing("ReadPassport"); +``` + +#### Handle the captured result + +The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js){:target="_blank"} interface. The `CapturedResultReceiver` object is registered to `cvRouter` using the `addResultReceiver()` method. + +```javascript +const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); +resultReceiver.onCapturedResultReceived = (result) => { + const recognizedResults = result.textLineResultItems; + const parsedResults = result.parsedResultItems; + // Process the results according to your needs. +} +await cvRouter.addResultReceiver(resultReceiver); +``` + +## Host the SDK yourself + +You can download the SDK from npm and host it yourself. + +> Note that you need to get two other assisting packages. + +```cmd +npm i dynamsoft-capture-vision-bundle@2.4.2000 -E +npm i dynamsoft-capture-vision-std@1.4.10 -E +npm i dynamsoft-image-processing@2.4.20 -E +``` + +The resources are located at the path node_modules/, without @, so the script in your page would be like: + + + +Since @ is missing, you need to specify the location of the "engine" files: + +```javascript +//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files +Object.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, { + "std":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.4.10/dist/", + "core":"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.4.20/dist/", + "dip":"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.4.20/dist/", + "license":"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.4.20/dist/", + "cvr":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.4.20/dist/", + "dce":"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.1.0/dist/", + "dbr":"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.4.20/dist/", + "dlr":"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@3.4.20/dist/", + "dcp":"https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.4.22/dist/", + "ddn":"https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@2.4.20/dist/", + "dlrData":"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer-data@1.0.11/dist/", + "dnn":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-dnn@1.0.20/dist/", +}); +``` + +*Note*: + +* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options: + 1. Upgrade your web application server to one that supports the `application/wasm` mimetype. + 2. Manually define the mimetype on your server. You can refer to the following resources for guidance: + 1. [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings){:target="_blank"} + 2. [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap){:target="_blank"} + 3. [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types){:target="_blank"} + +* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application. + + ```cmd + Cache-Control: max-age=31536000 + ``` + + Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control){:target="_blank"}. + +## System Requirements + +This project requires the following features to work: + +- Secure context (HTTPS deployment) + + When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons + + - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction. + > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test. + + - Dynamsoft License requires a secure context to work. + +- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers` + + The above four features are required for the SDK to work. + +- `MediaDevices`/`getUserMedia` + + This API is required for in-browser video streaming. + +- `getSettings` + + This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties. + +The following table is a list of supported browsers based on the above requirements: + + | Browser Name | Version | + | :----------: | :--------------: | + | Chrome | v78+1 | + | Firefox | v68+1 | + | Edge | v79+ | + | Safari | v14+ | + + 1 devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews. + +Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above. + +## Next Steps + +Now that you have got the SDK integrated, you can choose to move forward in the following directions + +1. Check out the [source code for this solution on github](https://github.com/Dynamsoft/mrz-scanner-javascript). +2. Check out the [Dynamsoft developer blog](https://www.dynamsoft.com/codepool/tag/mrz/). diff --git a/programming/javascript/user-guide/mrz-scanner.md b/programming/javascript/user-guide/mrz-scanner.md index aae58d3..5aae4b5 100644 --- a/programming/javascript/user-guide/mrz-scanner.md +++ b/programming/javascript/user-guide/mrz-scanner.md @@ -108,13 +108,13 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde * jsDelivr ```html - + ``` * UNPKG ```html - + ``` > Besides using the public CDN, you can also download the SDK from the npm and host its files on your own server or a commercial CDN before including it in your application. Please see [Host the SDK yourself](#host-the-sdk-yourself) @@ -210,7 +210,7 @@ You can download the SDK from npm and host it yourself. > Note that you need to get two other assisting packages. ```cmd -npm i dynamsoft-capture-vision-bundle@2.4.2000 -E +npm i dynamsoft-capture-vision-bundle@2.4.2001 -E npm i dynamsoft-capture-vision-std@1.4.10 -E npm i dynamsoft-image-processing@2.4.20 -E ``` @@ -227,7 +227,7 @@ Object.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, { "std":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.4.10/dist/", "core":"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.4.20/dist/", "dip":"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.4.20/dist/", - "license":"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.4.20/dist/", + "license":"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.4.21/dist/", "cvr":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.4.20/dist/", "dce":"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.1.0/dist/", "dbr":"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.4.20/dist/", From 2afd912a7027b5d4829cadf0c660fd8363b8ddf4 Mon Sep 17 00:00:00 2001 From: DMGithubPublisher Date: Fri, 11 Oct 2024 16:50:07 +0800 Subject: [PATCH 2/3] update to internal commit 7e601acf --- .../capture-vision-router/multiple-image-processing.md | 2 +- .../capture-vision-router/single-image-processing.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/programming/javascript/api-reference/capture-vision-router/multiple-image-processing.md b/programming/javascript/api-reference/capture-vision-router/multiple-image-processing.md index 84575b2..766dbd5 100644 --- a/programming/javascript/api-reference/capture-vision-router/multiple-image-processing.md +++ b/programming/javascript/api-reference/capture-vision-router/multiple-image-processing.md @@ -338,7 +338,7 @@ startCapturing(templateName?: string): Promise; **Parameters** -`templateName`: specifies a "CaptureVisionTemplate" to use. If not specified, "Default" is used. +`templateName`: specifies a "CaptureVisionTemplate" to use. If not specified, the preset template named 'Default' will be used. There are two types of CaptureVisionTemplates: the [preset ones](./preset-templates.md) which come with the SDK and the custom ones that get initialized when the user calls [initSettings](./settings.md#initsettings). diff --git a/programming/javascript/api-reference/capture-vision-router/single-image-processing.md b/programming/javascript/api-reference/capture-vision-router/single-image-processing.md index 7499011..a042d87 100644 --- a/programming/javascript/api-reference/capture-vision-router/single-image-processing.md +++ b/programming/javascript/api-reference/capture-vision-router/single-image-processing.md @@ -29,7 +29,7 @@ capture(imageOrFile: Blob | HTMLImageElement | HTMLCanvasElement | HTMLVideoElem `imageOrFile`: specifies the image or file to be processed. The following data types are accepted: `Blob`, `HTMLImageElement`, `HTMLCanvasElement`, `HTMLVideoElement`, `DSImageData`, `string`. -`templateName`: specifies a "CaptureVisionTemplate" to use. If not specified, "Default" is used. +`templateName`: specifies a "CaptureVisionTemplate" to use. If not specified, the preset template named 'Default' will be used. There are two types of CaptureVisionTemplates: the [preset ones](./preset-templates.md) which come with the SDK and the custom ones that get initialized when the user calls [initSettings](./settings.md#initsettings). From 356e429023592ee1fdd22781af9ed0dd6e826021 Mon Sep 17 00:00:00 2001 From: DMGithubPublisher Date: Thu, 17 Oct 2024 14:43:38 +0800 Subject: [PATCH 3/3] update to internal commit 089b19d8 --- .vscode/settings.json | 3 - _config.yml | 4 +- _data/product_version.yml | 3 +- .../sidelist-programming/programming-js.html | 1 + .../sidelist-parameter-reference.html | 2 +- assets/js/dcvWebVersionSearch.json | 8 +- programming/javascript/release-notes/dcvb.md | 8 +- programming/javascript/release-notes/index.md | 3 +- .../user-guide/mrz-scanner-v2.4.2000.md | 302 ------------------ .../javascript/user-guide/mrz-scanner.md | 8 +- 10 files changed, 12 insertions(+), 330 deletions(-) delete mode 100644 .vscode/settings.json delete mode 100644 programming/javascript/user-guide/mrz-scanner-v2.4.2000.md diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6f3a291..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file diff --git a/_config.yml b/_config.yml index 9ad16ad..79d6d1f 100644 --- a/_config.yml +++ b/_config.yml @@ -7,10 +7,10 @@ docHomePage: /capture-vision/docs/web/programming/javascript/ dcvb_introduction: /capture-vision/docs/core/introduction/ dcvb_architecture: /capture-vision/docs/core/architecture/ -dcvb_parameter: /capture-vision/docs/core/parameters/ +dcvb_parameters: /capture-vision/docs/core/parameters/reference/ dcvb_parameterFile: /capture-vision/docs/core/parameters/file/ -dcvb_parameterReference: /capture-vision/docs/core/parameters/reference/ dcvb_enums: /capture-vision/docs/core/enums/ +license_activation: /capture-vision/docs/core/license/ dcvb_js: /capture-vision/docs/web/programming/javascript/ dcvb_js_api: /capture-vision/docs/web/programming/javascript/api-reference/ diff --git a/_data/product_version.yml b/_data/product_version.yml index 8c947d6..d585380 100644 --- a/_data/product_version.yml +++ b/_data/product_version.yml @@ -1,8 +1,7 @@ useGroupedVersion: true version_info_list: - - value: latest version(2.4.2001) + - value: latest version(2.4.2100) - value: 2.x child: - - 2.4.2000 - 2.2.3000 \ No newline at end of file diff --git a/_includes/sidelist-programming/programming-js.html b/_includes/sidelist-programming/programming-js.html index a14cf30..a240f58 100644 --- a/_includes/sidelist-programming/programming-js.html +++ b/_includes/sidelist-programming/programming-js.html @@ -1464,3 +1464,4 @@ --> +
  • License Initialization
    • \ No newline at end of file diff --git a/_includes/sidelist-programming/sidelist-parameter-reference.html b/_includes/sidelist-programming/sidelist-parameter-reference.html index a798c69..cd866f4 100644 --- a/_includes/sidelist-programming/sidelist-parameter-reference.html +++ b/_includes/sidelist-programming/sidelist-parameter-reference.html @@ -1,5 +1,5 @@
  • - Parameter Reference
      diff --git a/assets/js/dcvWebVersionSearch.json b/assets/js/dcvWebVersionSearch.json index 57c4785..5556422 100644 --- a/assets/js/dcvWebVersionSearch.json +++ b/assets/js/dcvWebVersionSearch.json @@ -1,16 +1,10 @@ [ { - "version": "2.4.2001", + "version": "2.4.2100", "matchVersion": { "javascript": "10.4.2001" } }, - { - "version": "2.4.2000", - "matchVersion": { - "javascript": "10.4.2000" - } - }, { "version": "2.2.3000", "matchVersion": { diff --git a/programming/javascript/release-notes/dcvb.md b/programming/javascript/release-notes/dcvb.md index 099b19e..09f1f3c 100644 --- a/programming/javascript/release-notes/dcvb.md +++ b/programming/javascript/release-notes/dcvb.md @@ -9,13 +9,7 @@ noTitleIndex: true # Release Notes - DynamsoftCaptureVisionBundle -## 2.4.2001 (10/11/2024) - -### Fixed - -- Fixed the issue where the rootPath definition in `engineResourcePaths` failed to function correctly in certain scenarios. - -## 2.4.2000 (10/10/2024) +## 2.4.2100 (10/17/2024) ### Highlights diff --git a/programming/javascript/release-notes/index.md b/programming/javascript/release-notes/index.md index f661967..f05acc2 100644 --- a/programming/javascript/release-notes/index.md +++ b/programming/javascript/release-notes/index.md @@ -9,6 +9,5 @@ noTitleIndex: true # Release Notes - Dynamsoft Capture Vision Bundle JavaScript -- [2.4.2001 (10/11/2024)](dcvb.md#242001-10112024) -- [2.4.2000 (10/10/2024)](dcvb.md#242000-10102024) +- [2.4.2100 (10/17/2024)](dcvb.md#242100-10172024) - [2.2.3000 (07/21/2024)](dcvb.md#223000-07212024) \ No newline at end of file diff --git a/programming/javascript/user-guide/mrz-scanner-v2.4.2000.md b/programming/javascript/user-guide/mrz-scanner-v2.4.2000.md deleted file mode 100644 index aae58d3..0000000 --- a/programming/javascript/user-guide/mrz-scanner-v2.4.2000.md +++ /dev/null @@ -1,302 +0,0 @@ ---- -layout: default-layout -title: Scan & Parse MRZ - Dynamsoft Capture Vision JavaScript Edition -description: This page introduce how to use Dynamsoft Capture Vision JS edition to recognize the Machine-Readable Zone (MRZ) on a passport or ID card and converts the encoded strings into human-readable fields. -keywords: JavaScript, scan mrz, read mrz, scan passport, read passport, scan id mrz, read id mrz -needAutoGenerateSidebar: true -needGenerateH3Content: true -noTitleIndex: true ---- - -# MRZ Scanner Solution for Your Website - User Guide - -This guide walks you through the process of creating a simple MRZ scanner solution. - -Table of Contents - -- [MRZ Scanner Solution for Your Website - User Guide](#mrz-scanner-solution-for-your-website---user-guide) - - [About the solution](#about-the-solution) - - [Web demo](#web-demo) - - [Run this Solution](#run-this-solution) - - [Project structure](#project-structure) - - [Building your own page](#building-your-own-page) - - [Include the SDK](#include-the-sdk) - - [Set up the solution](#set-up-the-solution) - - [Specify the license](#specify-the-license) - - [Load resources in advance](#load-resources-in-advance) - - [Create an CaptureVisionRouter instance and initialize the settings](#create-an-capturevisionrouter-instance-and-initialize-the-settings) - - [Use the camera as the image source](#use-the-camera-as-the-image-source) - - [Complete the Solution](#complete-the-solution) - - [Start recognition and coordinate image-processing tasks](#start-recognition-and-coordinate-image-processing-tasks) - - [Handle the captured result](#handle-the-captured-result) - - [Host the SDK yourself](#host-the-sdk-yourself) - - [System Requirements](#system-requirements) - - [Next Steps](#next-steps) - -## About the solution - -With the MRZ Scanner, you can use your camera to scan the MRZ code from a passport or ID. The scanner extracts data such as first name, last name, document number, nationality, date of birth, expiration date, and personal number from the MRZ string, converting it into human-readable fields. - -### Web demo - -The web demo is available at [https://demo.dynamsoft.com/solutions/mrz-scanner/index.html]( https://demo.dynamsoft.com/solutions/mrz-scanner/index.html). Rest assured, no personal data will be uploaded. - -### Run this Solution - -**1. Clone the repository to a working directory or download the code as a ZIP file** - -```sh -git clone https://github.com/Dynamsoft/mrz-scanner-javascript -``` - -**2. Deploy the files to a directory hosted on an HTTPS server** - -**3. Open the "index.html" file in your browser** - -> Basic Requirements -> -> * Internet connection -> * [A supported browser](#system-requirements) -> * An accessible Camera - ------ - -### Project structure - -```text -MRZ Scanner -├── assets -│ ├── ... -│ ├── ... -│ └── ... -├── css -│ └── index.css -├── font -│ ├── ... -│ ├── ... -│ └── ... -├── js -│ ├── const.js -│ ├── index.js -│ ├── init.js -│ └── util.js -├── index.html -└── template.json -``` - - * `/assets` : This directory contains all the static files such as images, icons, etc. that are used in the project. - * `/css` : This directory contains the CSS file(s) used for styling the project. - * `/font` : This directory contains the font files used in the project. - * `/js` : This directory contains all the JavaScript files used in the project. - * `const.js` : This file contains definitions of certain constants or variables used across the project. - * `index.js`: This is the main JavaScript file where the core logic of the project is implemented. - * `init.js` : This file is used for initialization purposes, such as initializing license, load resources, etc. - * `util.js` : This file contains utility functions that are used across the project. - * `index.html` : This is the main HTML file that represents the homepage of the project. - * `template.json` : This file contains predefined templates used in the project. - -> Note: A more detailed discussion about these files will be presented in the next section. - -## Building your own page - -In this section, we’ll walk through the key steps needed to build a web page that reads the machine-readable zone (MRZ) on a passport or ID. - -### Include the SDK - -The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. This project uses `jsDelivr` in [`index.html`](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/index.html). - -* jsDelivr - - ```html - - ``` - -* UNPKG - - ```html - - ``` - -> Besides using the public CDN, you can also download the SDK from the npm and host its files on your own server or a commercial CDN before including it in your application. Please see [Host the SDK yourself](#host-the-sdk-yourself) - -### Set up the solution - -Before using the SDK, you need to configure a few things in [`init.js`](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/js/init.js). - -#### Specify the license - -To enable the SDK's functionality, you must provide a valid license. Use the function `initLicense` to set your license key. - -```javascript -Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); -``` - -The key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this solution (found in the js/init.js file) is a test license valid for 24 hours for any newly authorized browser. If you wish to test the SDK further, you can request a 30-day free trial license through the Request a Trial License link. - -#### Load resources in advance - -To optimize image processing in a web environment, the algorithms are compiled into WebAssembly modules (files with a .wasm extension). These modules can be quite large, but the SDK can preload them asynchronously to enhance the user experience. For better performance, we recommend using [`loadWasm()`](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/core-module-class.html#loadwasm) to preload the necessary libraries. Since this solution uses DCE, DLR, and DCP, only the relevant resources need to be preloaded (no need to preload .wasm resources for DCE). - - -```javascript -Dynamsoft.Core.CoreModule.loadWasm(["DLR", "DCP"]); -``` - -In addition to the .wasm files, performance can be further enhanced by preloading the parsing standards and inference models (referred to as .data files) using the methods [`loadSpec()`](https://www.dynamsoft.com/code-parser/docs/web/programming/javascript/api-reference/code-parser-module-class.html#loadspec) and [`loadRecognitionData()`](https://www.dynamsoft.com/label-recognition/docs/web/programming/javascript/api-reference/label-recognizer-module-class.html#loadrecognitiondata), respectively. - -In our solution, we preload the parsing standards for `MRTD_TD3_PASSPORT`, `MRTD_TD1_ID`, and `MRTD_TD2_ID`, along with the .data file for `MRZ` recognition. - -```javascript -Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_PASSPORT"); -Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD1_ID"); -Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD2_ID"); -Dynamsoft.DLR.LabelRecognizerModule.loadRecognitionData("MRZ"); -``` - -> All these files are cached locally after being downloaded, so they load much faster on subsequent uses. - -#### Create an CaptureVisionRouter instance and initialize the settings - -The `Dynamsoft.CVR.CaptureVisionRouter.createInstance()` method creates a `CaptureVisionRouter` object, `cvRouter`, which controls the entire process. First, a [template file](https://github.com/Dynamsoft/mrz-scanner-javascript/blob/main/template.json) is loaded, where specific image processing workflows, such as "ReadPassport", "ReadId", and "ReadPassportAndId", are defined. - -> If you'd like to understand the template file, refer to the [Overview of DCV parameters](https://www.dynamsoft.com/capture-vision/docs/core/parameters/file/index.html). - -```javascript -cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); -await cvRouter.initSettings("./template.json"); -``` - -#### Use the camera as the image source - -`cvRouter` connects to the image source using the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js){:target="_blank"} interface via the `setInput()` method. - -> In our case, the image source is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object, created using `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`. - -```javascript -cameraView = await Dynamsoft.DCE.CameraView.createInstance(cameraViewContainer); -cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); -cvRouter.setInput(cameraEnhancer); -``` - -### Complete the Solution - -#### Start recognition and coordinate image-processing tasks - -We use `cameraEnhancer.open()` to start video streaming, and `cvRouter` begins the process by specifying a template name ("ReadPassport", "ReadId", or "ReadPassportAndId") in the `startCapturing()` method. - -```javascript -await cameraEnhancer.open(); -await cvRouter.startCapturing("ReadPassport"); -``` - -#### Handle the captured result - -The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js){:target="_blank"} interface. The `CapturedResultReceiver` object is registered to `cvRouter` using the `addResultReceiver()` method. - -```javascript -const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); -resultReceiver.onCapturedResultReceived = (result) => { - const recognizedResults = result.textLineResultItems; - const parsedResults = result.parsedResultItems; - // Process the results according to your needs. -} -await cvRouter.addResultReceiver(resultReceiver); -``` - -## Host the SDK yourself - -You can download the SDK from npm and host it yourself. - -> Note that you need to get two other assisting packages. - -```cmd -npm i dynamsoft-capture-vision-bundle@2.4.2000 -E -npm i dynamsoft-capture-vision-std@1.4.10 -E -npm i dynamsoft-image-processing@2.4.20 -E -``` - -The resources are located at the path node_modules/, without @, so the script in your page would be like: - - - -Since @ is missing, you need to specify the location of the "engine" files: - -```javascript -//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files -Object.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, { - "std":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.4.10/dist/", - "core":"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.4.20/dist/", - "dip":"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.4.20/dist/", - "license":"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.4.20/dist/", - "cvr":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.4.20/dist/", - "dce":"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.1.0/dist/", - "dbr":"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.4.20/dist/", - "dlr":"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@3.4.20/dist/", - "dcp":"https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.4.22/dist/", - "ddn":"https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@2.4.20/dist/", - "dlrData":"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer-data@1.0.11/dist/", - "dnn":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-dnn@1.0.20/dist/", -}); -``` - -*Note*: - -* Certain legacy web application servers may lack support for the `application/wasm` mimetype for .wasm files. To address this, you have two options: - 1. Upgrade your web application server to one that supports the `application/wasm` mimetype. - 2. Manually define the mimetype on your server. You can refer to the following resources for guidance: - 1. [Apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings){:target="_blank"} - 2. [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap){:target="_blank"} - 3. [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types){:target="_blank"} - -* To work properly, the SDK requires a few engine files, which are relatively large and may take quite a few seconds to download. We recommend that you set a longer cache time for these engine files, to maximize the performance of your web application. - - ```cmd - Cache-Control: max-age=31536000 - ``` - - Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control){:target="_blank"}. - -## System Requirements - -This project requires the following features to work: - -- Secure context (HTTPS deployment) - - When deploying your application / website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons - - - Access to the camera video stream is only granted in a security context. Most browsers impose this restriction. - > Some browsers like Chrome may grant the access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and test. - - - Dynamsoft License requires a secure context to work. - -- `WebAssembly`, `Blob`, `URL`/`createObjectURL`, `Web Workers` - - The above four features are required for the SDK to work. - -- `MediaDevices`/`getUserMedia` - - This API is required for in-browser video streaming. - -- `getSettings` - - This API inspects the video input which is a `MediaStreamTrack` object about its constrainable properties. - -The following table is a list of supported browsers based on the above requirements: - - | Browser Name | Version | - | :----------: | :--------------: | - | Chrome | v78+1 | - | Firefox | v68+1 | - | Edge | v79+ | - | Safari | v14+ | - - 1 devices running iOS needs to be on iOS 14.3+ for camera video streaming to work in Chrome, Firefox or other Apps using webviews. - -Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. Browser compatibility ultimately depends on whether the browser on that particular operating system supports the features listed above. - -## Next Steps - -Now that you have got the SDK integrated, you can choose to move forward in the following directions - -1. Check out the [source code for this solution on github](https://github.com/Dynamsoft/mrz-scanner-javascript). -2. Check out the [Dynamsoft developer blog](https://www.dynamsoft.com/codepool/tag/mrz/). diff --git a/programming/javascript/user-guide/mrz-scanner.md b/programming/javascript/user-guide/mrz-scanner.md index 5aae4b5..9aab376 100644 --- a/programming/javascript/user-guide/mrz-scanner.md +++ b/programming/javascript/user-guide/mrz-scanner.md @@ -108,13 +108,13 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde * jsDelivr ```html - + ``` * UNPKG ```html - + ``` > Besides using the public CDN, you can also download the SDK from the npm and host its files on your own server or a commercial CDN before including it in your application. Please see [Host the SDK yourself](#host-the-sdk-yourself) @@ -210,7 +210,7 @@ You can download the SDK from npm and host it yourself. > Note that you need to get two other assisting packages. ```cmd -npm i dynamsoft-capture-vision-bundle@2.4.2001 -E +npm i dynamsoft-capture-vision-bundle@2.4.2100 -E npm i dynamsoft-capture-vision-std@1.4.10 -E npm i dynamsoft-image-processing@2.4.20 -E ``` @@ -228,7 +228,7 @@ Object.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, { "core":"https://cdn.jsdelivr.net/npm/dynamsoft-core@3.4.20/dist/", "dip":"https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.4.20/dist/", "license":"https://cdn.jsdelivr.net/npm/dynamsoft-license@3.4.21/dist/", - "cvr":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.4.20/dist/", + "cvr":"https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.4.21/dist/", "dce":"https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.1.0/dist/", "dbr":"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.4.20/dist/", "dlr":"https://cdn.jsdelivr.net/npm/dynamsoft-label-recognizer@3.4.20/dist/",