Skip to content

Commit fea600c

Browse files
Justin-dynamsoftJustin-dynamsoft
authored
Merge branch 'main' into 2025_Nov_re-structure
2 parents 30c7c6c + b256d5d commit fea600c

File tree

471 files changed

+22399
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

471 files changed

+22399
-0
lines changed

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
2+
# 📦 Scan Multiple Barcodes Samples
3+
4+
## 🚀 1. Hello World
5+
6+
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 **multiple barcodes continuously** from a video stream in a web application.
7+
8+
### ✨ Features
9+
10+
- Scan multiple 1D/2D barcodes
11+
- Live video decoding using `BarcodeScanner` component
12+
- Easy integration into your web application
13+
- UI rendered into a customizable container
14+
15+
### 🔧 How It Works
16+
17+
The sample uses the `BarcodeScanner` class to launch a scanner and decode barcodes from a camera stream. The key configuration includes:
18+
19+
- **License Key** – Required to activate the SDK.
20+
- **`engineResourcePaths`** – Points to required resources hosted on a CDN or locally.
21+
- **UI container** – An HTML element where the scanner is rendered.
22+
23+
```ts
24+
const config = {
25+
license: "YOUR-LICENSE-KEY",
26+
engineResourcePaths: {
27+
// feel free to change it to your own path
28+
rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/",
29+
},
30+
container: ".barcode-scanner-view",
31+
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
32+
showResultView: true,
33+
showUploadImageButton: true,
34+
scannerViewConfig: {
35+
showCloseButton: true
36+
},
37+
};
38+
```
39+
40+
The BarcodeScanner instance is created and launched like this:
41+
42+
```ts
43+
const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
44+
barcodeScanner.launch();
45+
```
46+
47+
### 📌 Notes
48+
49+
- This sample scans **multiple unique barcodes**, you can configure `scanMode` to change the behavior to scan one single barcode.
50+
- To avoid network-related loading issues, consider hosting all required resources locally.
51+
52+
## 🛒 2. Cart Builder
53+
54+
This sample simulates a shopping experience where users scan barcodes to add items to a dynamic cart.
55+
56+
### ✨ Features
57+
58+
- Scan multiple 1D/2D barcodes
59+
- Live video decoding using `BarcodeScanner` component
60+
- Floating and draggable scanner window.
61+
- Dynamic cart updates on each scan.
62+
63+
### 🔧 How It Works
64+
65+
The scanning logic mirrors the Hello World sample, but scanned results populate the cart instead of just displaying in the result view.
66+
67+
The UI features a "Scan Barcode" button, a styled cart, and basic interactivity with vanilla JavaScript and CSS.
68+
69+
A list of 20 dummy products is used, with each scan randomly adding a product to the cart showing its name, shortened barcode, and price.
70+
71+
## 🛒 3. Batch inventory
72+
73+
This project is a simple web-based inventory management tool that uses `BarcodeScanner` to scan barcodes in batches and provide real-time analysis of the scanned data.
74+
75+
### ✨ Features
76+
77+
- Automatically deduplicate barcodes in each session
78+
79+
- Show session summary:
80+
- Total unique barcodes
81+
- Barcode type distribution
82+
- Session duration
83+
84+
- Track duration of each scan session
85+
86+
### 🔧 How It Works
87+
88+
- The scanner is embedded using `BarcodeScanner` with `SM_MULTI_UNIQUE` mode to capture unique barcodes.
89+
90+
- Once the scan completes, the results are analyzed.
91+
92+
- You can click the back arrow to restart scanning.
93+
94+
### 📌 Notes
95+
96+
- The barcode value must be unique, otherwise it won’t be counted.
97+
98+
- Applicable scenarios may include:
99+
100+
- Warehouse inventory checks
101+
- Retail stock intake
102+
- Barcode-based asset tracking
103+
- Batch QR code scanning
104+
105+
## 📄 See other BarcodeScanner samples
106+
107+
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.
108+
109+
* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/hello-world.html): Scan single barcode from video stream with minimum code in JavaScript.
110+
* [**Scan and Search**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/sacn-and-search.html): Scan a barcode to retrieve the relevant product information from the database in JavaScript.
111+
* [**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): Pick one and auto-fill fields by simply opening the camera and scanning a group of barcodes.
112+
* [**Use customized template**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/use-customized-template): Use different customized templates for scanning various barcode types.
113+
* [**Read and Parse GS1-AI**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/read-and-parse-GS1-AI): Read GS1 Application Identifier (AI) barcode and parse its structured data.
114+
* [**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.
115+
* [**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.
116+
* [**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.
117+
* [**Hello World in Svelte**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/svelte): Read single barcode from camera in a Svelte application.
118+
* [**Hello World in Capacitor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/capacitor): Read single barcode from camera in a Capacitor application.
119+
* [**Hello World in Webview**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/webview): Read single barcode from camera in a Webview application.
120+
* [**Hello World in Typescript**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/native-ts): Read single barcode from camera in a Typescript application.
121+
* [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/electron): Read single barcode from camera in a Electron application.
122+
* [**Hello World in Blazor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/blazor): Read single barcode from camera in a Blazor application.
123+
* [**Hello World in RequireJS**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/requirejs.html): Read single barcode from camera in a RequireJS application.
124+
* [**Hello World in ES6**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/es6.html): Read single barcode from camera in a ES6 application.
125+
* [**Hello World in PWA**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/pwa): Read single barcode from camera in a PWA application.

‎barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.css‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html,
8+
body {
9+
width: 100%;
10+
height: 100%;
11+
min-width: 300px;
12+
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
13+
}
14+
15+
.barcode-reader-view {
16+
width: 100%;
17+
height: 100%;
18+
position: fixed;
19+
top: 0;
20+
left: 0;
21+
}
22+
23+
.summary-view {
24+
width: 100%;
25+
height: 100%;
26+
font-size: 21px;
27+
color: #ffffff;
28+
display: flex;
29+
flex-direction: column;
30+
position: absolute;
31+
display: none;
32+
}
33+
34+
.summary-view header {
35+
width: 100%;
36+
height: 50px;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
position: relative;
41+
background-color: #202020;
42+
}
43+
44+
.summary-view header .icon-back {
45+
position: absolute;
46+
top: 50%;
47+
left: 20px;
48+
transform: translateY(-50%);
49+
cursor: pointer;
50+
}
51+
52+
.summary-view .summary-container {
53+
width: 100%;
54+
height: calc(100% - 50px);
55+
flex: 1;
56+
display: flex;
57+
flex-direction: column;
58+
overflow: hidden;
59+
}
60+
61+
.summary-view .total-unique-barcodes-count {
62+
width: 100%;
63+
height: 10%;
64+
max-height: 80px;
65+
min-height: 30px;
66+
border-bottom: 1px solid #CCCCCC;
67+
padding: 0 25px;
68+
font-size: 16px;
69+
color: #323234;
70+
font-weight: 600;
71+
white-space: nowrap;
72+
display: flex;
73+
justify-content: space-between;
74+
align-items: center;
75+
}
76+
77+
.summary-view .session {
78+
width: 100%;
79+
flex: 1;
80+
padding-left: 25px;
81+
display: flex;
82+
flex-direction: column;
83+
overflow: hidden;
84+
background-color: #F5F5F5;
85+
}
86+
87+
.summary-view .session .total-count-in-this-session {
88+
width: 100%;
89+
height: 10%;
90+
max-height: 70px;
91+
min-height: 30px;
92+
font-size: 16px;
93+
color: #323234;
94+
font-weight: 600;
95+
border-bottom: 1px solid #CCCCCC;
96+
padding-right: 25px;
97+
display: flex;
98+
justify-content: space-between;
99+
align-items: center;
100+
}
101+
102+
.summary-view .session .code-type-distribution {
103+
width: 100%;
104+
border-bottom: 1px solid #CCCCCC;
105+
display: flex;
106+
flex-direction: column;
107+
flex: 1;
108+
overflow: hidden;
109+
}
110+
111+
.summary-view .session .code-type-distribution .title {
112+
width: 100%;
113+
height: 8%;
114+
max-height: 70px;
115+
min-height: 30px;
116+
font-size: 16px;
117+
font-weight: 600;
118+
color: #323234;
119+
display: flex;
120+
align-items: center;
121+
}
122+
123+
.summary-view .session .code-type-distribution .result-list {
124+
color: #323234;
125+
font-size: 16px;
126+
margin-bottom: 10px;
127+
flex: 1;
128+
overflow-y: auto;
129+
}
130+
131+
.summary-view .session .code-type-distribution .result-list li {
132+
list-style: none;
133+
line-height: 40px;
134+
padding-right: 25px;
135+
}
136+
137+
.summary-view .session .code-type-distribution .result-list li .decode-count {
138+
float: right;
139+
}
140+
141+
.summary-view .duration {
142+
width: 100%;
143+
height: 8%;
144+
max-height: 70px;
145+
min-height: 30px;
146+
font-size: 16px;
147+
font-weight: 600;
148+
color: #323234;
149+
padding: 0 25px;
150+
display: flex;
151+
justify-content: space-between;
152+
align-items: center;
153+
background-color: #F5F5F5;
154+
}
155+
156+
.summary-view .duration .time {
157+
float: right;
158+
font-weight: 400;
159+
font-size: 18px;
160+
}

0 commit comments

Comments
 (0)