Adding the Dependency

To build the solution, we need to include six packages

1. dynamsoft-document-viewer: Required. It provides functions to create the viewers.
2. dynamsoft-core: Required. It encompasses common classes, interfaces, and enumerations that are shared across all SDKs in DCV architecture.
3. dynamsoft-license: Required. It introduces the LicenseManager class.
4. dynamsoft-document-normalizer: Required. It defines interfaces and enumerations specifically tailored to the document normalizer module.
5. dynamsoft-capture-vision-router: Required. It defines the class CaptureVisionRouter, which governs the entire image processing workflow.
6. dynamsoft-camera-enhancer: Required. It provides video stream display and image acquisition.

Use a CDN

The simplest way to include the SDK is to use either the jsDelivr or UNPKG CDN.

• jsDelivr

  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>
  <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-document-normalizer@2.2.10/dist/ddn.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
  

• UNPKG

  <script src="https://unpkg.com/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script>
  <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-document-normalizer@2.2.10/dist/ddn.js"></script>
  <script src="https://unpkg.com/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js"></script>
  <script src="https://unpkg.com/dynamsoft-camera-enhancer@4.0.2/dist/dce.js"></script>
  

Host yourself

Besides using the CDN, you can also download the SDKs and host related files on your own website/server before including it in your application. When using a CDN, resources related to dynamsoft-image-processing and dynamsoft-capture-vision-std are automatically loaded over the network; When using them locally, these two packages need to be configured manually.

Step 1 Download the SDKs:

• npm

  npm install dynamsoft-document-viewer@2.0.0
  npm install dynamsoft-core@3.2.10
  npm install dynamsoft-license@3.2.10
  npm install dynamsoft-document-normalizer@2.2.10
  npm install dynamsoft-capture-vision-router@2.2.10
  npm install dynamsoft-capture-vision-std@1.2.0
  npm install dynamsoft-image-processing@2.2.10
  npm install dynamsoft-camera-enhancer@4.0.2
  

Step 2 Include the SDKs

Depending on where you put them, you can typically include them like this:

  <script src="./node_modules/dynamsoft-document-viewer/dist/ddv.js"></script>
  <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-document-normalizer/dist/ddn.js"></script>
  <script src="./node_modules/dynamsoft-capture-vision-router/dist/cvr.js"></script>
  <script src="./node_modules/dynamsoft-camera-enhancer/dist/dce.js"></script>

Step 3 Specify the location of the engine files(optinal)

If you would like to use the SDKs completely offline, please refer to Use your own hosted engine files.

Specify the location of the engine files

This is usually only required with frameworks like Angular or React, etc. where the referenced JavaScript files such as cvr.js, ddn.js are compiled into another file, or hosting the engine files and using the SDKs completely offline. The purpose is to tell the SDK where to find the engine files (*.worker.js, *.wasm.js and *.wasm, etc.).

Use the jsDelivr CDN with frameworks like Angular or React, etc.

  Dynamsoft.DDV.Core.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/engine";
  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.ddn = "https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@2.2.10/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.cvr = "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.std = "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.dip = "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.dce = "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/";

Use your own hosted engine files

  //Feel free to change it to your own location of these files
  Dynamsoft.DDV.Core.engineResourcePath = "./node_modules/dynamsoft-document-viewer/dist/engine";
  Dynamsoft.Core.CoreModule.engineResourcePaths.core = "./node_modules/dynamsoft-core/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.license = "./node_modules/dynamsoft-license/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.ddn = "./node_modules/dynamsoft-document-normalizer/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.cvr = "./node_modules/dynamsoft-capture-vision-router/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.std = "./node_modules/dynamsoft-capture-vision-std/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.dip = "./node_modules/dynamsoft-image-processing/dist/";
  Dynamsoft.Core.CoreModule.engineResourcePaths.dce = "./node_modules/dynamsoft-camera-enhancer/dist/";