diff --git a/_data/product_version.yml b/_data/product_version.yml index 4f29e33..3a6adaa 100644 --- a/_data/product_version.yml +++ b/_data/product_version.yml @@ -1,7 +1,7 @@ useGroupedVersion: true version_info_list_js: - - value: latest version + - value: latest version(2.2.10) - value: 2.x child: - 2.0.20 diff --git a/assets/js/dcpWebVersionSearch.json b/assets/js/dcpWebVersionSearch.json index c0951dc..029d8b1 100644 --- a/assets/js/dcpWebVersionSearch.json +++ b/assets/js/dcpWebVersionSearch.json @@ -1,4 +1,57 @@ [ + { + "version": "2.0.20", + "matchList": { + "js":{ + "dcvRepoWeb": [ + { + "path": "/programming/javascript/api-reference/utility", + "version": "1.2.10" + }, { + "path": "/programming/javascript/api-reference/license", + "version": "3.2.10" + }, { + "path": "/programming/javascript/api-reference/capture-vision-router", + "version": "2.2.10" + }, { + "path": "/programming/javascript/api-reference/core", + "version": "3.2.10" + }, { + "path": "/programming/javascript/api-reference/image-processing", + "version": "2.2.10" + } + ], + "dcvRepoCore": [ + { + "path": "/enums/capture-vision-router", + "version": "2.2.10" + }, { + "path": "/enums/core", + "version": "3.2.10" + },{ + "path": "/parameters/reference/capture-vision-template", + "version": "2.2.10" + },{ + "path": "/parameters/reference/target-roi-def", + "version": "2.2.10" + },{ + "path": "/parameters/reference/document-normalizer-task-settings", + "version": "2.2.10" + },{ + "path": "/parameters/reference/image-parameter", + "version": "2.2.10" + },{ + "path": "/parameters/reference/image-source-options", + "version": "3.2.10" + },{ + "path": "/parameters/reference/global-parameter", + "version": "2.2.10" + } + ], + "dce": "4.0.2" + } + } + }, { "version": "2.0.20", "matchList": { diff --git a/programming/javascript/api-reference/code-parser-module-class-v2.0.20.md b/programming/javascript/api-reference/code-parser-module-class-v2.0.20.md new file mode 100644 index 0000000..42ed1a4 --- /dev/null +++ b/programming/javascript/api-reference/code-parser-module-class-v2.0.20.md @@ -0,0 +1,52 @@ +--- +layout: default-layout +title: CodeParserModule Class - Dynamsoft Code Parser JavaScript Edition API +description: This page introduces APIs related to the CodeParserModule Class of Dynamsoft Code Parser JavaScript Edition. +keywords: capture vision, code parser Module, api reference, javascript, js +needAutoGenerateSidebar: true +needGenerateH3Content: true +noTitleIndex: true +--- + +# CodeParserModule Class + +The `CodeParserModule` class is defined in the namespace `Dynamsoft.DCP`. + +| API Name | Description | +| ------------------------------------ | ----------------------------------------------------------- | +| `static` [getVersion()](#getversion) | Returns the version of the `CodeParser` module. | +| `static` [loadSpec()](#loadspec) | Loads the specification for a certain type of code strings. | + +### getVersion + +Returns the version of the `CodeParser` module. + +```typescript +static getVersion(): string; +``` + +**Code snippet** + +```javascript +const version = Dynamsoft.DCP.CodeParserModule.getVersion(); +console.log(version); +``` + +### loadSpec + +Loads the specification for a certain type of code strings. + +```typescript +loadSpec(specificationName: string, specificationPath?: string): Promise; +``` + +**Parameters** + +* `specificationName`: specifies the name of the specification. +* `specificationPath`: specifies the path to find the specification file. If not specified, the method will try to load the file from the path specified for the "dcp" module in `Dynamsoft.Core.CoreModule.engineResourcePaths`. For example, if the path for the "dcp" module is "https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.0.20/dist/", then calling `Dynamsoft.DCP.CodeParserModule.loadSpec("AADHAAR")` will load the file "AADHAAR.data" from "https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.0.20/dist/specification/AADHAAR.data". + +**Code Snippet** + +```javascript +await Dynamsoft.DCP.CodeParserModule.loadSpec("AADHAAR"); +``` diff --git a/programming/javascript/api-reference/code-parser-module-class.md b/programming/javascript/api-reference/code-parser-module-class.md index 42ed1a4..f8c9dbb 100644 --- a/programming/javascript/api-reference/code-parser-module-class.md +++ b/programming/javascript/api-reference/code-parser-module-class.md @@ -37,7 +37,7 @@ console.log(version); Loads the specification for a certain type of code strings. ```typescript -loadSpec(specificationName: string, specificationPath?: string): Promise; +loadSpec(specificationName: string | Array, specificationPath?: string): Promise; ``` **Parameters** diff --git a/programming/javascript/api-reference/code-parser-module.md b/programming/javascript/api-reference/code-parser-module.md index b0194ad..754dad7 100644 --- a/programming/javascript/api-reference/code-parser-module.md +++ b/programming/javascript/api-reference/code-parser-module.md @@ -37,8 +37,8 @@ The `CodeParser` class enable users to parse given bytes or a string. ## Interfaces -* [ParsedResultItem](./interfaces/parsed-result-item.md) * [ParsedResult](./interfaces/parsed-result.md) +* [ParsedResultItem](./interfaces/parsed-result-item.md) ## Enumerations diff --git a/programming/javascript/api-reference/code-parser.md b/programming/javascript/api-reference/code-parser.md index 0391174..1e90efd 100644 --- a/programming/javascript/api-reference/code-parser.md +++ b/programming/javascript/api-reference/code-parser.md @@ -8,7 +8,7 @@ needAutoGenerateSidebar: true # CodeParser Class -The `CodeParser` class enable users to parse given bytes or a string. +The `CodeParser` class enable users to parse given bytes or a string to be human-readable. | Method | Description | | -------------------------------------------- | ---------------------------------------------------------------------- | @@ -113,7 +113,7 @@ initSettings: (settings: string) => Promise; **Return value** -Returns a promise that resolves when the initializing finishes. +A promise that resolves when the operation has completed. It does not provide any value upon resolution. ## resetSettings @@ -133,7 +133,7 @@ Returns a promise that resolves when the settings have been successfully reset t ## parse -Parses code data for human-readable results. +Parses a single string to be human-readable. ```typescript parse: (source: Uint8Array | string, taskSettingName?: string) => Promise; diff --git a/programming/javascript/api-reference/interfaces/parsed-result-item.md b/programming/javascript/api-reference/interfaces/parsed-result-item.md index 3fd2417..eb653cb 100644 --- a/programming/javascript/api-reference/interfaces/parsed-result-item.md +++ b/programming/javascript/api-reference/interfaces/parsed-result-item.md @@ -22,13 +22,13 @@ interface ParsedResultItem extends Core.CapturedResultItem { } ``` -| API Name | Description | + ## codeType diff --git a/programming/javascript/api-reference/interfaces/parsed-result.md b/programming/javascript/api-reference/interfaces/parsed-result.md index 6b46ef7..d20da7f 100644 --- a/programming/javascript/api-reference/interfaces/parsed-result.md +++ b/programming/javascript/api-reference/interfaces/parsed-result.md @@ -24,7 +24,7 @@ interface ParsedResult { } ``` -| API Name | Description | + ## originalImageHashId diff --git a/programming/javascript/release-notes/index.md b/programming/javascript/release-notes/index.md index 156dddb..9b777c3 100644 --- a/programming/javascript/release-notes/index.md +++ b/programming/javascript/release-notes/index.md @@ -9,6 +9,7 @@ breadcrumbText: Release Notes # Dynamsoft Code Parser JavaScript SDK - Release Notes +- [2.2.10 (04/11/2024)](js-2.md/#2210-04112024) - [2.0.20 (01/19/2024)](js-2.md/#2020-01192024) - [1.1.0 (07/19/2022)](js-1.md/#110-07192022) - [1.0.2 (06/08/2022)](js-1.md/#102-06082022) diff --git a/programming/javascript/release-notes/js-2.md b/programming/javascript/release-notes/js-2.md index c25d934..8c8b35b 100644 --- a/programming/javascript/release-notes/js-2.md +++ b/programming/javascript/release-notes/js-2.md @@ -10,6 +10,20 @@ noTitleIndex: true # Release Notes for JavaScript SDK - 2.x +## 2.2.10 (04/11/2024) + +### Improved + +* Security update for `DynamsoftCodeParser` library and other corresponding libraries. + +* Update the API [`loadSpec`]({{ site.dcp_js_api }}code-parser-module-class.html#loadspec) to supporting loading multiple specifications at a time. + +### Fixed + +* Fixed a bug where the same map file is requested more than once. + +* Fixed type definition not found issue under TypeScript 5.x version. + ## 2.0.20 (01/19/2024) ### Changelog diff --git a/programming/javascript/user-guide/index-v2.0.20.md b/programming/javascript/user-guide/index-v2.0.20.md new file mode 100644 index 0000000..ba6fa77 --- /dev/null +++ b/programming/javascript/user-guide/index-v2.0.20.md @@ -0,0 +1,302 @@ +--- +layout: default-layout +title: User Guide - Dynamsoft Code Parser for JavaScript v2.x +description: This is the user guide page of Dynamsoft Code Parser for JavaScript SDK v2.x. +keywords: user guide, javascript +breadcrumbText: User Guide +noTitleIndex: true +needAutoGenerateSidebar: true +needGenerateH3Content: true +--- + + + +# Dynamsoft Code Parser for Your Website + +Dynamsoft Code Parser is designed to parse data strings (usually encrypted in barcodes, machine readable zones, etc.) into human-readable information. The JavaScript edition is based on WebAssembly and offers great speed and accuracy. With its well-designed API, you can equip your web pages with a code parser with just a few lines of code. + +In this guide, you will learn step by step on how to integrate the SDK into your website. + +Table of Contents + +- [Dynamsoft Code Parser for Your Website](#dynamsoft-code-parser-for-your-website) + - [Hello World](#hello-world) + - [About the code](#about-the-code) + - [Run the example](#run-the-example) + - [Building your own page](#building-your-own-page) + - [Include the SDK](#include-the-sdk) + - [Use a CDN](#use-a-cdn) + - [Host the SDK yourself](#host-the-sdk-yourself) + - [Configure the SDK](#configure-the-sdk) + - [Specify the license](#specify-the-license) + - [Specify the location of the "engine" files (optional)](#specify-the-location-of-the-engine-files-optional) + - [Interact with the SDK](#interact-with-the-sdk) + - [Load the specification for parsing](#load-the-specification-for-parsing) + - [Create a `CodeParser` object](#create-a-codeparser-object) + - [Start Parsing](#start-parsing) + - [System requirements](#system-requirements) + - [Release notes](#release-notes) + - [API Documentation](#api-documentation) + +## Hello World + +Dynamsoft Code Parser is designed to work both independently and alongside another functional product such as [Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/overview/) or [Dynamsoft Label Recognizer](https://www.dynamsoft.com/label-recognition/overview/). + +Let's start with the "Hello World" example of the SDK which demonstrates how to use the minimum code to enable a web page to parse an existing string into human-readable fields. + +The complete code of the "Hello World" example is shown below: + +```html + + + + + + + + + +
+ + + + +``` + +### About the code + +- `let passportMRZStr = "P NOTE: +> +> The sample code requires the following to run: +> +> 1. Internet connection +> 2. [A supported browser](#system-requirements) + +Please note: + +- Although the page should work properly when opened directly as a file ("file:///"), it's recommended that you deploy it to a web server and access it via HTTPS. +- On first use, you need to wait a few seconds for the SDK to initialize. +- The license "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" used in this sample is an online license good for 24 hours and requires network connection to work. To test the SDK further, you can request a 30-day trial license via the [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?utm_source=guide&architecture=dcv&product=dcp&package=js). + +If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/customer-service/#contact). + +## Building your own page + +### Include the SDK + +#### Use a CDN + +The simplest way to include the SDK is to use either the [jsDelivr](https://jsdelivr.com/) or [UNPKG](https://unpkg.com/) CDN. The "hello world" example above uses **jsDelivr**. + +* jsDelivr + + ```html + + + + ``` + +* UNPKG + + ```html + + + + ``` + +#### Host the SDK yourself + +Besides using the CDN, you can also download the SDK and host its files on your own website / server before including it in your application. + +Options to download the SDK: + +- From the website + + Sign in the [Customer Portal](https://www.dynamsoft.com/customer/index?utm_source=docs&product=dcp) and Download the JavaScript ZIP package + +* yarn + + ```cmd + yarn add dynamsoft-core@3.0.30 --save + yarn add dynamsoft-license@3.0.20 --save + yarn add dynamsoft-code-parser@2.0.20 --save + ``` + +* npm + + ```cmd + npm install dynamsoft-core@3.0.30 --save + npm install dynamsoft-license@3.0.20 --save + npm install dynamsoft-code-parser@2.0.20 --save + ``` + +Depending on how you downloaded the SDK and where you put it, you can typically include it like this: + +```html + + + + +``` + +or + +```html + + + +``` + +or + +```typescript +import { LicenseManager } from "dynamsoft-license"; +import { type ParsedResultItem, CodeParser } from 'dynamsoft-code-parser'; +``` + +### Configure the SDK + +Before using the SDK, you need to configure a few things. + +#### Specify the license + +The SDK requires a license to work, use the method `Dynamsoft.License.LicenseManager.initLicense` to specify the license key. + +```javascript +//You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dcp&package=js to get your own trial license good for 30 days. +Dynamsoft.License.LicenseManager.initLicense("YOUR-LICENSE-KEY"); +``` + +#### Specify the location of the "engine" files (optional) + +This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as `core.js`, `dcp.js` are compiled into another file. + +The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.). The API is called `Dynamsoft.Core.CoreModule.engineResourcePaths`: + +```javascript +//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files +Dynamsoft.Core.CoreModule.engineResourcePaths.core = "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/"; +Dynamsoft.Core.CoreModule.engineResourcePaths.license = "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/"; +Dynamsoft.Core.CoreModule.engineResourcePaths.dcp = "https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.0.20/dist/"; +``` + +### Interact with the SDK + +#### Load the specification for parsing + +The SDK requires the specification of the code string to parse it. If we are going to parse the MRZ strings found on passports, we need the specification "MRTD\_TD3\_PASSPORT". + +```javascript +await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_PASSPORT"); +``` + +#### Create a `CodeParser` object + +Then we create a `CodeParser` object. + +```javascript +let parser = null; +try { + parser = await Dynamsoft.DCP.CodeParser.createInstance(); +} catch (ex) { + console.error(ex); +} +``` + +Tip: When creating a `CodeParser` object within a function which may be called more than once, it's best to use a "helper" variable to avoid double creation such as `helperParser` in the following code + +```javascript +let helperParser = null; + +function foo() { + try { + const parser = await (helperParser = helperParser || Dynamsoft.DCP.CodeParser.createInstance()); + } catch (ex) { + console.error(ex); + } +} +``` + +#### Start Parsing + +The method `parse()` takes data in two formats: `Uint8Array` and `string`. `Uint8Array` refers to the binary data produced by another software such as Dynamsoft Barcode Reader. + +```javascript +let parsedResultItem = await parser.parse("THE-CODE-TO-PARSE"); +``` + +## System requirements + +The SDK 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 because 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. + +The following table is a list of supported browsers based on the above requirements: + + | Browser Name | Version | + | :----------: | :-----: | + | Chrome | v78+ | + | Firefox | v62+ | + | Safari | v14+ | + | Edge | v79+ | + +Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. + +## Release notes + +Learn what are included in each release at [Dynamsoft Code Parser JavaScript Edition Release Notes](https://www.dynamsoft.com/code-parser/docs/web/programming/javascript/release-notes/?ver=latest). + +## API Documentation + +For more information about the APIs of the SDK, read [Dynamsoft Code Parser JavaScript Edition API Reference](https://www.dynamsoft.com/code-parser/docs/web/programming/javascript/api-reference/?ver=2.0.20). diff --git a/programming/javascript/user-guide/index.md b/programming/javascript/user-guide/index.md index ba6fa77..803f7fa 100644 --- a/programming/javascript/user-guide/index.md +++ b/programming/javascript/user-guide/index.md @@ -51,9 +51,9 @@ The complete code of the "Hello World" example is shown below: - - - + + +
- - + + + ``` * UNPKG ```html - - - + + + ``` #### Host the SDK yourself @@ -162,26 +162,26 @@ Options to download the SDK: * yarn ```cmd - yarn add dynamsoft-core@3.0.30 --save - yarn add dynamsoft-license@3.0.20 --save - yarn add dynamsoft-code-parser@2.0.20 --save + yarn add dynamsoft-core@3.2.10 --save + yarn add dynamsoft-license@3.2.10 --save + yarn add dynamsoft-code-parser@2.2.10 --save ``` * npm ```cmd - npm install dynamsoft-core@3.0.30 --save - npm install dynamsoft-license@3.0.20 --save - npm install dynamsoft-code-parser@2.0.20 --save + npm install dynamsoft-core@3.2.10 --save + npm install dynamsoft-license@3.2.10 --save + npm install dynamsoft-code-parser@2.2.10 --save ``` Depending on how you downloaded the SDK and where you put it, you can typically include it like this: ```html - - - + + + ``` or @@ -220,9 +220,9 @@ The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*. ```javascript //The following code uses the jsDelivr CDN, feel free to change it to your own location of these files -Dynamsoft.Core.CoreModule.engineResourcePaths.core = "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.0.30/dist/"; -Dynamsoft.Core.CoreModule.engineResourcePaths.license = "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.0.20/dist/"; -Dynamsoft.Core.CoreModule.engineResourcePaths.dcp = "https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.0.20/dist/"; +Dynamsoft.Core.CoreModule.engineResourcePaths.core = "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/"; +Dynamsoft.Core.CoreModule.engineResourcePaths.license = "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/"; +Dynamsoft.Core.CoreModule.engineResourcePaths.dcp = "https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.2.10/dist/"; ``` ### Interact with the SDK