Skip to content

Commit 924961e

Browse files
Shen-wbShen-wb
committed
Deploy preview for PR 246 🛫
1 parent 418152f commit 924961e

File tree

335 files changed

+15930
-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.

335 files changed

+15930
-0
lines changed

‎pr-preview/pr-246/balloon.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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@10.5.1000/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+
## 📄 See other BarcodeScanner samples
72+
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+
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+
* [**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+
* [**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+
* [**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.

‎pr-preview/pr-246/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>List-Builder - Scan to Cart Simulation</title>
8+
9+
<!-- Dynamsoft Barcode Reader Bundle -->
10+
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.js"></script>
11+
<!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
12+
<!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
13+
14+
15+
<style>
16+
body {
17+
font-family: Arial, sans-serif;
18+
margin: 0;
19+
padding: 20px;
20+
background: #f0f0f0;
21+
}
22+
23+
header {
24+
text-align: center;
25+
margin-bottom: 30px;
26+
}
27+
28+
.scan-button {
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
padding: 8px 16px;
33+
margin: 0 auto 20px;
34+
font-size: 14px;
35+
background: #4caf50;
36+
color: #fff;
37+
border: none;
38+
border-radius: 4px;
39+
cursor: pointer;
40+
}
41+
42+
.scan-button:hover {
43+
background: #45a049;
44+
}
45+
46+
.barcode-icon {
47+
height: 12px;
48+
margin-left: 8px;
49+
}
50+
51+
.cart {
52+
max-width: 600px;
53+
margin: 0 auto;
54+
background: #fff;
55+
padding: 20px;
56+
border-radius: 5px;
57+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
58+
}
59+
60+
.cart-item {
61+
display: flex;
62+
justify-content: space-between;
63+
padding: 10px 0;
64+
border-bottom: 1px solid #ddd;
65+
}
66+
67+
.cart-item:last-child {
68+
border-bottom: none;
69+
}
70+
71+
#floatingDiv {
72+
position: fixed;
73+
top: 400px;
74+
left: 100px;
75+
width: 400px;
76+
height: 200px;
77+
background: #f9f9f9;
78+
border: 2px solid #ccc;
79+
border-radius: 8px;
80+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
81+
cursor: move;
82+
z-index: 9999;
83+
padding: 3px;
84+
box-sizing: border-box;
85+
}
86+
</style>
87+
</head>
88+
89+
<body>
90+
<header>
91+
<h1>🛒 Scan Barcode to Add Items to Cart</h1>
92+
</header>
93+
94+
<!-- Scan Button -->
95+
<button class="scan-button" id="barcodeBtn">
96+
Scan Barcode
97+
<svg class="barcode-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
98+
<rect x="2" y="4" width="2" height="16" fill="black" />
99+
<rect x="6" y="4" width="1" height="16" fill="black" />
100+
<rect x="9" y="4" width="2" height="16" fill="black" />
101+
<rect x="13" y="4" width="1" height="16" fill="black" />
102+
<rect x="16" y="4" width="2" height="16" fill="black" />
103+
<rect x="20" y="4" width="1" height="16" fill="black" />
104+
</svg>
105+
</button>
106+
107+
<!-- Floating Scanner Container -->
108+
<div id="floatingDiv" hidden></div>
109+
110+
<!-- Shopping Cart -->
111+
<div class="cart">
112+
<h2>Simulated Shopping Cart</h2>
113+
<div id="cart-items">
114+
<p>No items in cart. Start scanning!</p>
115+
</div>
116+
</div>
117+
118+
<script>
119+
// Function to initialize and launch the barcode scanner
120+
async function startScanner() {
121+
// Create a new instance of Dynamsoft BarcodeScanner with configuration options
122+
const scanner = new Dynamsoft.BarcodeScanner({
123+
// License key for Dynamsoft Barcode Reader (replace with a valid key)
124+
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9",
125+
126+
// Specify the path to the engine resources (loaded from CDN in this case)
127+
engineResourcePaths: {
128+
rootDirectory:
129+
"https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/",
130+
},
131+
132+
// Set scanning mode to detect multiple unique barcodes in one session
133+
scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
134+
135+
// Time in milliseconds to forget duplicate barcodes (prevents rapid duplicate scans)
136+
duplicateForgetTime: 5000,
137+
138+
// Configure the scanner view (UI settings)
139+
scannerViewConfig: {
140+
container: document.querySelector("#floatingDiv"), // Attach scanner UI to floating div
141+
showCloseButton: true, // Display a close button in the scanner UI
142+
},
143+
144+
// Callback triggered when a unique barcode is detected
145+
onUniqueBarcodeScanned: (result) => {
146+
// Simulate adding the scanned barcode to the shopping cart
147+
simulateAddingToCart(result.text);
148+
},
149+
});
150+
151+
// Show the floating scanner container
152+
document.querySelector("#floatingDiv").hidden = false;
153+
154+
// Launch the scanner (opens camera and starts scanning)
155+
await scanner.launch();
156+
157+
// Hide the scanner container after scanning is complete or closed
158+
document.querySelector("#floatingDiv").hidden = true;
159+
}
160+
161+
// Product List
162+
const products = [
163+
{ name: "Wireless Mouse", price: 19.99 },
164+
{ name: "Bluetooth Speaker", price: 29.99 },
165+
{ name: "USB-C Cable", price: 9.99 },
166+
{ name: "Notebook", price: 4.99 },
167+
{ name: "Water Bottle", price: 14.99 },
168+
{ name: "Laptop Stand", price: 34.99 },
169+
{ name: "Wireless Keyboard", price: 24.99 },
170+
{ name: "Portable Charger", price: 39.99 },
171+
{ name: "LED Desk Lamp", price: 22.5 },
172+
{ name: "Backpack", price: 49.99 },
173+
{ name: "Earbuds", price: 17.99 },
174+
{ name: "Smartphone Holder", price: 12.99 },
175+
{ name: "Desk Organizer", price: 15.49 },
176+
{ name: "Fitness Tracker", price: 59.99 },
177+
{ name: "Coffee Mug", price: 8.99 },
178+
{ name: "HDMI Cable", price: 6.99 },
179+
{ name: "Flash Drive 64GB", price: 14.49 },
180+
{ name: "Gaming Headset", price: 45.0 },
181+
{ name: "Desk Chair Cushion", price: 27.99 },
182+
{ name: "Sticky Notes Pack", price: 3.99 },
183+
];
184+
185+
let cart = [];
186+
187+
// Simulate adding product to cart
188+
function simulateAddingToCart(barcodeText) {
189+
const product = {
190+
...products[Math.floor(Math.random() * products.length)],
191+
};
192+
product.name += ` (${shortenString(barcodeText)})`;
193+
cart.push(product);
194+
updateCartDisplay();
195+
}
196+
197+
// Shorten barcode text
198+
const shortenString = (str, max = 15) =>
199+
str.length <= max ? str : str.slice(0, max) + "...";
200+
201+
// Update Cart UI
202+
function updateCartDisplay() {
203+
const cartDiv = document.getElementById("cart-items");
204+
cartDiv.innerHTML = "";
205+
206+
const header = document.createElement("div");
207+
header.className = "cart-item";
208+
header.innerHTML = `<strong>Item</strong><strong>Price</strong>`;
209+
cartDiv.appendChild(header);
210+
211+
cart.forEach((item) => {
212+
const div = document.createElement("div");
213+
div.className = "cart-item";
214+
div.innerHTML = `<span>${item.name}</span><span>$${item.price.toFixed(
215+
2
216+
)}</span>`;
217+
cartDiv.appendChild(div);
218+
});
219+
}
220+
221+
// Initialize Scan Button
222+
window.onload = () => {
223+
document
224+
.getElementById("barcodeBtn")
225+
.addEventListener("click", startScanner);
226+
227+
// Make the Floating Div Draggable
228+
const dragDiv = document.getElementById("floatingDiv");
229+
let offsetX = 0,
230+
offsetY = 0,
231+
isDragging = false;
232+
233+
dragDiv.addEventListener("mousedown", (e) => {
234+
isDragging = true;
235+
offsetX = e.clientX - dragDiv.offsetLeft;
236+
offsetY = e.clientY - dragDiv.offsetTop;
237+
});
238+
239+
document.addEventListener("mousemove", (e) => {
240+
if (isDragging) {
241+
dragDiv.style.left = `${e.clientX - offsetX}px`;
242+
dragDiv.style.top = `${e.clientY - offsetY}px`;
243+
}
244+
});
245+
246+
document.addEventListener("mouseup", () => (isDragging = false));
247+
};
248+
</script>
249+
</body>
250+
251+
</html>

0 commit comments

Comments
 (0)