You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,6 +46,7 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
46
46
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.
47
47
48
48
*[**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.
49
50
*[**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.
50
51
*[**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.
51
52
*[**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.
Copy file name to clipboardExpand all lines: barcode-scanner-api-samples/scan-multiple-barcodes/README.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -73,6 +73,7 @@ A list of 20 dummy products is used, with each scan randomly adding a product to
73
73
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.
74
74
75
75
*[**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.
76
77
*[**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.
77
78
*[**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.
78
79
*[**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.
Copy file name to clipboardExpand all lines: barcode-scanner-api-samples/scan-single-barcode/README.md
+30-5Lines changed: 30 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,16 @@
1
-
# 📦 Scan Single Barcode - Hello World
1
+
# 📦 Scan Single Barcode
2
+
3
+
## 🚀 1.Hello World
2
4
3
5
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.
4
6
5
-
## ✨ Features
7
+
###✨ Features
6
8
7
9
- Uses `BarcodeScanner` APIs from `dynamsoft-barcode-reader-bundle`
8
10
- Scans a single barcode at a time
9
11
- UI rendered to a container element
10
12
11
-
## 🔧 How It Works
13
+
###🔧 How It Works
12
14
13
15
The sample uses the `BarcodeScanner` class to launch a scanner and decode a single barcode from a camera stream. The key configuration includes:
14
16
@@ -34,11 +36,34 @@ const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
34
36
barcodeScanner.launch();
35
37
```
36
38
37
-
## 📌 Notes
39
+
###📌 Notes
38
40
39
41
- This sample scans one **single barcode**, you can configure `scanMode` to change the behavior to scan multiple barcodes.
40
42
- To avoid network-related loading issues, consider hosting all required resources locally.
41
43
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
+
42
67
## 📄 See other BarcodeScanner samples
43
68
44
69
*[**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();
48
73
Scan multiple barcodes:
49
74
50
75
*[**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