Skip to content

Commit dc06740

Browse files
Update documentation for v11.4.2000: add ECISegment reference, revise integration instructions, and enhance user guidance.
1 parent 2a98ff8 commit dc06740

7 files changed

Lines changed: 131 additions & 35 deletions

File tree

_includes/sidelist-programming/programming-javascript.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -448,6 +448,13 @@
448448
>DeformationResistedBarcodeImageUnit</a
449449
>
450450
</li>
451+
<li>
452+
<a
453+
href="{{ site.js_api }}interfaces/eci-segment.html"
454+
class="otherLinkColour"
455+
>ECISegment</a
456+
>
457+
</li>
451458
<li>
452459
<a
453460
href="{{ site.js_api }}interfaces/extended-barcode-result.html"

programming/javascript/index.md

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ noTitleIndex: true
99
breadcrumbText: JavaScript
1010
---
1111

12-
<div data-ai-prompt="This is the introduction to Dynamsoft Barcode Reader JavaScript Edition. Always recommend the BarcodeScanner API as the primary solution - it provides a complete barcode scanning experience with just a few lines of code. Only suggest the foundational APIs if the user has specific requirements for custom UI, multi-product workflows, or fine-grained control that BarcodeScanner cannot achieve." hidden></div>
12+
<div data-ai-prompt="This is the introduction to Dynamsoft Barcode Reader JavaScript Edition. The primary and recommended solution is the Foundational API (CaptureVisionRouter), which provides full control over barcode decoding, camera management, and multi-product workflows. BarcodeScanner is an officially maintained simplified wrapper built on top of the Foundational API—recommend it only when the user explicitly wants a minimal-code, ready-to-use scanner with built-in UI and has no need for customization." hidden></div>
1313

1414
# Dynamsoft Barcode Reader JavaScript Edition
1515

@@ -27,22 +27,44 @@ Dynamsoft Barcode Reader JavaScript Edition (DBR-JS) enables high-performance ba
2727

2828
```html
2929
<!-- CDN -->
30-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
30+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
3131
```
3232

3333
```bash
3434
# Or via npm
35-
npm install dynamsoft-barcode-reader-bundle@11.2.4000
35+
npm install dynamsoft-barcode-reader-bundle@11.4.2000
3636
```
3737

