shen-dynamsoft-code-parser
Advanced tools
Dynamsoft Code Parser JavaScript Edition is equipped with industry-leading algorithms for exceptional speed and accuracy in code parsing.
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 DCP-JS SDK into your website.
Table of Contents
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 codes into readable info.
The complete code of the "Hello World" example is shown below:
Since the code that needs parsing is usually hard to understand and often comes from images, we choose an online image which contains a US driver license to demonstrate how to parse the code with the help of
BarcodeReader. Please make sure your device is connected to the Internet when opening the following example in your browser.
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.0.2/dist/dbr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@1.1.0/dist/dcp.js"></script>
<script>
// Specifies a license
Dynamsoft.DBR.BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
Dynamsoft.DCP.CodeParser.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
// Initializes and uses the SDK
(async () => {
try {
let reader = await Dynamsoft.DBR.BarcodeReader.createInstance();
let parser = await Dynamsoft.DCP.CodeParser.createInstance();
await parser.setCodeFormat(Dynamsoft.DCP.EnumCodeFormat.CF_AUTO);
// Decode the driver license with BarcodeReader
let results = await reader.decode(
"https://demo.dynamsoft.com/samples/dbr/js/4.use-case/SampleDriversLicense.jpg");
let info = "";
for (let result of results) {
// Parse the "code" retrieved from the barcode
info = await parser.parseData(result.barcodeBytes);
// Show the information
alert(JSON.stringify(info));
// Check the readable information in the console
console.log(info);
}
} catch (ex) {
alert(ex);
}
})();
</script>
</body>
</html>
license: This property specifies a license key. Read more on Specify the license.
createInstance(): This method creates a CodeParser object.
setCodeFormat: This method sets the code’s format before parsing.
parseData: This method parses the code.
For the rest of the code, please read more about DBR-JS User Guide.
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-code-parser@1.1.0/dist/dcp.js"></script>
UNPKG
<script src="https://unpkg.com/dynamsoft-code-parser@1.1.0/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:
yarn
yarn add dynamsoft-code-parser
npm
npm install dynamsoft-code-parser --save
Depending on how you downloaded the SDK and where you put it, you can typically include it like this:
<script src="/dynamsoft-code-parser-js-1.1.0/dist/dcp.js"></script>
or
<script src="/node_modules/dynamsoft-code-parser/dist/dcp.js"></script>
Before using the SDK, you need to configure a few things.
The SDK requires a license to work, use the API license to specify the license key.
//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.DCP.CodeParser.license = "YOUR-LICENSE-KEY";
This is usually only required with frameworks like Angular or React, etc. where dcp.js is 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 engineResourcePath :
//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
Dynamsoft.DCP.CodeParser.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-code-parser@1.1.0/dist/";
CodeParser objectTo use the SDK, we first create a CodeParser object.
Dynamsoft.DCP.CodeParser.license = "YOUR-LICENSE-KEY";
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 pParser in the following code
Dynamsoft.DCP.CodeParser.license = "YOUR-LICENSE-KEY";
let pParser = null;
function foo() {
try {
const parser = await (pParser = pParser || Dynamsoft.DCP.CodeParser.createInstance());
} catch (ex) {
console.error(ex);
}
}
Before parsing, you need to specify the format of code to parse. See EnumCodeFormat to check if DCP-JS covers the code format you need.
parser.setCodeFormat(format); //format: EnumCodeFormat
The method parseData() takes data in three formats: number[], Uint8Array and string. If you want to parse a barcode into readable info, you should first extract the information from the barcode using DBR-JS before parsing it with DCP-JS.
For more information on using DBR-JS, read DBR-JS User Guide.
parser.parseData(data); //data: number[] | Uint8Array | string
For more information about the APIs of DCP-JS, 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.
The npm package shen-dynamsoft-code-parser receives a total of 15 weekly downloads. As such, shen-dynamsoft-code-parser popularity was classified as not popular.
We found that shen-dynamsoft-code-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.