dynamsoft-barcode-reader-bundle 10.4.2002 → 10.4.3100-beta-202501012302

package/README.md

@@ -21,54 +21,54 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
     - [Understand the code](#understand-the-code)
       - [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 public CDN](#use-a-public-cdn)
-      - [Host the SDK yourself (optional)](#host-the-sdk-yourself-optional)
-    - [Prepare the SDK](#prepare-the-sdk)
-      - [Specify the license](#specify-the-license)
-      - [Specify the location of the "engine" files (optional)](#specify-the-location-of-the-engine-files-optional)
-    - [Set up and start image processing](#set-up-and-start-image-processing)
-      - [Preload the module](#preload-the-module)
-      - [Create a CaptureVisionRouter object](#create-a-capturevisionrouter-object)
-      - [Connect an image source](#connect-an-image-source)
-      - [Register a result receiver](#register-a-result-receiver)
-      - [Start the process](#start-the-process)
-    - [Customize the process](#customize-the-process)
-      - [Adjust the preset template settings](#adjust-the-preset-template-settings)
-        - [Change barcode settings](#change-barcode-settings)
-        - [Retrieve the original image](#retrieve-the-original-image)
-        - [Change reading frequency to save power](#change-reading-frequency-to-save-power)
-        - [Specify a scan region](#specify-a-scan-region)
-      - [Edit the preset templates directly](#edit-the-preset-templates-directly)
-      - [Filter the results (Important)](#filter-the-results-important)
-        - [Option 1: Verify results across multiple frames](#option-1-verify-results-across-multiple-frames)
-        - [Option 2: Eliminate redundant results detected within a short time frame](#option-2-eliminate-redundant-results-detected-within-a-short-time-frame)
-      - [Add feedback](#add-feedback)
-    - [Customize the UI](#customize-the-ui)
-  - [API Documentation](#api-documentation)
-  - [System Requirements](#system-requirements)
-  - [How to Upgrade](#how-to-upgrade)
-  - [Release Notes](#release-notes)
+  - [Preparing the SDK](#preparing-the-sdk)
+    - [Step 1: Include the SDK](#step-1-include-the-sdk)
+      - [Option 1: Use a public CDN](#option-1-use-a-public-cdn)
+      - [Option 2: Host the SDK yourself (optional)](#option-2-host-the-sdk-yourself-optional)
+    - [Step 2: Prepare the SDK](#step-2-prepare-the-sdk)
+      - [1. Specify the license](#1-specify-the-license)
+      - [2. \[Optional\] Specify the location of the "engine" files](#2-optional-specify-the-location-of-the-engine-files)
+  - [Using the SDK](#using-the-sdk)
+    - [Step 1: Preload the module](#step-1-preload-the-module)
+    - [Step 2: Create a CaptureVisionRouter object](#step-2-create-a-capturevisionrouter-object)
+    - [Step 3: Connect an image source](#step-3-connect-an-image-source)
+    - [Step 4: Register a result receiver](#step-4-register-a-result-receiver)
+    - [Step 5: Start process video frames](#step-5-start-process-video-frames)
+  - [Customizing the process](#customizing-the-process)
+    - [1. Adjust the preset template settings](#1-adjust-the-preset-template-settings)
+      - [1.1. Change barcode settings](#11-change-barcode-settings)
+      - [1.2. Retrieve the original image](#12-retrieve-the-original-image)
+      - [1.3. Change reading frequency to save power](#13-change-reading-frequency-to-save-power)
+      - [1.4. Specify a scan region](#14-specify-a-scan-region)
+    - [2. Edit the preset templates directly](#2-edit-the-preset-templates-directly)
+    - [3. \[Important\] Filter the results](#3-important-filter-the-results)
+      - [Method 1: Verify results across multiple frames](#method-1-verify-results-across-multiple-frames)
+      - [Method 2: Eliminate redundant results detected within a short time frame](#method-2-eliminate-redundant-results-detected-within-a-short-time-frame)
+    - [4. Add feedback](#4-add-feedback)
+  - [Customizing the UI](#customizing-the-ui)
+  - [Documentation](#documentation)
+    - [API Reference](#api-reference)
+    - [How to Upgrade](#how-to-upgrade)
+    - [Release Notes](#release-notes)
   - [Next Steps](#next-steps)
 
 **Popular Examples**
 
-- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.20&utm_source=npm)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/angular)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/react)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/vue)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/pwa)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/read-a-drivers-license/index.html)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/fill-a-form-with-barcode-reading.html)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/use-case/show-result-texts-on-the-video.html)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/others/debug)
+- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.31&utm_source=npm)
+- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/angular)
+- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/react)
+- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/vue)
+- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.4.31&utm_source=npm)
+- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/hello-world/webview)
+- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/read-a-drivers-license/index.html?ver=10.4.31&utm_source=npm)
+- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/fill-a-form-with-barcode-reading.html?ver=10.4.31&utm_source=npm)
+- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/use-case/show-result-texts-on-the-video.html?ver=10.4.31&utm_source=npm)
+- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/others/debug)
 
 You can also:
 
-- Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.4.20&utm_source=npm)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/)
+- Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.4.31&utm_source=npm)
+- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.31/)
 
 ## Hello World - Simplest Implementation
 
@@ -76,7 +76,7 @@ Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates
 
 **Basic Requirements**
   - Internet connection
-  - [A supported browser](#system-requirements)
+  - A supported browser
   - Camera access
 
 ### Understand the code
@@ -89,7 +89,7 @@ The complete code of the "Hello World" example is shown below
 <body>
 <div id="camera-view-container" style="width: 100%; height: 60vh"></div>
 <textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
-<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
 <script>
   Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
   Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
@@ -102,8 +102,8 @@ The complete code of the "Hello World" example is shown below
     cvRouter.setInput(cameraEnhancer);
 
     const resultsContainer = document.querySelector("#results");
-    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-      if (result.barcodeResultItems.length > 0) {
+    cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
+      if (result.barcodeResultItems?.length) {
         resultsContainer.textContent = '';
         for (let item of result.barcodeResultItems) {
           resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
@@ -127,7 +127,7 @@ The complete code of the "Hello World" example is shown below
 <!--TOM: Update the code links-->
 
 <p align="center" style="text-align:center; white-space: normal; ">
-  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.20/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
+  <a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.4.31/hello-world/hello-world.html" title="Code in Github" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
   </a>
   &nbsp;
@@ -135,7 +135,7 @@ The complete code of the "Hello World" example is shown below
     <img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
   </a>
   &nbsp;
-  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.20&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
+  <a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.31&utm_source=npm" title="Run in Dynamsoft" style="text-decoration:none;">
     <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
   </a>
 </p>
@@ -182,7 +182,7 @@ The complete code of the "Hello World" example is shown below
 
 ### Run the example
 
-You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.20&utm_source=npm) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
+You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.4.31&utm_source=npm) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/). 
 
 You will be asked to allow access to your camera, after which the video will be displayed on the page. After that, you can point the camera at a barcode to read it.
 
@@ -190,125 +190,99 @@ When a barcode is decoded, you will see the result text show up under the video
 
 Alternatively, you can test locally by copying and pasting the code shown above into a local file (e.g. "hello-world.html") and opening it in your browser.
 
-*Note*:
-
-If you open the web page as `file:///` or `http://` , the camera may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) method only works in secure contexts (HTTPS), in some or all supporting browsers.
-
-To make sure your web application can access the camera, please configure your web server to support HTTPS. The following links may help.
-
-1. NGINX: [Configuring HTTPS servers](https://nginx.org/en/docs/http/configuring_https_servers.html)
-2. IIS: [How to create a Self Signed Certificate in IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/)
-3. Tomcat: [Setting Up SSL on Tomcat in 5 minutes](https://dzone.com/articles/setting-ssl-tomcat-5-minutes)
-4. Node.js: [npm tls](https://nodejs.org/docs/v0.4.1/api/tls.html)
-
-If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.4.20&utm_source=npm&product=dbr&package=js).
+> *Secure Contexts*:
+>
+> If you open the web page as `http://` , our SDK may not work correctly because the [MediaDevices: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and other methods only work in [secure contexts](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS, `localhost`, `127.0.0.1`, `file://`), in some or all supporting browsers.
+>
+> Regarding configuring https on your server, these guides for [nginx](https://nginx.org/en/docs/http/configuring_https_servers.html) / [IIS](https://aboutssl.org/how-to-create-a-self-signed-certificate-in-iis/) / [tomcat](https://dzone.com/articles/setting-ssl-tomcat-5-minutes) / [nodejs](https://nodejs.org/docs/v0.4.1/api/tls.html) might help.
+>
+> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=10.4.31&utm_source=npm&product=dbr&package=js).
 
-## Building your own page
+## Preparing the SDK
 
-### Include the SDK
+### Step 1: Include the SDK
 
-To utilize the SDK, the initial step involves including the corresponding resource files:
-
-* `core.js` encompasses common classes, interfaces, and enumerations shared across all Dynamsoft SDKs.
-* `license.js` introduces the `LicenseManager` class, which manages the licensing for all Dynamsoft SDKs.
-* `utility.js` encompasses auxiliary classes shared among all Dynamsoft SDKs.
-* `dbr.js` defines interfaces and enumerations tailored to the barcode reader module.
-* `cvr.js` introduces the `CaptureVisionRouter` class, which governs the entire image processing workflow.
-* `dce.js` comprises classes that offer camera support and basic user interface functionalities.
-
-To simplify things, starting from version 10.0.21, we introduced `dbr.bundle.js`, which combines all six of the above files. In the following chapters, we will use `dbr.bundle.js`.
-
-#### Use a public CDN
+#### Option 1: Use a public 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
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
   ```
 
 - UNPKG
 
   ```html
-  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
+  <script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
   ```
 
 - In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.
 
   ```html
-  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
+  <script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
   ```
 
   However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself.
 
-- In frameworks like React and Vue, you may want to add the package as a dependency.
+- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
 
   ```sh
-  npm i dynamsoft-barcode-reader-bundle@10.4.2002 -E
+  npm i dynamsoft-barcode-reader-bundle@10.4.3100 -E
   # or
-  yarn add dynamsoft-barcode-reader-bundle@10.4.2002 -E
+  yarn add dynamsoft-barcode-reader-bundle@10.4.3100 -E
   ```
 
   NOTE that in frameworks, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional).
 
-#### Host the SDK yourself (optional)
+#### Option 2: Host the SDK yourself (optional)
 
 Besides using the public CDN, you can also download the SDK and host its files on your own server or a commercial CDN before including it in your application.
 
-There are two options for downloading the SDK, and the usage for each is slightly different
-
 - From the website
 
-  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.20&utm_source=npm&product=dbr&package=js)
+  [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.31&utm_source=npm&product=dbr&package=js)
 
-  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`, you can typically include it like this:
+  The resources are located at path `dynamsoft/distributables/<pkg>@<version>`.
 
-  ```html
-  <script src="dynamsoft/distributables/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.js"></script>
-  ```
-
-- npm
+- From npm
 
   ```sh
-  npm i dynamsoft-barcode-reader-bundle@10.4.2002 -E
+  npm i dynamsoft-barcode-reader-bundle@10.4.3100 -E
   # Compared with using CDN, you need to set up more resources.
-  npm i dynamsoft-capture-vision-std@1.4.10 -E
-  npm i dynamsoft-image-processing@2.4.20 -E
+  npm i dynamsoft-capture-vision-std@1.4.21 -E
+  npm i dynamsoft-image-processing@2.4.31 -E
   ```
 
-  The resources are located at the path `node_modules/<pkg>`, without `@<version>`, so the script would be like:
+  The resources are located at the path `node_modules/<pkg>`, without `@<version>`. You must copy "dynamsoft-xxx" packages elsewhere and add `@<version>`. The `<version>` can be obtained from `package.json` of each package. Another thing to do is to [specify the engineResourcePaths](#2-optional-specify-the-location-of-the-engine-files) so that the SDK can correctly locate the resources.
+  > Since "node_modules" is reserved for Node.js dependencies, and in our case the package is used only as static resources, we recommend either renaming the "node_modules" folder or moving the "dynamsoft-" packages to a dedicated folder for static resources in your project to facilitate self-hosting.
 
-  ```html
-  <script src="node_modules/dynamsoft-barcode-reader-bundle/dist/dbr.bundle.js"></script>
-  ```
-  
-  Since the version tags (`@<version>`) are missing, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional) so that the SDK can find the resources correctly.
+You can typically include SDK like this:
 
-  > To avoid confusion, we suggest renaming "node_modules" or moving "dynamsoft-" packages elsewhere for self-hosting, as "node_modules" is reserved for Node.js dependencies.
+```html
+<script src="path/to/dynamsoft-barcode-reader-bundle@10.4.3100/dist/dbr.bundle.js"></script>
+```
 
 *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)
-     2. [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap)
-     3. [Nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types)
+  2. Manually define the mimetype on your server. You can refer to the guides for [apache](https://developer.mozilla.org/en-US/docs/Learn/Server-side/Apache_Configuration_htaccess#media_types_and_character_encodings) / [IIS](https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap) / [nginx](https://www.nginx.com/resources/wiki/start/topics/examples/full/#mime-types).
 
 * 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).
 
-### Prepare the SDK
+### Step 2: Prepare the SDK
 
 Before using the SDK, you need to configure a few things.
 
-#### Specify the license
+#### 1. Specify the license
 
 To enable the SDK's functionality, you must provide a valid license. Utilize the API function initLicense to set your license key.
 
@@ -316,24 +290,30 @@ To enable the SDK's functionality, you must provide a valid license. Utilize the
 Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
 ```
 
-As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.4.20&utm_source=npm&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
+As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=10.4.31&utm_source=npm&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
 
 > Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.
 
-#### Specify the location of the "engine" files (optional)
+#### 2. [Optional] 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`, `dbr.js` are compiled into another file.
+This is usually only required with frameworks like Angular, React or Vue.
 
-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 purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.).
 
-```javascript
-//The following code uses the jsDelivr CDN as an example, feel free to change it to your own location of these files
+```ts
+// in framework
+import { CoreModule } from "dynamsoft-barcode-reader-bundle";
 CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
 ```
+```js
+// in pure js
+Dynamsoft.Core.CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
+```
+These code uses the jsDelivr CDN as an example, feel free to change it to your own location.
 
-### Set up and start image processing
+## Using the SDK
 
-#### Preload the module
+### Step 1: Preload the module
 
 The image processing logic is encapsulated within .wasm library files, and these files may require some time for downloading. To enhance the speed, we advise utilizing the following method to preload the libraries.
 
@@ -342,7 +322,7 @@ The image processing logic is encapsulated within .wasm library files, and these
 await Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
 ```
 
-#### Create a CaptureVisionRouter object
+### Step 2: Create a CaptureVisionRouter object
 
 To use the SDK, we first create a `CaptureVisionRouter` object.
 
@@ -376,7 +356,7 @@ document.getElementById('btn-scan').addEventListener('click', async () => {
 });
 ```
 
-#### Connect an image source
+### Step 3: Connect an image source
 
 The `CaptureVisionRouter` object, denoted as `cvRouter`, is responsible for handling images provided by an image source. In our scenario, we aim to detect barcodes directly from a live video stream. To facilitate this, we initialize a `CameraEnhancer` object, identified as `cameraEnhancer`, which is specifically designed to capture image frames from the video feed and subsequently forward them to `cvRouter`.
 
@@ -393,15 +373,16 @@ document.querySelector("#camera-view-container").append(cameraView.getUIElement(
 cvRouter.setInput(cameraEnhancer);
 ```
 
-#### Register a result receiver
+### Step 4: Register a result receiver
 
-Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:
+Once the image processing is complete, the results are sent to all the registered `CapturedResultReceiver` objects. Each `CapturedResultReceiver` object may encompass one or multiple callback functions associated with various result types. This time we use `onCapturedResultReceived`:
+<!--In our particular case, our focus is on identifying barcodes within the images, so it's sufficient to define the callback function `onDecodedBarcodesReceived`:-->
 
 ```javascript
 const resultsContainer = document.querySelector("#results");
 const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
-resultReceiver.onDecodedBarcodesReceived = (result) => {
-  if (result.barcodeResultItems.length > 0) {
+resultReceiver.onCapturedResultReceived = (result) => {
+  if (result.barcodeResultItems?.length) {
     resultsContainer.textContent = '';
     for (let item of result.barcodeResultItems) {
       // In this example, the barcode results are displayed on the page below the video.
@@ -416,8 +397,8 @@ You can also write code like this. It is the same.
 
 ```javascript
 const resultsContainer = document.querySelector("#results");
-cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-  if (result.barcodeResultItems.length > 0) {
+cvRouter.addResultReceiver({ onCapturedResultReceived: (result) => {
+  if (result.barcodeResultItems?.length) {
     resultsContainer.textContent = '';
     for (let item of result.barcodeResultItems) {
       // In this example, the barcode results are displayed on the page below the video.
@@ -429,7 +410,7 @@ cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
 
 Check out [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/captured-result-receiver.html) for more information.
 
-#### Start the process
+### Step 5: Start process video frames
 
 With the setup now complete, we can proceed to process the images in two straightforward steps:
 
@@ -458,13 +439,13 @@ await cvRouter.startCapturing("ReadSingleBarcode");
 
 Read more on the [preset CaptureVisionTemplates](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/preset-templates.html).
 
-### Customize the process
+## Customizing the process
 
-#### Adjust the preset template settings
+### 1. Adjust the preset template settings
 
 When making adjustments to some basic tasks, we often only need to modify [SimplifiedCaptureVisionSettings](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/interfaces/simplified-capture-vision-settings.html).
 
-##### Change barcode settings
+#### 1.1. Change barcode settings
 
 The preset templates can be updated to meet different requirements. For example, the following code limits the barcode format to QR code.
 
@@ -478,7 +459,7 @@ await cvRouter.startCapturing("ReadSingleBarcode");
 
 For a list of adjustable barcode settings, check out [SimplifiedBarcodeReaderSettings](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/interfaces/simplified-barcode-reader-settings.html).
 
-##### Retrieve the original image
+#### 1.2. Retrieve the original image
 
 Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
 
@@ -506,8 +487,7 @@ Please be aware that it is necessary to update the `CapturedResultReceiver` obje
 ```javascript
 const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
 resultReceiver.onCapturedResultReceived = (result) => {
-  let barcodes = result.items.filter(item => item.type === EnumCRIT.CRIT_BARCODE);
-  if (barcodes.length > 0) {
+  if (result.barcodeResultItems?.length) {
     // Use a filter to get the image on which barcodes are found.
     let image = result.items.filter(
       item => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE
@@ -516,7 +496,7 @@ resultReceiver.onCapturedResultReceived = (result) => {
 };
 ```
 
-##### Change reading frequency to save power
+#### 1.3. Change reading frequency to save power
 
 The SDK is initially configured to process images sequentially without any breaks. Although this setup maximizes performance, it can lead to elevated power consumption, potentially causing the device to overheat. In many cases, it's possible to reduce the reading speed while still satisfying business requirements. The following code snippet illustrates how to adjust the SDK to process an image every 500 milliseconds:
 
@@ -529,7 +509,7 @@ await cvRouter.updateSettings("ReadSingleBarcode", settings);
 await cvRouter.startCapturing("ReadSingleBarcode");
 ```
 
-##### Specify a scan region
+#### 1.4. Specify a scan region
 
 We can specify a scan region to allow the SDK to process only part of the image, improving processing speed. The code snippet below demonstrates how to do this using the `cameraEnhancer` image source.
 
@@ -588,11 +568,11 @@ await cvRouter.startCapturing("ReadSingleBarcode");
 ```
 -->
 
-#### Edit the preset templates directly
+### 2. Edit the preset templates directly
 
 The preset templates have many more settings that can be customized to suit your use case best. If you [download the SDK from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/), you can find the templates under
 
-* "/dynamsoft-barcode-reader-js-10.4.2002/dynamsoft/templates/"
+* "/dynamsoft-barcode-reader-js-10.4.3100/dynamsoft/templates/"
 
 Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
 
@@ -601,11 +581,11 @@ await cvRouter.initSettings("PATH-TO-THE-FILE"); // E.g. "https://your-website/R
 await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.
 ```
 
-#### Filter the results (Important)
+### 3. [Important] Filter the results
 
-While processing video frames, it's common for the same barcode to be detected multiple times. To enhance the user experience, we can use [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object, having two options currently at our disposal:
+When processing video frames, the same barcode is often detected multiple times. To improve the user experience, we can use the [MultiFrameResultCrossFilter](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/utility/multi-frame-result-cross-filter.html) object. This object provides two methods for handling duplicate detections, which can be used independently or together, depending on what best suits your application needs:
 
-##### Option 1: Verify results across multiple frames
+#### Method 1: Verify results across multiple frames
 
 ```js
 let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
@@ -617,7 +597,7 @@ await cvRouter.addResultFilter(filter);
 
 * `enableResultCrossVerification` was designed to cross-validate the outcomes across various frames in a video streaming scenario, enhancing the reliability of the final results. This validation is particularly crucial for barcodes with limited error correction capabilities, such as 1D codes.
 
-##### Option 2: Eliminate redundant results detected within a short time frame
+#### Method 2: Eliminate redundant results detected within a short time frame
 
 ```js
 let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
@@ -651,7 +631,7 @@ filter.setDuplicateForgetTime(5000);
 await cvRouter.addResultFilter(filter);
 ```
 
-#### Add feedback
+### 4. Add feedback
 
 When a barcode is detected within the video stream, its position is immediately displayed within the video. Furthermore, utilizing the "Dynamsoft Camera Enhancer" SDK, we can introduce feedback mechanisms, such as emitting a "beep" sound or triggering a "vibration".
 
@@ -667,14 +647,36 @@ resultReceiver.onDecodedBarcodesReceived = (result) => {
 cvRouter.addResultReceiver(resultReceiver);
 ```
 
-### Customize the UI
+## Customizing the UI
+
+```javascript
+// Create a CameraView instance with default settings
+let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
+// Create a CameraView instance with a specified HTML file path, typically a local or remote URL
+let cameraView1 = await Dynamsoft.DCE.CameraView.createInstance('@engineResourcePath/dce.mobile-native.ui.html');
+// Create a CameraView instance within a specified DOM element
+let cameraView2 = await Dynamsoft.DCE.CameraView.createInstance(document.getElementById('my-ui'));
+// Create a CameraView instance using a custom UI file path
+let cameraView3 = await Dynamsoft.DCE.CameraView.createInstance('url/to/my/ui.html');
+
+// Get the UI element associated with the cameraView instance
+let uiElement = cameraView.getUIElement();
+// Remove the camera selection dropdown from the CameraView's UI element
+uiElement.shadowRoot.querySelector('.dce-sel-camera').remove();
+// Remove the resolution selection dropdown from the CameraView's UI element
+uiElement.shadowRoot.querySelector('.dce-sel-resolution').remove();
+```
 
 The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on how to [customize the UI](https://www.dynamsoft.com/barcode-reader/docs/core/programming/features/ui-customization-js.html?lang=js).
 
-## API Documentation
+## Documentation
+
+### API Reference
 
 You can check out the detailed documentation about the APIs of the SDK at
-[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.2002](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.2002).
+[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.3100](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=10.4.3100).
+
+<!--  Compatibility is basically not an issue. Pls remove to another place
 
 ## System Requirements
 
@@ -714,18 +716,20 @@ The following table is a list of supported browsers based on the above requireme
 
 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.
 
-## How to Upgrade
+-->
+
+### How to Upgrade
 
-If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/index.html?ver=10.4.2002&utm_source=npm).
+If you want to upgrade the SDK from an old version to a newer one, please see [how to upgrade](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/upgrade-guide/index.html?ver=10.4.3100&utm_source=npm).
 
-## Release Notes
+### Release Notes
 
-Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.4.20&utm_source=npm).
+Learn about what are included in each release at [https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/release-notes/index.html?ver=10.4.31&utm_source=npm).
 
 ## Next Steps
 
 Now that you have got the SDK integrated, you can choose to move forward in the following directions
 
 1. Learn how to [Use in Framework](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=10.4.20)
-3. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.4.2002)
+2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=10.4.31)
+3. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=10.4.3100)