+
+
+
+
\ No newline at end of file
diff --git a/programming/javascript/samples-demos/index.md b/programming/javascript/samples-demos/index.md
index 0c466488..17a9e31f 100644
--- a/programming/javascript/samples-demos/index.md
+++ b/programming/javascript/samples-demos/index.md
@@ -109,6 +109,14 @@ needAutoGenerateSidebar: false
and simulate a search from a product database.">Scan and Search
+
+
+ BarcodeScanner API Samples
+
+
+ Scan Single Barcode
+
+
+ Hello World
+
+
+ Scan and Search
+
+
+
+
+
+ 
)
)
)Scan Multiple Barcodes
+
+
+ Hello World
+
+
+
+
+
+
+ Foundational API Samples
+
+
+ Hello World
+
+
+ Hello
+ World
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
)
)Use Case
+
+
+
+
+
+
+ Others
+
+
+
+ Official Online Demo
+
+
+
+Pick One to Fill
+
+
+
+ Batch Inventory
+
+
@@ -294,6 +306,9 @@ needAutoGenerateSidebar: false
+
Others
diff --git a/programming/javascript/upgrade-guide/10to11.md b/programming/javascript/upgrade-guide/10to11.md
index a8244089..e036d73c 100644
--- a/programming/javascript/upgrade-guide/10to11.md
+++ b/programming/javascript/upgrade-guide/10to11.md
@@ -14,10 +14,10 @@ permalink: /programming/javascript/upgrade-guide/10to11.html
To use version 11, include the following script in your HTML:
```html
-
+
```
-## APIs changes introduced in v11.0.3000
+## APIs changes introduced in v11
### BarcodeScanner API Changes
diff --git a/programming/javascript/user-guide/barcode-scanner-customization.md b/programming/javascript/user-guide/barcode-scanner-customization.md
index 792a8a69..507e5342 100644
--- a/programming/javascript/user-guide/barcode-scanner-customization.md
+++ b/programming/javascript/user-guide/barcode-scanner-customization.md
@@ -3,7 +3,7 @@ layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: true
-title: Customizations - Dynamsoft Barcode Scanner v11.0.3000 JavaScript Edition
+title: Customizations - Dynamsoft Barcode Scanner v11.0.6000 JavaScript Edition
keywords: Documentation, Barcode Scanner, Dynamsoft Barcode Scanner JavaScript Edition, customization
description: Dynamsoft Barcode Scanner customization
---
@@ -101,7 +101,12 @@ Here is a quick breakdown of the `MULTI_UNIQUE` UI elements of the `BarcodeResul
### Manually modify the UI file
-Another way to fully customize the UI is by directly editing the `.xml` file. In the `dist/` directory, you'll find the `barcode-scanner.ui.xml` file, which is the default UI for the `BarcodeScanner`. You can make a copy of it and apply your own modifications. For example, to double the size of the `UploadImage` icon, you can edit the file like this:
+Another way to fully customize the UI is by directly editing the `.xml` file. In the `dist/` directory, you'll find the `barcode-scanner.ui.xml` file, which is the default UI for the `BarcodeScanner`.
+
+> [!NOTE]
+> Although it is essentially HTML, using a .xml extension can help prevent compatibility issues with the Live Server plugin.
+
+You can make a copy of it and apply your own modifications. For example, to double the size of the `UploadImage` icon, you can edit the file like this:
```xml
@@ -131,7 +136,7 @@ Integrating `BarcodeScanner` into frameworks like `Angular`, `React`, and `Vue`
Open the terminal from your project root and install **Dynamsoft Barcode Reader SDK** with the following command:
```sh
-npm install dynamsoft-barcode-reader-bundle@11.0.3000 -E
+npm install dynamsoft-barcode-reader-bundle@11.0.6000 -E
```
### Component for video decoding
@@ -159,10 +164,10 @@ Below is an example using the official CDN — feel free to replace it with your
// Configures the paths where the .wasm files and other necessary resources for modules are located.
engineResourcePaths: {
// Using jsDelivr CDN as an example
- rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/",
+ rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/",
},
// Path to the UI (.xml template file).
- uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/barcode-scanner.ui.xml",
+ uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/barcode-scanner.ui.xml",
};
```
diff --git a/programming/javascript/user-guide/barcode-scanner-v11.0.3000.md b/programming/javascript/user-guide/barcode-scanner-v11.0.3000.md
new file mode 100644
index 00000000..b6e4977b
--- /dev/null
+++ b/programming/javascript/user-guide/barcode-scanner-v11.0.3000.md
@@ -0,0 +1,230 @@
+---
+layout: default-layout
+needAutoGenerateSidebar: true
+needGenerateH3Content: true
+noTitleIndex: true
+title: User Guide - Dynamsoft Barcode Scanner v11.0.3000 JavaScript Edition
+keywords: Documentation, Barcode Scanner, Dynamsoft Barcode Scanner JavaScript Edition,
+description: Dynamsoft Barcode Scanner User Guide
+---
+
+# Build a Web-Based Barcode Scanner Using Just a Few Lines of JavaScript
+
+This user guide provides a step-by-step walkthrough of a "Hello World" web application using the `BarcodeScanner` JavaScript Edition.
+
+The `BarcodeScanner` class offers the following features:
+
+- High-level APIs that deliver core functionality with a single line of code.
+
+- Pre-built UI components for fast and easy integration.
+
+- Intuitive configuration objects that streamline both algorithm and UI setup.
+
+We recommend using this guide as a reference when creating your own application. If you are looking for a fully customizable barcode decoding library, you are welcome to use the [Foundational APIs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html). Before starting, ensure the **basic requirements** are met.
+
+
+
+- Internet connection
+- A supported browser
+- Camera access
+
+> [!TIP]
+> Please refer to [system requirements](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/faq/system-requirement.html) for more details.
+
+## License
+
+When getting started with Barcode Scanner, we recommend getting your own 30-day trial license.
+
+
+
+{% include trialLicense.html %}
+
+
+
+## Quick Start: Hello World Example
+
+```html
+
+
+
+
+
+
+
+```
+
+
+
+### Step 1: Setting up the HTML and Including the Barcode Scanner
+
+As outlined earlier, this guide will help you create a simple Hello World barcode scanning application using vanilla JavaScript. The full sample code is also available in the [GitHub repository](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.30).
+
+The first step before writing the code is to include the SDK in your application. You can simply include the SDK by using the precompiled script.
+
+```html
+
+
+
+
+
+
+```
+
+In this example, we include the precompiled Barcode Scanner SDK script via public CDN in the header.
+
+
+
+
+`, without `@`. You can copy it elsewhere and add `@` tag.
+
+ > [!IMPORTANT]
+ > 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.
+
+You can typically include SDK like this:
+
+```html
+
+```
+
+
+
+
+Barcode Scanner comes with a **Ready-to-Use UI**. When the Barcode Scanner launches, it creates a container which it populates with the **Ready-to-Use UI**.
+
+### Step 2: Initializing the Barcode Scanner
+
+```js
+// Initialize the Dynamsoft Barcode Scanner
+const barcodescanner = new Dynamsoft.BarcodeScanner({
+ // Please don't forget to replace YOUR_LICENSE_KEY_HERE
+ license: "YOUR_LICENSE_KEY_HERE",
+});
+```
+
+This is the **simplest** way to initialize the Barcode Scanner. The configuration object must include a valid **license** key. Without it, the scanner will fail to launch and display an error. For help obtaining a license, see the [licensing](#license) section.
+
+> [!TIP]
+> By default, the `BarcodeScanner` scans a single barcode at a time. However, it also supports a `MULTI_UNIQUE` scanning mode, which continuously scans and accumulates unique results in real time. You can enable this mode by modifying the [`BarcodeScannerConfig`](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) as follows:
+
+```js
+// Initialize the Dynamsoft Barcode Scanner in MULTI_UNIQUE mode
+const barcodescanner = new Dynamsoft.BarcodeScanner({
+ license: "YOUR_LICENSE_KEY_HERE",
+ scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
+});
+```
+
+### Step 3: Launching the Barcode Scanner
+
+```js
+(async () => {
+ // Launch the scanner and wait for the result
+ const result = await barcodescanner.launch();
+ // Display the first detected barcode's text in an alert
+ if (result.barcodeResults.length) {
+ alert(result.barcodeResults[0].text);
+ }
+})();
+```
+
+Now that the Barcode Scanner has been initialized and configured, it is ready to be launched! Upon launch, the Barcode Scanner presents the main **`BarcodeScannerView`** UI in its container on the page, and is ready to start scanning. By default, we use the `SINGLE` scanning mode, which means only one decoding result will be included in the final result. In the code above, we directly alerted the successfully decoded barcode text on the page.
+
+> [!NOTE]
+> In the Hello World sample, after a successfully decoding process, the scanner closes and the user is met with an empty page. In order to open the scanner again, the user must refresh the page. You may choose to implement a more user-friendly behavior in a production environment, such as presenting the user with an option to re-open the Barcode Scanner upon closing it.
+
+## Next Steps
+
+Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner
+
+1. Learn how to [Customize the Barcode Scanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html)
+2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.3000)
+3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.0.3000)
diff --git a/programming/javascript/user-guide/barcode-scanner.md b/programming/javascript/user-guide/barcode-scanner.md
index b6e4977b..8461318a 100644
--- a/programming/javascript/user-guide/barcode-scanner.md
+++ b/programming/javascript/user-guide/barcode-scanner.md
@@ -3,7 +3,7 @@ layout: default-layout
needAutoGenerateSidebar: true
needGenerateH3Content: true
noTitleIndex: true
-title: User Guide - Dynamsoft Barcode Scanner v11.0.3000 JavaScript Edition
+title: User Guide - Dynamsoft Barcode Scanner v11.0.6000 JavaScript Edition
keywords: Documentation, Barcode Scanner, Dynamsoft Barcode Scanner JavaScript Edition,
description: Dynamsoft Barcode Scanner User Guide
---
@@ -66,7 +66,7 @@ If you are fully satisfied with the solution and would like to move forward with
-
+
+
```
@@ -127,21 +127,21 @@ The simplest way to include the SDK is to use either the [**jsDelivr**](https://
- jsDelivr
```html
-
+
```
- UNPKG
```html
-
+
```
When using a framework such as **React**, **Vue** or **Angular**, we recommend adding the package as a dependency using a package manager such as **npm** or **yarn**:
```sh
- npm i dynamsoft-barcode-reader-bundle@11.0.3000
+ npm i dynamsoft-barcode-reader-bundle@11.0.6000
# or
- yarn add dynamsoft-barcode-reader-bundle@11.0.3000
+ yarn add dynamsoft-barcode-reader-bundle@11.0.6000
```
As for package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
@@ -154,14 +154,14 @@ Alternatively, you may choose to download the SDK and host the files on your own
- From the website
- [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.30&utm_source=guide&product=dbr&package=js)
+ [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.60&utm_source=guide&product=dbr&package=js)
The resources are located in the `./dist/` directory.
- From npm
```sh
- npm i dynamsoft-barcode-reader-bundle@11.0.3000
+ npm i dynamsoft-barcode-reader-bundle@11.0.6000
```
The resources are located at the path `node_modules/`, without `@`. You can copy it elsewhere and add `@` tag.
@@ -172,7 +172,7 @@ Alternatively, you may choose to download the SDK and host the files on your own
You can typically include SDK like this:
```html
-
+
```
@@ -226,5 +226,5 @@ Now that the Barcode Scanner has been initialized and configured, it is ready to
Now that you've implemented the basic functionality, here are some recommended next steps to further explore the capabilities of the Barcode Scanner
1. Learn how to [Customize the Barcode Scanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html)
-2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.3000)
-3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.0.3000)
+2. Check out the [Official Samples and Demo](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/samples-demos/index.html?ver=11.0.6000)
+3. Learn about the [APIs of BarcodeScanner](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?ver=11.0.6000)
diff --git a/programming/javascript/user-guide/index-v11.0.3000.md b/programming/javascript/user-guide/index-v11.0.3000.md
new file mode 100644
index 00000000..661ef324
--- /dev/null
+++ b/programming/javascript/user-guide/index-v11.0.3000.md
@@ -0,0 +1,754 @@
+---
+layout: default-layout
+title: v11.0.3000 User Guide - Dynamsoft Barcode Reader JavaScript Edition
+description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
+keywords: user guide, javascript, js
+breadcrumbText: User Guide
+noTitleIndex: true
+needGenerateH3Content: true
+needAutoGenerateSidebar: true
+schema: schemas/dynamsoft-facilitates-mit-research-schema.json
+---
+
+
+
+# Barcode Reader for Your Website - User Guide
+
+[Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) is equipped with industry-leading algorithms for exceptional speed, accuracy and read rates in barcode reading. Using its well-designed API, you can turn your web page into a barcode scanner with just a few lines of code. Once the DBR-JS SDK gets integrated into your web page, your users can access a camera via the browser and read barcodes directly from its video input.
+
+
+
+In this guide, you will learn step by step on how to integrate the DBR-JS SDK into your website.
+
+Table of Contents
+
+- [Barcode Reader for Your Website - User Guide](#barcode-reader-for-your-website---user-guide)
+ - [Hello World - Simplest Implementation](#hello-world---simplest-implementation)
+ - [Understand the code](#understand-the-code)
+ - [About the code](#about-the-code)
+ - [Run the example](#run-the-example)
+ - [Preparing the SDK](#preparing-the-sdk)
+ - [Step 1: Include the SDK](#step-1-include-the-sdk)
+ - [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/v11.0.30/foundational-api-samples/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.0.30&utm_source=guide)
+- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/angular)
+- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/react)
+- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/vue)
+- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html?ver=11.0.30&utm_source=guide)
+- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.30/foundational-api-samples/hello-world/webview)
+- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-a-drivers-license/index.html?ver=11.0.30&utm_source=guide)
+- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html?ver=11.0.30&utm_source=guide)
+- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/show-result-texts-on-the-video.html?ver=11.0.30&utm_source=guide)
+- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/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=11.0.30&utm_source=guide)
+- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.30/)
+
+## Hello World - Simplest Implementation
+
+Let's start with the "Hello World" example of the DBR-JS SDK which demonstrates how to use the minimum code to enable a web page to read barcodes from a live video stream.
+
+**Basic Requirements**
+
+ - Internet connection
+ - A supported browser
+ - Camera access
+
+> Please refer to [system requirements](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/faq/system-requirement.html) for more details.
+
+### Understand the code
+
+The complete code of the "Hello World" example is shown below
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+> Don't want to deal with too many details? You can get a quick start with the [BarcodeScanner >>](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner.html)
+> ```js
+> // Scan instantly with a single line of code!
+> new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults[0].text));
+> ```
+
+-----
+
+#### About the code
+
+- `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. Note that the string "**DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9**" used in this example points to an online license that requires a network connection to work. Read more on [Specify the license](#1-specify-the-license).
+
+- `Dynamsoft.Core.CoreModule.loadWasm()`: This is an optional code. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
+
+- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps:
+ - **Retrieve Images from the Image Source**
+ - `cvRouter` connects to the image source through the [ImageSourceAdapter](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`.
+ ```js
+ cvRouter.setInput(cameraEnhancer);
+ ```
+ > The image source in our case is a [CameraEnhancer](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/user-guide/index.html) object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView)`
+ - **Coordinate Image-Processing Tasks**
+ - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" in the method `startCapturing()`.
+ ```js
+ cvRouter.startCapturing("ReadSingleBarcode");
+ ```
+ - **Dispatch Results to Listening Objects**
+ - The processing results are returned through the [CapturedResultReceiver](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object is registered to `cvRouter` via the method `addResultReceiver()`. For more information, please check out [Register a result receiver](#step-4-register-a-result-receiver).
+ ```js
+ cvRouter.addResultReceiver({/*The-CapturedResultReceiver-Object"*/});
+ ```
+ - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a [filter](#3-important-filter-the-results) with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`.
+ ```js
+ cvRouter.addResultFilter(filter);
+ ```
+
+> Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router).
+
+### 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=11.0.30&utm_source=guide) 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.
+
+When a barcode is decoded, you will see the result text show up under the video and the barcode location will be highlighted in the video feed.
+
+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.
+
+> *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=11.0.30&utm_source=guide&product=dbr&package=js).
+
+## Preparing the SDK
+
+### Step 1: Include the SDK
+
+
+
+
+
+@`.
+
+- From npm
+
+ ```sh
+ npm i dynamsoft-barcode-reader-bundle@11.0.3000 -E
+ # Compared with using CDN, you need to set up more resources.
+ 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/`, without `@`. You must copy "dynamsoft-xxx" packages elsewhere and add `@`. The `` 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.
+
+You can typically include SDK like this:
+
+```html
+
+```
+
+
+
+
+*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 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.
+
+ ```
+ Cache-Control: max-age=31536000
+ ```
+
+ Reference: [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
+
+### Step 2: Prepare the SDK
+
+Before using the SDK, you need to configure a few things.
+
+#### 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.
+
+```javascript
+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 Request a Trial License 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.
+
+#### 2. [Optional] Specify the location of the "engine" files
+
+This step is generally necessary when utilizing frameworks such as Angular, React, Vue, or when managing the hosting of resource files yourself.
+
+The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.wasm.js and \*.wasm, etc.).
+
+```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.
+
+## Using the SDK
+
+### 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.
+
+```js
+// Preload the .wasm files
+await Dynamsoft.Core.CoreModule.loadWasm();
+```
+
+### Step 2: Create a CaptureVisionRouter object
+
+To use the SDK, we first create a `CaptureVisionRouter` object.
+
+```javascript
+Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
+
+let cvRouter = null;
+try {
+ cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+} catch (ex) {
+ console.error(ex);
+}
+```
+
+*Tip*:
+
+When creating a `CaptureVisionRouter` 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 `pCvRouter` in the following code:
+
+```javascript
+Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
+
+let pCvRouter = null; // The helper variable which is a promise of cvRouter
+let cvRouter = null;
+
+document.getElementById('btn-scan').addEventListener('click', async () => {
+ try {
+ cvRouter = await (pCvRouter = pCvRouter || Dynamsoft.CVR.CaptureVisionRouter.createInstance());
+ } catch (ex) {
+ console.error(ex);
+ }
+});
+```
+
+### 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`.
+
+To enable video streaming on the webpage, we create a `CameraView` object referred to as `cameraView`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
+
+```html
+
+```
+
+```javascript
+let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
+let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
+document.querySelector("#camera-view-container").append(cameraView.getUIElement());
+cvRouter.setInput(cameraEnhancer);
+```
+
+### 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. This time we use `onCapturedResultReceived`:
+
+
+```javascript
+const resultsContainer = document.querySelector("#results");
+const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
+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.
+ resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+ }
+ }
+};
+cvRouter.addResultReceiver(resultReceiver);
+```
+
+You can also write code like this. It is the same.
+
+```javascript
+const resultsContainer = document.querySelector("#results");
+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.
+ resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+ }
+ }
+}});
+```
+
+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.
+
+### Step 5: Start process video frames
+
+With the setup now complete, we can proceed to process the images in two straightforward steps:
+
+1. Initiate the image source to commence image acquisition. In our scenario, we invoke the `open()` method on `cameraEnhancer` to initiate video streaming and simultaneously initiate the collection of images. These collected images will be dispatched to `cvRouter` as per its request.
+2. Define a preset template to commence image processing. In our case, we utilize the "ReadSingleBarcode" template, specifically tailored for processing images containing a single barcode.
+
+```javascript
+await cameraEnhancer.open();
+await cvRouter.startCapturing("ReadSingleBarcode");
+```
+
+*Note*:
+
+* `cvRouter` is engineered to consistently request images from the image source.
+* Various preset templates are at your disposal for barcode reading:
+
+| Template Name | Function Description |
+| ------------------------------ | -------------------------------------------------------------- |
+| **ReadBarcodes_Default** | Scans multiple barcodes by default setting. |
+| **ReadSingleBarcode** | Quickly scans a single barcode. |
+| **ReadBarcodes_SpeedFirst** | Prioritizes speed in scanning multiple barcodes. |
+| **ReadBarcodes_ReadRateFirst** | Maximizes the number of barcodes read. |
+| **ReadBarcodes_Balance** | Balances speed and quantity in reading multiple barcodes. |
+| **ReadDenseBarcodes** | Specialized in reading barcodes with high information density. |
+| **ReadDistantBarcodes** | Capable of reading barcodes from extended distances. |
+
+Read more on the [preset CaptureVisionTemplates](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/capture-vision-router/preset-templates.html).
+
+## Customizing the process
+
+### 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).
+
+#### 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.
+
+```javascript
+let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
+settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
+await cvRouter.updateSettings("ReadSingleBarcode", settings);
+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) and [EnumBarcodeFormat](https://www.dynamsoft.com/capture-vision/docs/core/enums/barcode-reader/barcode-format.html?lang=js&product=dbr).
+
+#### 1.2. Retrieve the original image
+
+Additionally, we have the option to modify the template to retrieve the original image containing the barcode.
+
+```javascript
+let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
+settings.outputOriginalImage = true;
+await cvRouter.updateSettings("ReadSingleBarcode", settings);
+await cvRouter.startCapturing("ReadSingleBarcode");
+```
+
+Limit the barcode format to QR code, and retrieve the original image containing the barcode, at the same time.
+
+```javascript
+let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
+settings.outputOriginalImage = true;
+settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
+await cvRouter.updateSettings("ReadSingleBarcode", settings);
+await cvRouter.startCapturing("ReadSingleBarcode");
+```
+
+Please be aware that it is necessary to update the `CapturedResultReceiver` object to obtain the original image. For instance:
+
+```javascript
+const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
+resultReceiver.onCapturedResultReceived = (result) => {
+ 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
+ )[0].imageData;
+ }
+};
+```
+
+#### 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:
+
+> Please bear in mind that in the following code, if an image's processing time is shorter than 500 milliseconds, the SDK will wait for the full 500 milliseconds before proceeding to process the next image. Conversely, if an image's processing time exceeds 500 milliseconds, the subsequent image will be processed immediately upon completion.
+
+```javascript
+let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
+settings.minImageCaptureInterval = 500;
+await cvRouter.updateSettings("ReadSingleBarcode", settings);
+await cvRouter.startCapturing("ReadSingleBarcode");
+```
+
+#### 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.
+
+```javascript
+cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
+// In this example, we set the scan region to cover the central 25% of the image.
+cameraEnhancer.setScanRegion({
+ x: 25,
+ y: 25,
+ width: 50,
+ height: 50,
+ isMeasuredInPercentage: true,
+});
+```
+
+*Note*:
+
+1. By configuring the region at the image source, images are cropped before processing, removing the need to adjust any further processing settings.
+2. `cameraEnhancer` enhances interactivity by overlaying a mask on the video, clearly marking the scanning region.
+
+*See Also*:
+
+[CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
+
+
+
+
+
+
+### 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-11.0.3000/dynamsoft/templates/"
+
+Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
+
+```javascript
+await cvRouter.initSettings("PATH-TO-THE-FILE"); // E.g. "https://your-website/ReadSingleBarcode.json")
+await cvRouter.startCapturing("ReadSingleBarcode"); // Make sure the name matches one of the CaptureVisionTemplates in the template JSON file.
+```
+
+### 3. [Important] Filter the results
+
+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:
+
+#### Method 1: Verify results across multiple frames
+
+```js
+let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
+filter.enableResultCrossVerification("barcode", true);
+await cvRouter.addResultFilter(filter);
+```
+
+*Note*:
+
+* `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.
+
+#### Method 2: Eliminate redundant results detected within a short time frame
+
+```js
+let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
+filter.enableResultDeduplication("barcode", true);
+await cvRouter.addResultFilter(filter);
+```
+
+*Note*:
+
+* `enableResultDeduplication` was designed to prevent high usage in video streaming scenarios, addressing the repetitive processing of the same code within a short period of time.
+
+Initially, the filter is set to forget a result 3 seconds after it is first received. During this time frame, if an identical result appears, it is ignored.
+
+> It's important to know that in version 9.x or earlier, the occurrence of an identical result would reset the timer, thus reinitiating the 3-second count at that point. However, in version 10.2.10 and later, an identical result no longer resets the timer but is instead disregarded, and the duration count continues uninterrupted.
+
+Under certain circumstances, this duration can be extended with the method `setDuplicateForgetTime()`.
+
+```js
+let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
+filter.setDuplicateForgetTime("barcode", 5000); // Extend the duration to 5 seconds.
+await cvRouter.addResultFilter(filter);
+```
+
+You can also enable both options at the same time:
+
+```js
+let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
+filter.enableResultCrossVerification("barcode", true);
+filter.enableResultDeduplication("barcode", true);
+filter.setDuplicateForgetTime("barcode", 5000);
+await cvRouter.addResultFilter(filter);
+```
+
+### 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".
+
+The following code snippet adds a "beep" sound for when a barcode is found:
+
+```js
+const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
+resultReceiver.onDecodedBarcodesReceived = (result) => {
+ if (result.barcodeResultItems.length > 0) {
+ Dynamsoft.DCE.Feedback.beep();
+ }
+};
+cvRouter.addResultReceiver(resultReceiver);
+```
+
+## 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).
+
+## 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=11.0.3000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.0.3000).
+
+
+
+### 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=11.0.3000&utm_source=guide).
+
+### 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=11.0.30&utm_source=guide).
+
+## 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=11.0.30)
+3. Learn about the [APIs of the SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?ver=11.0.3000)
diff --git a/programming/javascript/user-guide/index.md b/programming/javascript/user-guide/index.md
index 6dcb6eff..3faa6793 100644
--- a/programming/javascript/user-guide/index.md
+++ b/programming/javascript/user-guide/index.md
@@ -1,6 +1,6 @@
---
layout: default-layout
-title: v11.0.3000 User Guide - Dynamsoft Barcode Reader JavaScript Edition
+title: v11.0.6000 User Guide - Dynamsoft Barcode Reader JavaScript Edition
description: This is the user guide of Dynamsoft Barcode Reader JavaScript SDK.
keywords: user guide, javascript, js
breadcrumbText: User Guide
@@ -64,21 +64,21 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
**Popular Examples**
-- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.0.30&utm_source=guide)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/angular)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/react)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/vue)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html?ver=11.0.30&utm_source=guide)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.30/foundational-api-samples/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-a-drivers-license/index.html?ver=11.0.30&utm_source=guide)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html?ver=11.0.30&utm_source=guide)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/show-result-texts-on-the-video.html?ver=11.0.30&utm_source=guide)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.30/foundational-api-samples/others/debug)
+- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/hello-world.html?ver=11.0.60&utm_source=guide)
+- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/angular)
+- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/react)
+- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/vue)
+- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/pwa/helloworld-pwa.html?ver=11.0.60&utm_source=guide)
+- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.60/foundational-api-samples/hello-world/webview)
+- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/use-case/read-a-drivers-license/index.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/read-a-drivers-license/index.html?ver=11.0.60&utm_source=guide)
+- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html?ver=11.0.60&utm_source=guide)
+- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/use-case/show-result-texts-on-the-video.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/use-case/show-result-texts-on-the-video.html?ver=11.0.60&utm_source=guide)
+- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.0.60/foundational-api-samples/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=11.0.30&utm_source=guide)
-- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.30/)
+- Try the Official Demo - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/) \| [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=11.0.60&utm_source=guide)
+- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.0.60/)
## Hello World - Simplest Implementation
@@ -102,7 +102,7 @@ The complete code of the "Hello World" example is shown below
-
+
+
```
- UNPKG
```html
-
+
```
@@ -246,9 +246,9 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde
- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
```sh
- npm i dynamsoft-barcode-reader-bundle@11.0.3000 -E
+ npm i dynamsoft-barcode-reader-bundle@11.0.6000 -E
# or
- yarn add dynamsoft-barcode-reader-bundle@11.0.3000 -E
+ yarn add dynamsoft-barcode-reader-bundle@11.0.6000 -E
```
NOTE that in frameworks, you need to [specify the location of the engine files](#2-optional-specify-the-location-of-the-engine-files).
@@ -261,14 +261,14 @@ Besides using the public CDN, you can also download the SDK and host its files o
- From the website
- [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.30&utm_source=guide&product=dbr&package=js)
+ [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.60&utm_source=guide&product=dbr&package=js)
The resources are located at path `dynamsoft/distributables/@`.
- From npm
```sh
- npm i dynamsoft-barcode-reader-bundle@11.0.3000 -E
+ npm i dynamsoft-barcode-reader-bundle@11.0.6000 -E
# Compared with using CDN, you need to set up more resources.
npm i dynamsoft-capture-vision-std@1.4.21 -E
npm i dynamsoft-image-processing@2.4.31 -E
@@ -280,7 +280,7 @@ Besides using the public CDN, you can also download the SDK and host its files o
You can typically include SDK like this:
```html
-
+
```
@@ -312,7 +312,7 @@ 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 Request a Trial License 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 Request a Trial License 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.
@@ -341,7 +341,7 @@ The image processing logic is encapsulated within .wasm library files, and these
```js
// Preload the .wasm files
-await Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
+await Dynamsoft.Core.CoreModule.loadWasm();
```
### Step 2: Create a CaptureVisionRouter object
@@ -473,8 +473,7 @@ The preset templates can be updated to meet different requirements. For example,
```javascript
let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.barcodeSettings.barcodeFormatIds =
- Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
+settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");
```
@@ -487,8 +486,7 @@ Additionally, we have the option to modify the template to retrieve the original
```javascript
let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes |=
- Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
+settings.outputOriginalImage = true;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");
```
@@ -497,9 +495,8 @@ Limit the barcode format to QR code, and retrieve the original image containing
```javascript
let settings = await cvRouter.getSimplifiedSettings("ReadSingleBarcode");
-settings.capturedResultItemTypes =
- Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE |
- Dynamsoft.Core.EnumCapturedResultItemType.CRIT_ORIGINAL_IMAGE;
+settings.outputOriginalImage = true;
+settings.barcodeSettings.barcodeFormatIds = Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
await cvRouter.updateSettings("ReadSingleBarcode", settings);
await cvRouter.startCapturing("ReadSingleBarcode");
```
@@ -594,7 +591,7 @@ await cvRouter.startCapturing("ReadSingleBarcode");
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-11.0.3000/dynamsoft/templates/"
+* "/dynamsoft-barcode-reader-js-11.0.6000/dynamsoft/templates/"
Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
@@ -639,7 +636,7 @@ Under certain circumstances, this duration can be extended with the method `setD
```js
let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-filter.setDuplicateForgetTime(5000); // Extend the duration to 5 seconds.
+filter.setDuplicateForgetTime("barcode", 5000); // Extend the duration to 5 seconds.
await cvRouter.addResultFilter(filter);
```
@@ -649,7 +646,7 @@ You can also enable both options at the same time:
let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
filter.enableResultCrossVerification("barcode", true);
filter.enableResultDeduplication("barcode", true);
-filter.setDuplicateForgetTime(5000);
+filter.setDuplicateForgetTime("barcode", 5000);
await cvRouter.addResultFilter(filter);
```
@@ -696,7 +693,7 @@ The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on ho
### 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=11.0.3000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.0.3000).
+[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.0.6000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.0.6000).
+ 
+ 
+ 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.
+
+- jsDelivr
+
+ ```html
+
+ ```
+
+- UNPKG
+
+ ```html
+
+ ```
+
+When using a framework such as **React**, **Vue** or **Angular**, we recommend adding the package as a dependency using a package manager such as **npm** or **yarn**:
+
+ ```sh
+ npm i dynamsoft-barcode-reader-bundle@11.0.3000
+ # or
+ yarn add dynamsoft-barcode-reader-bundle@11.0.3000
+ ```
+
+As for package managers like **npm** or **yarn**, you likely need to specify the location of the engine files as a link to a CDN. Please see the [BarcodeScannerConfig API](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig) for a code snippet on how to set the `engineResourcePaths`.
+
+
+
+Host the SDK yourself
+
+Alternatively, you may choose to download the SDK and host the files on your own server or preferred CDN. This approach provides better control over versioning and availability.
+
+- From the website
+
+ [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.30&utm_source=guide&product=dbr&package=js)
+
+ The resources are located in the `./dist/` directory.
+
+- From npm
+
+ ```sh
+ npm i dynamsoft-barcode-reader-bundle@11.0.3000
+ ```
+
+ The resources are located at the path `node_modules/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
+
+ ```
+
+- UNPKG
+
+ ```html
+
+ ```
+
+
+
+- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
+
+ ```sh
+ npm i dynamsoft-barcode-reader-bundle@11.0.3000 -E
+ # or
+ yarn add dynamsoft-barcode-reader-bundle@11.0.3000 -E
+ ```
+
+ NOTE that in frameworks, you need to [specify the location of the engine files](#2-optional-specify-the-location-of-the-engine-files).
+
+
+
+Host the SDK yourself
+
+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.
+
+- From the website
+
+ [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.0.30&utm_source=guide&product=dbr&package=js)
+
+ The resources are located at path `dynamsoft/distributables/