diff --git a/API Reference.url b/API Reference.url
index bc2b1b8..33c5b7c 100644
--- a/API Reference.url
+++ b/API Reference.url
@@ -1,2 +1,2 @@
[InternetShortcut]
-URL=https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=10.2.1000
\ No newline at end of file
+URL=https://www.dynamsoft.com/barcode-reader/programming/javascript/api-reference/?ver=10.4.20
\ No newline at end of file
diff --git a/README.md b/README.md
index af1646f..3987a73 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,3 @@
-
-
# 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.
@@ -56,21 +54,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/v10.2.10/hello-world/hello-world.html) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/hello-world.html?ver=10.2.10&utm_source=github)
-- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/angular) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/angular/dist/dbrjs-sample-angular/browser/?ver=10.2.10&utm_source=github)
-- React App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/react) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/react/build/?ver=10.2.10&utm_source=github)
-- Vue App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/vue) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/vue/dist/?ver=10.2.10&utm_source=github)
-- PWA App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/hello-world/pwa) \| [Run](https://demo.dynamsoft.com/Samples/DBR/JS/hello-world/pwa/helloworld-pwa.html?ver=10.2.10&utm_source=github)
-- WebView in Android and iOS - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.2.10/hello-world/webview)
-- Read Driver Licenses - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/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.2.10&utm_source=github)
-- Fill A Form - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/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.2.10&utm_source=github)
-- Show result information on the video - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/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.2.10&utm_source=github)
-- Debug Camera and Collect Video Frame - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v10.2.10/others/debug)
+- 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=github)
+- 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)
You can also:
-- Try the Official Demo - [Run](https://demo.dynamsoft.com/barcode-reader-js/?ver=10.2.10&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-demo/)
-- Try Online Examples - [Run](https://demo.dynamsoft.com/Samples/DBR/JS/index.html?ver=10.2.10&utm_source=github) \| [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.2.10/)
+- 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=github)
+- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v10.4.20/)
## Hello World - Simplest Implementation
@@ -89,18 +87,18 @@ The complete code of the "Hello World" example is shown below
-
+
-
+
+
```
- UNPKG
```html
-
+
```
- 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
-
+
```
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.
@@ -251,49 +245,47 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde
- In frameworks like React and Vue, you may want to add the package as a dependency.
```sh
- npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
+ npm i dynamsoft-barcode-reader-bundle@10.4.2000 -E
# or
- yarn add dynamsoft-barcode-reader-bundle@10.2.1000 -E
+ yarn add dynamsoft-barcode-reader-bundle@10.4.2000 -E
```
- In frameworks you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional).
+ NOTE that in frameworks, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional).
#### 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.
-Options to download the SDK:
+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.2.10&utm_source=github&product=dbr&package=js)
+ [Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=10.4.20&utm_source=github&product=dbr&package=js)
+
+ The resources are located at path `dynamsoft/distributables/@`, you can typically include it like this:
- The resources are located at path `dynamsoft/distributables/@`.
+ ```html
+
+ ```
- npm
```sh
- npm i dynamsoft-barcode-reader-bundle@10.2.1000 -E
+ npm i dynamsoft-barcode-reader-bundle@10.4.2000 -E
# Compared with using CDN, you need to set up more resources.
- npm i dynamsoft-capture-vision-std@1.2.0 -E
- npm i dynamsoft-image-processing@2.2.10 -E
+ npm i dynamsoft-capture-vision-std@1.4.10 -E
+ npm i dynamsoft-image-processing@2.4.20 -E
```
- The resources are located at path `node_modules/`, without `@`.
-
-Depending on how you downloaded the SDK and how you intend to use it, you can typically include it like this
-- From the website
-
- ```html
-
- ```
-
-- From node_modules
+ The resources are located at the path `node_modules/`, without `@`, so the script would be like:
```html
```
- Since `@` are missing, you need to [specify the engineResourcePaths](#specify-the-location-of-the-engine-files-optional).
+
+ Since the version tags (`@`) 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.
+
+ > 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.
*Note*:
@@ -324,7 +316,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 [customer portal](https://www.dynamsoft.com/customer/license/trialLicense?ver=10.2.10&utm_source=github&product=dbr&package=js).
+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.
@@ -337,13 +329,13 @@ The purpose is to tell the SDK where to find the engine files (\*.worker.js, \*.
```javascript
//The following code uses the jsDelivr CDN, feel free to change it to your own location of these files
Object.assign(Dynamsoft.Core.CoreModule.engineResourcePaths, {
- std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
- dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
- core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
- license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
- cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
- dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
- dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
+ std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.4.10/dist/",
+ dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.4.20/dist/",
+ core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.4.20/dist/",
+ license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.4.20/dist/",
+ cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.4.20/dist/",
+ dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.4.20/dist/",
+ dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.1.0/dist/"
});
```
@@ -380,7 +372,7 @@ When creating a `CaptureVisionRouter` object within a function which may be call
```javascript
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-let pCvRouter = null; // promise of cvRouter
+let pCvRouter = null; // The helper variable which is a promise of cvRouter
let cvRouter = null;
document.getElementById('btn-scan').addEventListener('click', async () => {
@@ -396,16 +388,16 @@ document.getElementById('btn-scan').addEventListener('click', async () => {
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 `view`, which is then passed to `cameraEnhancer`, and its content is displayed on the webpage.
+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 view = await Dynamsoft.DCE.CameraView.createInstance();
-let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
-document.querySelector("#cameraViewContainer").append(view.getUIElement());
+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);
```
@@ -464,7 +456,7 @@ await cvRouter.startCapturing("ReadSingleBarcode");
| Template Name | Function Description |
| ------------------------------ | -------------------------------------------------------------- |
-| **ReadBarcodes_Default** | Scans a single barcode. |
+| **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. |
@@ -524,10 +516,10 @@ const EnumCRIT = Dynamsoft.Core.EnumCapturedResultItemType;
resultReceiver.onCapturedResultReceived = (result) => {
let barcodes = result.items.filter(item => item.type === EnumCRIT.CRIT_BARCODE);
if (barcodes.length > 0) {
+ // 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;
- // The image that we found the barcode(s) on.
}
};
```
@@ -547,6 +539,32 @@ await cvRouter.startCapturing("ReadSingleBarcode");
##### 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)
+
+
-While the code above accomplishes the task, a more effective approach is to restrict the scan region directly at the image source, as demonstrated in the following code snippet.
-
-> * With the region configured at the image source, the images are cropped right before they are gathered for processing, eliminating the necessity to modify the processing settings further.
-> * `cameraEnhancer` elevates interactivity by overlaying a mask on the video, providing a clear delineation of the scanning region.
-> * See also: [CameraEnhancer::setScanRegion](https://www.dynamsoft.com/camera-enhancer/docs/web/programming/javascript/api-reference/acquisition.html#setscanregion)
-
-```javascript
-cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(view);
-cameraEnhancer.setScanRegion({
- x: 25,
- y: 25,
- width: 50,
- height: 50,
- isMeasuredInPercentage: true,
-});
-```