Skip to content

Commit a339682

Browse files
committed
update for v11
1 parent 9317aa2 commit a339682

File tree

3 files changed

+32
-5
lines changed

3 files changed

+32
-5
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
4646
Get the basic features working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), with RTU-BarcodeScanner APIs.
4747

4848
* [**Scan Single Barcode**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/hello-world.html?utm_source=sampleReadme): Scan single barcode from video stream with minimum code in JavaScript.
49+
* [**Scan Single Barcode**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/scan-and-search.html?utm_source=sampleReadme): Scan a barcode to retrieve the relevant product information from the database in JavaScript.
4950
* [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
5051
* [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera in a React application.
5152
* [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.

barcode-scanner-api-samples/scan-multiple-barcodes/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ A list of 20 dummy products is used, with each scan randomly adding a product to
7373
Multiple samples are provided for single barcode scanning. These samples can be easily adapted to scan multiple unique barcodes by simply updating the `config` object.
7474

7575
* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode): Scan single barcode from video stream with minimum code in JavaScript.
76+
* [**Scan and Search**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode): Scan a barcode to retrieve the relevant product information from the database in JavaScript.
7677
* [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
7778
* [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/react): Read single barcode from camera in a React application.
7879
* [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/vue): Read single barcode from camera in a Vue application.

barcode-scanner-api-samples/scan-single-barcode/README.md

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
# 📦 Scan Single Barcode - Hello World
1+
# 📦 Scan Single Barcode
2+
3+
## 🚀 1.Hello World
24

35
This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/) to scan a **single barcode** from a video stream using plain JavaScript.
46

5-
## ✨ Features
7+
### ✨ Features
68

79
- Uses `BarcodeScanner` APIs from `dynamsoft-barcode-reader-bundle`
810
- Scans a single barcode at a time
911
- UI rendered to a container element
1012

11-
## 🔧 How It Works
13+
### 🔧 How It Works
1214

1315
The sample uses the `BarcodeScanner` class to launch a scanner and decode a single barcode from a camera stream. The key configuration includes:
1416

@@ -34,11 +36,34 @@ const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
3436
barcodeScanner.launch();
3537
```
3638

37-
## 📌 Notes
39+
### 📌 Notes
3840

3941
- This sample scans one **single barcode**, you can configure `scanMode` to change the behavior to scan multiple barcodes.
4042
- To avoid network-related loading issues, consider hosting all required resources locally.
4143

44+
## 🛒 2. Scan and Search
45+
46+
This simple demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/) to scan a product barcode and simulate a search from a product database.
47+
48+
### ✨ Features
49+
50+
- Scan Barcodes using your device camera
51+
- Search by Text or Barcode input
52+
- Displays mock product data as search results
53+
- Responsive UI with modern styling
54+
55+
### 🔧 How It Works
56+
57+
1. Click the Scan button to launch the barcode scanner.
58+
2. Once a barcode is detected, its value is displayed along with placeholder product information.
59+
3. Alternatively, type a product name or barcode manually in the input field and click Search.
60+
4. Results are displayed in the Search Result text area.
61+
62+
### 📌 Notes
63+
64+
- No real backend is connected in this demo; results are mocked.
65+
- You can integrate with a real product API by replacing the placeholder content in the searchResult.value.
66+
4267
## 📄 See other BarcodeScanner samples
4368

4469
* [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/angular): Read single barcode from camera in an Angular application.
@@ -48,4 +73,4 @@ barcodeScanner.launch();
4873
Scan multiple barcodes:
4974

5075
* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Scan multiple barcodes from video stream with minimum code in JavaScript.
51-
* [**Cart Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart.
76+
* [**Cart Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart.

0 commit comments

Comments
 (0)