Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions programming/javascript/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ Dynamsoft Barcode Reader JavaScript Edition (DBR-JS) enables high-performance ba

```html
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3200/dist/dbr.bundle.js"></script>
```

```bash
# Or via npm
npm install dynamsoft-barcode-reader-bundle@11.6.3000
npm install dynamsoft-barcode-reader-bundle@11.6.3200
```

**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).
Expand Down
2 changes: 1 addition & 1 deletion programming/javascript/migrate-from-v10/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ needAutoGenerateSidebar: true
To use version 11, include the following script in your HTML:

```html
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3200/dist/dbr.bundle.js"></script>
```

## APIs changes introduced in v11
Expand Down
1 change: 1 addition & 0 deletions programming/javascript/release-notes/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ breadcrumbText: Release Notes

# DBR JavaScript SDK - Release Notes

- [11.6.3200 (09/07/2026)](js-11.html#1163200-09072026)
- [11.6.3000 (08/25/2026)](js-11.html#1163000-08252026)
- [11.6.2100 (08/18/2026)](js-11.html#1162100-08182026)
- [11.6.2000 (08/13/2026)](js-11.html#1162000-08132026)
Expand Down
7 changes: 7 additions & 0 deletions programming/javascript/release-notes/js-11.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@ noTitleIndex: true

# Release Notes for Dynamsoft Barcode Reader JavaScript SDK

## 11.6.3200(09/07/2026)

### Fixed

- Fixed an issue where automatic trial license application would fail in certain scenarios.
- Fixed known browser compatibility issues with specific iOS versions.

## 11.6.3000(08/25/2026)

### Improved
Expand Down
76 changes: 33 additions & 43 deletions programming/javascript/user-guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ The complete code of the "Hello World" example is shown below
<body>
<div id="camera-view-container" style="width: 100%; height: 60vh"></div>
<textarea id="results" style="width: 100%; min-height: 10vh; font-size: 3vmin; overflow: auto" disabled></textarea>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3200/dist/dbr.bundle.js"></script>
<script>
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
Dynamsoft.Core.CoreModule.loadWasm();
Expand All @@ -62,11 +62,9 @@ The complete code of the "Hello World" example is shown below

const resultsContainer = document.querySelector("#results");
await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
if (result.barcodeResultItems?.length) {
resultsContainer.textContent = '';
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
resultsContainer.textContent = '';
for (let item of result.barcodeResultItems) {
resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
}
}});

Expand All @@ -84,15 +82,15 @@ The complete code of the "Hello World" example is shown below
```

<p align="center" style="text-align:center; white-space: normal; ">
<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.6.30/basics/hello-world.html" title="Code in Github" style="text-decoration:none;">
<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.6.32/basics/hello-world.html" title="Code in Github" style="text-decoration:none;">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="Code in Github" width="20" height="20" style="width:20px;height:20px;">
</a>
&nbsp;
<a target="_blank" href="https://jsfiddle.net/DynamsoftTeam/csm2f9wb/" title="Run via JSFiddle" style="text-decoration:none;">
<img src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/jsfiddle.svg" alt="Run via JSFiddle" width="20" height="20" style="width:20px;height:20px;" >
</a>
&nbsp;
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.30&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.32&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
<img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/svgs/solid/circle-play.svg" alt="Run in Dynamsoft" width="20" height="20" style="width:20px;height:20px;">
</a>
</p>
Expand Down Expand Up @@ -137,7 +135,7 @@ The complete code of the "Hello World" example is shown below

### Run the example

You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.30&utm_source=guide) or test it with [JSFiddle code editor](https://jsfiddle.net/DynamsoftTeam/csm2f9wb/).
You can run the example deployed to [the Dynamsoft Demo Server](https://demo.dynamsoft.com/Samples/DBR/JS/basics/hello-world.html?ver=11.6.32&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.

Expand All @@ -151,7 +149,7 @@ Alternatively, you can test locally by copying and pasting the code shown above
>
> 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.6.30&utm_source=guide&product=dbr&package=js).
> If the test doesn't go as expected, you can [contact us](https://www.dynamsoft.com/company/contact/?ver=11.6.32&utm_source=guide&product=dbr&package=js).

## Preparing the SDK

Expand All @@ -170,29 +168,29 @@ The simplest way to include the SDK is to use either the [jsDelivr](https://jsde
- jsDelivr

```html
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.6.3200/dist/dbr.bundle.js"></script>
```

- UNPKG

```html
<script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
<script src="https://unpkg.com/dynamsoft-barcode-reader-bundle@11.6.3200/dist/dbr.bundle.js"></script>
```

<!-- - In some rare cases (such as some restricted areas), you might not be able to access the CDN. If this happens, you can use the following files for the test.

```html
<script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
<script src="https://download2.dynamsoft.com/packages/dynamsoft-barcode-reader-bundle@11.6.3200/dist/dbr.bundle.js"></script>
```

However, please **DO NOT** use `download2.dynamsoft.com` resources in a production application as they are for temporary testing purposes only. Instead, you can try hosting the SDK yourself. -->

- In frameworks like React, Vue and Angular, you may want to add the package as a dependency.

```sh
npm i dynamsoft-barcode-reader-bundle@11.6.3000 -E
npm i dynamsoft-barcode-reader-bundle@11.6.3200 -E
# or
yarn add dynamsoft-barcode-reader-bundle@11.6.3000 -E
yarn add dynamsoft-barcode-reader-bundle@11.6.3200 -E
```

NOTE that in frameworks, you need to [specify the location of the engine files](#2-optional-specify-the-location-of-the-engine-files).
Expand All @@ -205,14 +203,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.6.30&utm_source=guide&product=dbr&package=js)
[Download Dynamsoft Barcode Reader JavaScript Package](https://www.dynamsoft.com/barcode-reader/downloads/?ver=11.6.32&utm_source=guide&product=dbr&package=js)

The resources are located at the path `dynamsoft-barcode-reader-js-{version-number}/dist/`.

- From npm

```sh
npm i dynamsoft-barcode-reader-bundle@11.6.3000 -E
npm i dynamsoft-barcode-reader-bundle@11.6.3200 -E
```

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.
Expand All @@ -221,7 +219,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
<script src="path/to/dynamsoft-barcode-reader-bundle@11.6.3000/dist/dbr.bundle.js"></script>
<script src="path/to/dynamsoft-barcode-reader-bundle@11.6.3200/dist/dbr.bundle.js"></script>
```
<div class="multi-panel-end"></div>

Expand Down Expand Up @@ -253,7 +251,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 <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=11.6.30&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.
As previously stated, the key "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" serves as a test license valid for 24 hours, applicable to any newly authorized browser. To test the SDK further, you can request a 30-day free trial license via the <a href="https://www.dynamsoft.com/customer/license/trialLicense?ver=11.6.32&utm_source=guide&product=dbr&package=js" target="_blank">Request a Trial License</a> link.

> Upon registering a Dynamsoft account and obtaining the SDK package from the official website, Dynamsoft will automatically create a 30-day free trial license and embed the corresponding license key into all the provided SDK samples.

Expand Down Expand Up @@ -345,12 +343,10 @@ Once the image processing is complete, the results are sent to all the registere
const resultsContainer = document.querySelector("#results");
const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver();
resultReceiver.onDecodedBarcodesReceived = (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`;
}
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`;
}
};
await cvRouter.addResultReceiver(resultReceiver);
Expand All @@ -361,12 +357,10 @@ You can also write code like this. It is the same.
```javascript
const resultsContainer = document.querySelector("#results");
await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (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`;
}
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`;
}
}});
```
Expand Down Expand Up @@ -452,13 +446,11 @@ await cvRouter.addResultReceiver({
onCapturedResultReceived: (result) => {
//Check for barcode results
let barcodeResultItems = result.items.filter((item) => item.type === EnumCRIT.CRIT_BARCODE);
if (barcodeResultItems.length > 0) {
let image = result.items.filter((item) => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE)[0]?.imageData; // Retrieve the original image.
if (image) document.body.appendChild(image.toCanvas()); // Append the image to DOM.
for (let item of barcodeResultItems) {
// Print each barcode result to the console.
console.log(`Barcode: ${item.text}, Format: ${item.formatString}`);
}
let image = result.items.filter((item) => item.type === EnumCRIT.CRIT_ORIGINAL_IMAGE)[0]?.imageData; // Retrieve the original image.
if (image) document.body.appendChild(image.toCanvas()); // Append the image to DOM.
for (let item of barcodeResultItems) {
// Print each barcode result to the console.
console.log(`Barcode: ${item.text}, Format: ${item.formatString}`);
}
},
});
Expand Down Expand Up @@ -540,7 +532,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.6.3000/dist/templates/"
* "/dynamsoft-barcode-reader-js-11.6.3200/dist/templates/"

Upon completing the template editing, you can invoke the `initSettings` method and provide it with the template path as an argument.

Expand Down Expand Up @@ -608,9 +600,7 @@ 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();
}
Dynamsoft.DCE.Feedback.beep();
};
await cvRouter.addResultReceiver(resultReceiver);
```
Expand Down Expand Up @@ -642,7 +632,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.6.3000](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3000).
[https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3200](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/?ver=11.6.3200).

<!-- Compatibility is basically not an issue. Pls remove to another place

Expand Down
8 changes: 4 additions & 4 deletions programming/javascript/user-guide/use-in-framework.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: default-layout
title: v11.6.3000 User Guide - Use Dynamsoft Barcode Reader JavaScript Edition In Framework
title: v11.6.3200 User Guide - Use Dynamsoft Barcode Reader JavaScript Edition In Framework
description: This is the user guide to integrate Dynamsoft Barcode Reader JavaScript SDK in framework.
keywords: user guide, javascript, js, barcodes, camera, images, framework, react, angular, vue
breadcrumbText: User Guide
Expand All @@ -24,7 +24,7 @@ Assuming you have an existing project using a framework, you should have a `pack
2. Install DBR-JS SDK with the following command:

```sh
npm install dynamsoft-barcode-reader-bundle@11.6.3000 -E
npm install dynamsoft-barcode-reader-bundle@11.6.3200 -E
```

3. Confirm the installation by checking the `package.json`. You should see:
Expand All @@ -34,12 +34,12 @@ Assuming you have an existing project using a framework, you should have a `pack
...
"dependencies": {
...
"dynamsoft-barcode-reader-bundle": "11.6.3000"
"dynamsoft-barcode-reader-bundle": "11.6.3200"
}
}
```

Notice that there is no `^` before `11.6.3000`. No `^` indicates an exact version, ensuring stability and avoiding automatic upgrades even without `package-lock.json`.
Notice that there is no `^` before `11.6.3200`. No `^` indicates an exact version, ensuring stability and avoiding automatic upgrades even without `package-lock.json`.

While we keep the SDK's external interface relatively stable, the SDK's internal communication often changes 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.

Expand Down
Loading