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
1,560 changes: 1,560 additions & 0 deletions _includes/samples_index.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion programming/javascript/faq/unable-to-scan-aztec-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ needAutoGenerateSidebar: false
# Why am I unable to scan an Aztec code in the helloworld sample?

[<< Back to FAQ index](index.md)
# Version 10
## Version 10
```javascript
let settings = await router.getSimplifiedSettings("ReadSingleBarcode");
settings.barcodeSettings.barcodeFormatIds =
Expand Down
9 changes: 4 additions & 5 deletions programming/javascript/release-notes/js-11.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,9 @@ noTitleIndex: true

- Introduced new samples:

- [`Pick One to Fill`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html?utm_source=sampleReadme): Pick one and auto-fill fields by simply opening the camera and scanning a group of barcodes.
- [`Use Customized Template`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html?utm_source=sampleReadme): Use different customized templates for scanning various barcode types.
- [`Batch Inventory`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html?utm_source=sampleReadme): An inventory management tool scan barcodes in batches and provide real-time analysis of the scanned data.
- [`Read and Parse GS1-AI`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html?utm_source=sampleReadme): Read GS1 Application Identifier (AI) barcode and parse its structured data.
- [`Pick One to Fill`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/pick-one-to-fill/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/scenarios/pick-one-to-fill/index.html?utm_source=sampleReadme): Pick one and auto-fill fields by simply opening the camera and scanning a group of barcodes.
- [`Batch Inventory`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/scenarios/batch-inventory/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/scenarios/batch-inventory/index.html?utm_source=sampleReadme): An inventory management tool scan barcodes in batches and provide real-time analysis of the scanned data.
- [`Read and Parse GS1-AI`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html?utm_source=sampleReadme): Read GS1 Application Identifier (AI) barcode and parse its structured data.

- Template Version Validation: Introduced version checking for templates to prevent compatibility issues and mismatches.

Expand Down Expand Up @@ -129,7 +128,7 @@ noTitleIndex: true

<img src="../user-guide/assets/1103000_new_control_components.png" style="display: block; margin: 0 auto;"/>

- Introduced a new `"Scan and Search"` sample to simulate searching for relevant data via barcodes. [Give it a try!](https://demo.dynamsoft.com/Samples/DBR/JS/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html)
- Introduced a new `"Scan and Search"` sample to simulate searching for relevant data via barcodes. [Give it a try!](https://demo.dynamsoft.com/Samples/DBR/JS/scenarios/scan-and-search/scan-and-search.html)

<img src="../user-guide/assets/scan_and_search_sample.png" width="80%" style="display: block; margin: 0 auto;"/>

Expand Down
392 changes: 3 additions & 389 deletions programming/javascript/samples-demos/index.md

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ Once you've made your changes, just set the new `uiPath` in the configuration. I

## Use BarcodeScanner in frameworks

Integrating `BarcodeScanner` into frameworks like `Angular`, `React`, and `Vue` is a little different compared to native usage. You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode) directly without reading this guide.
Integrating `BarcodeScanner` into frameworks like `Angular`, `React`, and `Vue` is a little different compared to native usage. You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/frameworks) directly without reading this guide.

### Installation

Expand Down
7 changes: 4 additions & 3 deletions programming/javascript/user-guide/barcode-scanner.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,22 +87,22 @@ When getting started with Barcode Scanner, we recommend getting your own 30-day
```

<p align="center" style="text-align:center; white-space: normal; ">
<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/barcode-scanner-api-samples/scan-single-barcode/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.2.40/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/gcqjf5r7/" 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/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?ver=11.2.40&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world.html?ver=11.2.40&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>

### 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.2.40).
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/main).

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.

Expand Down Expand Up @@ -223,6 +223,7 @@ Now that the Barcode Scanner has been initialized and configured, it is ready to

> [!TIP]
> When running performance benchmarks, make sure to disable the console, avoid using `console.log()`, and run in non-debug mode whenever possible. This ensures that your benchmark results reflect true performance without interference from logging or debugging overhead.

## 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:
Expand Down
8 changes: 4 additions & 4 deletions programming/javascript/user-guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
- [Release Notes](#release-notes)
- [Next Steps](#next-steps)

**Popular Examples**
<!-- **Popular Examples**

- Hello World - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/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.2.40&utm_source=guide)
- Angular App - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/foundational-api-samples/hello-world/angular)
Expand All @@ -78,7 +78,7 @@ In this guide, you will learn step by step on how to integrate the DBR-JS SDK in
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.2.40&utm_source=guide)
- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.40/)
- Try Online Examples - [Github](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/v11.2.40/) -->

## Hello World - Simplest Implementation

Expand Down Expand Up @@ -140,15 +140,15 @@ The complete code of the "Hello World" example is shown below
<!--TOM: Update the code links-->

<p align="center" style="text-align:center; white-space: normal; ">
<a target="_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/v11.2.40/foundational-api-samples/hello-world/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.2.40/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/foundational-api-samples/hello-world/hello-world.html?ver=11.2.40&utm_source=guide" title="Run in Dynamsoft" style="text-decoration:none;">
<a target="_blank" href="https://demo.dynamsoft.com/Samples/DBR/JS/hello-world.html?ver=11.2.40&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
4 changes: 2 additions & 2 deletions programming/javascript/user-guide/use-in-framework.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ schema: schemas/dynamsoft-facilitates-mit-research-schema.json

Integrating [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (DBR-JS) into frameworks like Angular, React, and Vue is a little different compared to native usage. This guide will quickly explain the common practices of integrating DBR-JS into these frameworks.

You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world) directly without reading this guide.
You can also refer to [the ready-made samples for popular frameworks](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/frameworks) directly without reading this guide.

## Installation

Expand Down Expand Up @@ -259,7 +259,7 @@ async beforeUnmount(){
<input type="file" onChange={captureImage}>
```

> If you find it difficult to think about these, don't worry, just go to [DBRJS samples for framework](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world), copy these components into your project.
> If you find it difficult to think about these, don't worry, just go to [DBRJS samples for framework](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/frameworks), copy these components into your project.

## Component for Decoding Video

Expand Down
6 changes: 2 additions & 4 deletions programming/javascript/user-guide/zip-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,8 @@ Here are a couple of easy ways to start one:

## Sample Folders

- `barcode-scanner-api-samples/` – Samples using the Barcode Scanner API with a prebuilt interactive UI, making barcode scanning integration quick and easy.
- `foundational-api-samples/` – Samples using the foundational API with full customization capabilities.

---
- `frameworks/` – This directory contains framework-specific examples demonstrating how to integrate the Dynamsoft Barcode Reader (JavaScript edition) into common web and hybrid frameworks. Each framework folder contains one or more runnable sub-examples (for example, scan-using-foundational-api and/or scan-using-rtu-api) showing practical integration patterns.
- `scenarios/` – This directory contains focused scenario samples that show common real-world uses of the Dynamsoft Barcode Reader (JavaScript edition).

## Documentation

Expand Down