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
82 changes: 82 additions & 0 deletions barcode-reader/web/capabilities/adaptive-wasm-loading.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
---
layout: default-layout
title: About Adaptive WebAssembly (Wasm) Loading
keywords: Dynamsoft Barcode Reader, FAQ, JavaScript, tech basic, wasm, loading
description: How to enable -SIMD-Pthread Wasm for accelerated deep learning computation?
needAutoGenerateSidebar: false
---

# About Adaptive WebAssembly (Wasm) Loading

## What is adaptive Wasm loading?

Dynamsoft Barcode Reader (JavaScript) includes **three optimized WebAssembly (Wasm) variants** — *-Baseline*, *-Pthread*, and *-SIMD-Pthread* — which can be **dynamically loaded based on the runtime environment**.
This adaptive loading mechanism ensures the SDK automatically selects the **most compatible and highest-performing** Wasm module available in each browser, further improving performance in modern environments.

---

## Comparison of the three Wasm variants

| Feature | Baseline Wasm | SIMD Wasm | SIMD + Pthread Wasm |
| -------- | -------------- | ---------- | -------------------- |
| **Parallelism** | Single-threaded | Single Instruction Multiple Data (CPU vector instruction set) | Multi-threaded(via Web Workers + SharedArrayBuffer) + SIMD |
| **Performance Characteristics** | Simple, limited by single-core performance | Leverages CPU vectorized parallelism to speed up data processing | Combines SIMD vectorization and multi-core acceleration for maximum performance |
| **Compatibility** | Supported in all Wasm environments | Requires browser support for Wasm SIMD instruction set | Requires browser support for both Wasm SIMD and Wasm threads (cross-origin isolation) |
| **Minimum Supported Browser Versions** | Chrome 78+<br>Edge 79+<br>Safari 14.5+<br>Firefox 68+ | Chrome 91+<br>Edge 91+<br>Safari 16.4+<br>Firefox 89+ | Chrome 91+<br>Edge 91+<br>Safari 16.4+<br>Firefox 89+ |
| **Wasm Size** | 5588 KB | 6974 KB | 8225 KB |
| **Transfer Size** | 2.11 MB | 2.55 MB | 2.81 MB |

---

## How to enable -SIMD-Pthread Wasm for accelerated deep learning computation?

To unlock multi-threaded performance with the **-SIMD-Pthread Wasm** variant, configure your server to enable **cross-origin isolation** by adding the following HTTP headers to all responses:

