![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
dynamsoft-code-parser
Advanced tools
Readme
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 is designed to work both independently and alongside another functional product such as Dynamsoft Barcode Reader or Dynamsoft Label Recognizer.
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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/license.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.2.10/dist/dcp.js"></script>
</head>
<body>
<div
id="results"
style="width: 100%; min-height: 10vh; font-size: 3vh; overflow: auto"
></div>
<script>
let passportMRZStr =
"P<D<<ADENAUER<<KONRAD<HERMANN<JOSEPH<<<<<<<<1234567897D<<7601059M6704115<<<<<<<<<<<<<<<2";
let parser = null;
const resultsContainer = document.querySelector("#results");
(async function () {
Dynamsoft.License.LicenseManager.initLicense(
"DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"
);
await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_PASSPORT");
parser = await Dynamsoft.DCP.CodeParser.createInstance();
let parsedResultItem = await parser.parse(passportMRZStr);
let parsedResult = JSON.parse(parsedResultItem.jsonString);
let parsedLines = parsedResult.ResultInfo;
resultsContainer.innerHTML = "";
parsedLines.forEach((element) => {
resultsContainer.innerHTML +=
"<hr><strong>" + element.FieldName + "</strong><br /><hr>";
element.ChildFields[0].forEach((childElement) => {
resultsContainer.innerHTML +=
" " +
`${childElement.FieldName}: <strong>${childElement.Value}</strong><br />`;
});
});
})();
</script>
</body>
</html>
let passportMRZStr = "P<D<<ADENAUER<<KONRAD<HERMANN<JOSEPH<<<<<<<<1234567897D<<7601059M6704115<<<<<<<<<<<<<<<2";
: this string is a fabricated example that conforms to the MRTD_TD3_PASSPORT
specification. In a practical scenario, such a string would be provided by an external software. For instance, it could be the textual output of "Dynamsoft Label Recognizer" following the scanning of a passport.
Dynamsoft.License.LicenseManager.initLicense()
: initializes the license using a license key string.
Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_PASSPORT")
: preloads the MRTD_TD3_PASSPORT
specification which helps with the parsing of the string.
Dynamsoft.DCP.CodeParser.createInstance()
: initializes the parser
variable by creating an instance of the CodeParser
class.
parser.parse(passportMRZStr)
: parses the sample string and returns a structured result item.
Create a text file called "code-parser.html", fill it with the code above and save it. After that, open the example page in your browser, and you will see the parsed result displayed on the page.
NOTE:
The sample code requires the following to run:
- Internet connection
- A supported browser
Please note:
If the test doesn't go as expected, you can contact us.
The simplest way to include the SDK is to use either the jsDelivr or UNPKG CDN. The "hello world" example above uses jsDelivr.
jsDelivr
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/license.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@2.2.10/dist/dcp.js"></script>
UNPKG
<script src="https://unpkg.com/dynamsoft-core@3.2.10/dist/core.js"></script>
<script src="https://unpkg.com/dynamsoft-license@3.2.10/dist/license.js"></script>
<script src="https://unpkg.com/dynamsoft-code-parser@2.2.10/dist/dcp.js"></script>
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 and Download the JavaScript ZIP package
yarn
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
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:
<!-- Upon extracting the zip package into your project, you can generally include it in the following manner -->
<script src="./dynamsoft/distributables/dynamsoft-core@3.2.10/dist/core.js"></script>
<script src="./dynamsoft/distributables/dynamsoft-license@3.2.10/dist/license.js"></script>
<script src="./dynamsoft/distributables/dynamsoft-code-parser@2.2.10/dist/dcp.js"></script>
or
<script src="./node_modules/dynamsoft-core/dist/core.js"></script>
<script src="./node_modules/dynamsoft-license/dist/license.js"></script>
<script src="./node_modules/dynamsoft-code-parser/dist/dcp.js"></script>
or
import { LicenseManager } from "dynamsoft-license";
import { type ParsedResultItem, CodeParser } from 'dynamsoft-code-parser';
Before using the SDK, you need to configure a few things.
The SDK requires a license to work, use the method Dynamsoft.License.LicenseManager.initLicense
to specify the license key.
//You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=npm&product=dcp&package=js to get your own trial license good for 30 days.
Dynamsoft.License.LicenseManager.initLicense("YOUR-LICENSE-KEY");
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
:
//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.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/";
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".
await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_PASSPORT");
CodeParser
objectThen we create a CodeParser
object.
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
let helperParser = null;
function foo() {
try {
const parser = await (helperParser = helperParser || Dynamsoft.DCP.CodeParser.createInstance());
} catch (ex) {
console.error(ex);
}
}
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.
let parsedResultItem = await parser.parse("THE-CODE-TO-PARSE");
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.
Learn what are included in each release at Dynamsoft Code Parser JavaScript Edition Release Notes.
For more information about the APIs of the SDK, read Dynamsoft Code Parser JavaScript Edition API Reference.
FAQs
Dynamsoft Code Parser JavaScript Edition is equipped with industry-leading algorithms for exceptional speed and accuracy in code parsing.
We found that dynamsoft-code-parser demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.