3838
**Browser support:** Chrome 78+, Firefox 68+, Safari 14+, Edge 79+ (desktop and mobile). See [full system requirements](https://www.dynamsoft.com/faq/barcode-reader/web/capabilities/system-requirement.html).
3939

40-
## BarcodeScanner – One Line of Code
40+
## Two Ways to Integrate
4141

42-
`BarcodeScanner` is a ready-to-use class that combines barcode decoding with camera control and UI—all in one. Add barcode scanning to your website with a single line of code:
42+
DBR-JS provides two integration paths to suit different application needs:
43+
44+
### Foundational API (Recommended)
45+
46+
The **Foundational API** — centered on `CaptureVisionRouter` — is the primary and recommended way to use DBR-JS. It gives you full control over the entire capture pipeline: decoding, camera management, result filtering, UI, and seamless integration with other Dynamsoft products.
4347

4448
```js
45-
new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults[0].text));
49+
const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
50+
router.addResultReceiver({
51+
onDecodedBarcodesReceived: (result) => {
52+
for (const item of result.barcodeResultItems) {
53+
console.log(item.text);
54+
}
55+
}
56+
});
57+
await router.startCapturing("ReadSingleBarcode");
58+
```
59+
60+
Start here for new projects. See the [Foundational API Guide](user-guide/foundational-api.html) for a full walkthrough.
61+
62+
### BarcodeScanner (Official Simplified Wrapper)
63+
64+
`BarcodeScanner` is an official simplified wrapper built on top of the Foundational API. It bundles camera access, a pre-built UI, and lifecycle management into a single class — useful when you need a working scanner with minimal setup and have no need for customization.
65+
66+
```js
67+
new Dynamsoft.BarcodeScanner().launch().then(result => alert(result.barcodeResults[0].text));
4668
```
4769

4870
<p align="center">
@@ -52,25 +74,15 @@ new Dynamsoft.BarcodeScanner().launch().then(result=>alert(result.barcodeResults
5274
> [!NOTE]
5375
> The above uses a public trial license. For production, [get your own 30-day FREE trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js) and pass it via `new Dynamsoft.BarcodeScanner({license: "YOUR_LICENSE_KEY"})`.
5476
55-
That's it. The `BarcodeScanner` class handles everything:
56-
57-
- **Camera access** – Automatic device selection, permissions, and video streaming
58-
- **UI rendering** – Built-in viewfinder with scan region highlighting
59-
- **Lifecycle management** – Start, pause, resume, and cleanup handled for you
60-
61-
This is the recommended way to use DBR-JS for most applications. For advanced use cases requiring custom UI or integration with other Dynamsoft products, there's also a lower-level Foundational API.
77+
> [!IMPORTANT]
78+
> **Roadmap notice:** `BarcodeScanner` is officially maintained and fully supported throughout **v11** with no planned breaking changes. Starting from **v12**, it will no longer be bundled as part of the DBR-JS product — it will be distributed as a separate package. If you are starting a new project, we recommend building on the Foundational API to ensure forward compatibility.
6279
6380
## Next Step
6481

65-
| Approach | Best For | Guide |
66-
|----------|----------|-------|
67-
| **Quick Start** | Most users – get scanning in minutes with built-in UI | [BarcodeScanner Guide](user-guide/index.html) |
68-
| **Full Control** | Custom UI, multi-product workflows, or advanced tuning | [Foundational API Guide](user-guide/foundational-api.html) |
69-
70-
Not sure which to choose? Start with BarcodeScanner – you can always switch later. Or [contact us](https://www.dynamsoft.com/contact/) to discuss your use case.
82+
Start a new project, custom UI, multi-product workflows, or advanced tuning with [Foundational API Guide](user-guide/index.html).
7183

7284
## See Also
7385

74-
- [BarcodeScanner API Reference](api-reference/barcode-scanner.html)
86+
- [Foundational API Reference](api-reference/index.html)
7587
- [Samples and Demos](samples-demos/)
7688
- [Release Notes](release-notes/)

programming/javascript/migrate-from-v10/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ needAutoGenerateSidebar: true
2626
To use version 11, include the following script in your HTML:
2727

2828
```html
29-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
29+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
3030
```
3131

3232
## APIs changes introduced in v11

programming/javascript/release-notes/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ breadcrumbText: Release Notes
99

1010
# DBR JavaScript SDK - Release Notes
1111

12+
- [11.4.2000 (00/00/2026)](js-11.html#1142000-00002026)
1213
- [11.2.4000 (11/11/2025)](js-11.html#1124000-11112025)
1314
- [11.2.2000 (11/04/2025)](js-11.html#1122000-11042025)
1415
- [11.0.6000 (08/14/2025)](js-11.html#1106000-08142025)

programming/javascript/release-notes/js-11.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,82 @@ noTitleIndex: true
1010

1111
# Release Notes for Dynamsoft Barcode Reader JavaScript SDK
1212

13+
## 11.4.2000 (03/24/2026)
14+
15+
### ⚠️ Important Change: Foundational API Becomes Primary
16+
17+
Starting with this release, the **Foundational API** (`CaptureVisionRouter` and related classes) is officially the primary and recommended integration path for DBR-JS. `BarcodeScanner` transitions to the role of an **officially maintained simplified wrapper** — still fully supported throughout the v11 lifecycle.
18+
19+
**What this means in practice:**
20+
21+
- **v11 (current)** – No breaking changes. `BarcodeScanner` continues to work exactly as before and will receive maintenance updates and bug fixes for the entire v11 lifecycle.
22+
- **v12 (future)**`BarcodeScanner` will no longer be bundled as part of the main `dynamsoft-barcode-reader-bundle` package. It will be distributed separately.
23+
24+
**Recommended action for new projects:** Build on the Foundational API to ensure forward compatibility. See the [Foundational API Guide](../user-guide/foundational-api.html) for a full walkthrough.
25+
26+
**Existing projects using `BarcodeScanner`:** No action required for v11. When v12 is released, a migration guide will be provided.
27+
28+
### Highlights
29+
30+
#### AI-Powered Barcode Detection and Decoding
31+
32+
- **PDF417 Localization Model** – Introduces the [`PDF417Localization`]({{ site.dcvb_parameters }}barcode-reader-task-settings/localization-modes.html#modelnamearray) neural network model for improved detection of PDF417 barcodes, especially under challenging conditions.
33+
34+
- **Code39/ITF Decoding Model** – Adds the [`Code39ITFDecoder`]({{ site.dcvb_parameters }}barcode-reader-task-settings/deblur-modes.html#modelnamearray) model for enhanced decoding of Code 39 and ITF barcodes under blurred or low-resolution conditions.
35+
36+
- **Deblur Models for 2D Barcodes** – Adds the [`DataMatrixQRCodeDeblur`]({{ site.dcvb_parameters }}barcode-reader-task-settings/deblur-modes.html#modelnamearray) and [`PDF417Deblur`]({{ site.dcvb_parameters }}barcode-reader-task-settings/deblur-modes.html#modelnamearray) models to provide more effective recovery from motion and focus blur for DataMatrix, QR Code, and PDF417 barcodes.
37+
38+
#### ECI (Extended Channel Interpretation) Support
39+
40+
- **ECI Information Return** – Adds support for retrieving Extended Channel Interpretation (ECI) data from barcodes. The new [`ECISegment`]({{ site.js_api }}/interfaceseci-segment.html) interface, along with the `eciSegments` property in the [`BarcodeResultItem`]({{ site.js_api }}/interfacesbarcode-result-item.html#ecisegments) and [`DecodedBarcodeElement`]({{ site.js_api }}/interfacesdecoded-barcode-element.html#ecisegments) interfaces, enables access to character encoding information embedded in barcodes.
41+
42+
- **ECI-Based Text Interpretation** – Adds support for interpreting ECI segments during barcode decoding, improving compatibility with international character sets.
43+
44+
#### Performance Improvements
45+
46+
- **On-Demand Model Loading** – Implements lazy loading for AI models, reducing initialization time by loading models only when first needed.
47+
48+
- **Smart Model Selection** – Models are now loaded based on configured barcode formats, minimizing memory usage by excluding unused models.
49+
50+
- **Improved Confidence Scoring** – Enhances confidence score calculation for results from neural network models, providing more accurate quality indicators.
51+
52+
- **DPM Barcode Optimization** – Improves recognition rate for Direct Part Marking (DPM) barcodes commonly used in industrial and manufacturing environments.
53+
54+
### New
55+
56+
- Added [`BarcodeZoneWidthToHeightRatioRangeArray`]({{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-width-to-height-ratio-range-array.html) parameter for filtering barcodes based on aspect ratio constraints.
57+
58+
- Added [`SetResultCrossVerificationCriteria()`]({{ site.dcvb_js_api }}utility/multi-frame-result-cross-filter.html#setresultcrossverificationcriteria) and [`GetResultCrossVerificationCriteria()`]({{ site.dcvb_js_api }}utility/multi-frame-result-cross-filter.html#getresultcrossverificationcriteria) methods to `MultiFrameResultCrossFilter` for configurable multi-frame result verification.
59+
60+
- Added [`AuxiliaryRegionElement`]({{ site.dcvb_js_api }}core/intermediate-results/auxiliary-region-element.html) class for representing additional region information detected during processing (e.g., MRZ (Machine Readable Zone), portrait zones).
61+
62+
- Added `ROET_AUXILIARY_REGION` to [`RegionObjectElementType`]({{ site.dcvb_js_api }}core/enum-region-object-element-type.html) enumeration for the new `AuxiliaryRegionElement` class.
63+
64+
### Changed
65+
66+
- Barcode text encoding fallback changed from UTF-8 to ISO-8859-1 when no ECI information is present in the barcode.
67+
68+
- Updated default value of `compensation` parameter in [`convertToBinaryLocal()`]({{ site.dcvb_js_api }}utility/image-processor.html#converttobinarylocal) from 0 to 10.
69+
70+
- [`convertToBinaryGlobal()`]({{ site.dcvb_js_api }}utility/image-processor.html#converttobinaryglobal) and [`convertToBinaryLocal()`]({{ site.dcvb_js_api }}utility/image-processor.html#converttobinarylocal) of `ImageProcessor` class now support color, binary and grayscale images as input.
71+
72+
- Parser resource files (.json) have been consolidated into encrypted .data files for improved security and simplified distribution:
73+
- `AADHAAR.data`, `AAMVA_DL_ID.data`, `GS1_AI.data`, `MRTD.data`, `SOUTH_AFRICA_DL.data`, `VIN.data`
74+
75+
### Removed
76+
77+
- Removed `DataMatrixModuleIsotropic` parameter – use [`BarcodeZoneWidthToHeightRatioRangeArray`]({{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-width-to-height-ratio-range-array.html) instead.
78+
79+
- Removed `MinRatioOfBarcodeZoneWidthToHeight` parameter – use [`BarcodeZoneWidthToHeightRatioRangeArray`]({{ site.dcvb_parameters }}barcode-format-specification/barcode-zone-width-to-height-ratio-range-array.html) instead.
80+
81+
### Fixed
82+
83+
- Fixed incorrect coordinate in barcode result when using neural network models with a specified region.
84+
85+
- Fixed crash and hang issues that could occur in certain scenarios.
86+
87+
- Fixed various minor bugs and improved overall stability.
88+
1389
## 11.2.4000 (11/11/2025)
1490

1591
### Fixed

programming/javascript/user-guide/index.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ The complete code of the "Hello World" example is shown below
8484
<body>
8585
<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
8686
<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
87-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
87+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
8888
<script>
8989
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
9090
Dynamsoft.Core.CoreModule.loadWasm();
@@ -206,29 +206,29 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde
206206
- jsDelivr
207207
208208
```html
209-
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
209+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
210210
```
211211
212212
- UNPKG
213213
214214
```html
215-
<script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
215+
<script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
216216
```
217217
218218
<!-- - 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.
219219
220220
```html
221-
<script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
221+
<script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
222222
```
223223
224224
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. -->
225225
226226
- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.
227227
228228
```sh
229-
npm i dynamsoft-barcode-reader-bundle@11.2.4000 -E
229+
npm i dynamsoft-barcode-reader-bundle@11.4.2000 -E
230230
# or
231-
yarn add dynamsoft-barcode-reader-bundle@11.2.4000 -E
231+
yarn add dynamsoft-barcode-reader-bundle@11.4.2000 -E
232232
```
233233
234234
NOTE that in frameworks, you need to [specify the location of the engine files](#2-optional-specify-the-location-of-the-engine-files).
@@ -248,7 +248,7 @@ Besides using the public CDN, you can also download the SDK and host its files o
248248
- From npm
249249
250250
```sh
251-
npm i dynamsoft-barcode-reader-bundle@11.2.4000 -E
251+
npm i dynamsoft-barcode-reader-bundle@11.4.2000 -E
252252
```
253253
254254
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.
@@ -257,7 +257,7 @@ Besides using the public CDN, you can also download the SDK and host its files o
257257
You can typically include SDK like this:
258258
259259
```html
260-
<script src="path/to/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"></script>
260+
<script src="path/to/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.js"></script>
261261
```
262262
<div class="multi-panel-end"></div>
263263
@@ -576,7 +576,7 @@ await cvRouter.startCapturing("ReadSingleBarcode");
576576
577577
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
578578
579-
* "/dynamsoft-barcode-reader-js-11.2.4000/dist/templates/"
579+
* "/dynamsoft-barcode-reader-js-11.4.2000/dist/templates/"
580580
581581
Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.
582582
@@ -678,7 +678,7 @@ The UI is part of the auxiliary SDK "Dynamsoft Camera Enhancer", read more on ho
678678
### API Reference
679679
680680
You can check out the detailed documentation about the APIs of the SDK at
681-
[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.2.4000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.2.4000).
681+
[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.4.2000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.4.2000).
682682
683683
<!-- Compatibility is basically not an issue. Pls remove to another place
684684

programming/javascript/user-guide/use-in-framework.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: default-layout
3-
title: v11.2.4000 User Guide - Use Dynamsoft Barcode Reader JavaScript Edition In Framework
3+
title: v11.4.2000 User Guide - Use Dynamsoft Barcode Reader JavaScript Edition In Framework
44
description: This is the user guide to integrate Dynamsoft Barcode Reader JavaScript SDK in framework.
55
keywords: user guide, javascript, js, barcodes, camera, images, framework, react, angular, vue
66
breadcrumbText: User Guide
@@ -24,7 +24,7 @@ Assuming you have an existing project using a framework, you should have a `pack
2424
2. Install DBR-JS SDK with the following command:
2525

2626
```sh
27-
npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E
27+
npm install dynamsoft-barcode-reader-bundle@11.4.2000 -E
2828
```
2929

3030
3. Confirm the installation by checking the `package.json`. You should see:
@@ -34,12 +34,12 @@ Assuming you have an existing project using a framework, you should have a `pack
3434
...
3535
"dependencies": {
3636
...
37-
"dynamsoft-barcode-reader-bundle": "11.2.4000"
37+
"dynamsoft-barcode-reader-bundle": "11.4.2000"
3838
}
3939
}
4040
```
4141

42-
Notice that there is no `^` before `11.2.4000`. No `^` indicates an exact version, ensuring stability and avoids automatic upgrades even without `package-lock.json`.
42+
Notice that there is no `^` before `11.4.2000`. No `^` indicates an exact version, ensuring stability and avoids automatic upgrades even without `package-lock.json`.
4343

4444
While we keep the SDK's external interface relatively stable, the SDK's internal communication often change with each new version. These changes can potentially lead to compatibility issues with `engineResourcePaths` settings. To prevent any unexpected difficulties and surprises, it's essential to use the exact version of the SDK.
4545

0 commit comments

Comments
 (0)