```text
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

Then, ensure that all SDK resources are **served under the same origin**.

Once correctly configured, the SDK will automatically detect the environment and load the `-SIMD-Pthread Wasm` to leverage multi-core acceleration.

>[!TIP]
>You can verify whether your site is correctly isolated by checking the browser console for cross-origin isolation status or by calling window.crossOriginIsolated in DevTools.

## How to manually specify which Wasm variant to load?

By default, the SDK automatically determines the most suitable WebAssembly (Wasm) variant to load based on the browser's capabilities.
However, developers can **manually override** this behavior and explicitly specify which Wasm module to load through the `wasmLoadOptions` property.

### Example

```javascript
Dynamsoft.Core.CoreModule.wasmLoadOptions = {
wasmType: "ml-simd-pthread",
pthreadPoolSize: 5,
};
```

### Supported Wasm Types

```javascript
type WasmType =
| "baseline" // Basic single-threaded variant
| "ml-simd" // SIMD-optimized variant
| "ml-simd-pthread" // Multi-threaded + SIMD optimized variant
| "auto"; // Automatically select based on environment
```

>[!NOTE]
>Setting wasmType to "auto" (default) allows the SDK to automatically choose the optimal Wasm based on runtime capability detection.
>
>When using "ml-simd-pthread", ensure that cross-origin isolation is properly configured as described in [How to enable `-SIMD-Pthread Wasm` for accelerated deep learning computation](#how-to-enable--simd-pthread-wasm-for-accelerated-deep-learning-computation).
>
>If the specified Wasm variant is not supported in the current browser, the SDK will gracefully fall back to a compatible variant.

## Why isn't -SIMD-Pthread Wasm enabled by default on iOS?

Due to iOS's strict memory allocation and management limitations, loading `-SIMD-Pthread Wasm` can sometimes lead to “out of memory” errors on older devices or iOS versions.

To ensure stability and compatibility, the SDK does not load `-SIMD-Pthread Wasm` by default on iOS. Instead, it automatically falls back to the most suitable Baseline or SIMD variant depending on the environment.
2 changes: 2 additions & 0 deletions barcode-reader/web/capabilities/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,5 @@ noTitleIndex: true
- [Is HTTPS Required?](is-https-required.html)
- [Pros and Cons of CDN](pros-and-cons-of-cdn.html)
- [System Requirement](system-requirement.html)
- [What's in the dist Folder of dynamsoft-barcode-reader-bundle?](what-is-in-the-dist-folder-of-dbrb.html)
- [About Adaptive WebAssembly (Wasm) Loading](about-adaptive-wasm-loading.html)
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
layout: default-layout
title: What's in the dist Folder of dynamsoft-barcode-reader-bundle?
keywords: Dynamsoft Barcode Reader, FAQ, JavaScript, tech basic, wasm, dist, files
description: How to enable -SIMD-Pthread Wasm for accelerated deep learning computation?
needAutoGenerateSidebar: false
---

# What's in the dist Folder of dynamsoft-barcode-reader-bundle?

When you install or extract the `dynamsoft-barcode-reader-bundle` package (from npm, CDN or zip installer), the `dist/` directory contains all the compiled, ready-to-use JavaScript/WebAssembly assets necessary to run the barcode reader in a browser or web app.

Below are the common files you'll find and their purposes.


## 1. dbr.bundle.js

- The main bundled JavaScript file for the barcode reader SDK
- Include this in your web page to use the SDK without separate imports


## 2. dbr.bundle.mjs (ES Module)

- An ES Module version of the bundled SDK
- Useful when using modern build tools like Webpack, Vite, or Rollup

## 3. dbr.bundle.d.ts

- Type definitions for TypeScript support
- Provides autocompletion and improves developer experience in TypeScript projects


## 4. dbr.bundle.worker.js

- Used for handling CPU-intensive barcode scanning and recognition tasks. Runs in a background thread without blocking the main thread UI

- Communicates with the main thread through message passing

## 5. WebAssembly Engine Files

`dynamsoft-barcode-reader-bundle` requires WASM and Worker scripts to work together in order to achieve highly efficient decoding capabilities.

| File | Purpose |
|------|---------|
| `*.wasm` | Core barcode reading logic compiled to WebAssembly |
| `*.wasm.js` | JavaScript loader/bootstrap for the `.wasm` file |
| `*.worker.js` | Offloads processing to a background thread |

> [!IMPORTANT]
> The dbr-bundle dynamically selects the most suitable WebAssembly variant based on the current browser environment, in order to maximize browser performance as much as possible. This means that in most cases, only one set of `*.wasm` + `*.wasm.js` files will actually be used at runtime.
> For details about the different WASM variants, please refer to [What Is Adaptive WebAssembly (Wasm) Loading and How Does It Work?](adaptive-wasm-loading.md).


## 6. Other Auxiliary Resources

These folders collectively compose the runtime environment for a JavaScript-based barcode scanner application, providing all necessary assets for ML-based scanning, data parsing, result rendering, and user interaction.

| Folder | Purpose |
|------|---------|
| `models/` | Contains pre-trained machine learning models used for barcode detection and recognition. These models enable the scanner to identify and decode various barcode formats from images and video streams in real-time. |
| `parser-resources/` | Stores resources required for data parsing and interpretation. |
| `templates/` | Contains preset CaptureVisionTemplates used for different barcode scanning scenarios. |

| `ui/` | Preset UI in `.html` files. |
2 changes: 2 additions & 0 deletions barcode-reader/web/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ Welcome! Browse the sections below for answers to common questions, configuratio
- [Is HTTPS Required?](capabilities/is-https-required.html)
- [Pros and Cons of CDN](capabilities/pros-and-cons-of-cdn.html)
- [System Requirement](capabilities/system-requirement.html)
- [What's in the dist Folder of dynamsoft-barcode-reader-bundle?](capabilities/what-is-in-the-dist-folder-of-dbr.html)
- [About Adaptive WebAssembly (Wasm) Loading](capabilities/adaptive-wasm-loading.html)

## Configuration

Expand Down