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
A lightweight demo for batch scanning and simple inventory collection. The sample uses the Dynamsoft Barcode Reader bundle to capture barcodes in sessions, automatically deduplicate entries, and present a session summary for quick analysis or export.
- Batch scanning mode with automatic per-session deduplication
13
+
- Real-time session summary:
14
+
- Total unique barcodes
15
+
- Barcode format/type distribution
16
+
- Session duration
17
+
18
+
## 🔧 How it works
19
+
20
+
- The page creates a BarcodeScanner instance configured for multi-unique capture (SM_MULTI_UNIQUE or equivalent) so duplicate barcodes within the same session are ignored.
21
+
- Scanned values are accumulated in-memory and analyzed to produce session metrics (counts, distribution, duration).
22
+
- Users can stop a session to view the summary, or restart scanning to begin a new session.
23
+
24
+
## Quick start
25
+
26
+
Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
27
+
28
+
1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
29
+
30
+
2. Right-click on `index.html` and select "Open with Five Server".
31
+
32
+
## 💡 Tips
33
+
34
+
- Use a fixed camera mount or consistent hand positioning for higher throughput.
35
+
- For large exports, consider paginating or streaming results to a backend.
36
+
37
+
## 📌 Notes
38
+
39
+
- Run on localhost or HTTPS to allow camera access.
40
+
- This demo is intended for prototyping and UX testing; integrate with backend storage for production use.
41
+
- Replace the included demo/trial license with a valid Dynamsoft license for extended evaluation.
A lightweight demo that simulates a shopping experience: scan a barcode and add a product to a dynamic on‑page cart. The sample uses the Dynamsoft Barcode Reader bundle to perform live video decoding and demonstrates a simple UX for point‑of‑sale or prototype flows.
4
+
5
+
## Included files
6
+
7
+
-`cart-builder.html` — single‑file sample.
8
+
9
+
## ✨ Features
10
+
11
+
- Live camera decoding (1D / 2D) using Dynamsoft BarcodeScanner API
12
+
- Floating, draggable scanner window attached to the page
13
+
- Sessioned scans: each unique scan appends a product to the simulated cart
14
+
- Demo product list (20 dummy products) and simple cart UI with name and price
15
+
16
+
## 🔧 How it works
17
+
18
+
- The page loads the Dynamsoft Barcode Reader bundle and creates a BarcodeScanner instance configured with:
- a duplicateForgetTime to avoid rapid duplicate captures
21
+
- a scanner UI mounted into a floating container
22
+
- When a unique barcode is detected, the sample maps the scan to a random demo product, appends it to the in‑memory cart, and refreshes the cart display.
23
+
- The floating scanner can be dragged around the viewport and is hidden when not in use.
24
+
25
+
## Quick start
26
+
27
+
Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
28
+
29
+
1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
30
+
31
+
2. Right-click on `cart-builder.html` and select "Open with Five Server".
32
+
33
+
## 💡 Tips
34
+
35
+
- Use localhost or HTTPS to allow camera access.
36
+
- Ensure good lighting and hold barcodes steady for best results.
37
+
- For real projects, replace the demo product mapping with a backend lookup using the scanned barcode value.
38
+
39
+
## 📌 Notes
40
+
41
+
- This is a front‑end prototype intended for demo and UX testing only.
42
+
- Replace the license key with a valid Dynamsoft license for production/testing beyond the included trial behavior.
43
+
- See the repository root `README.md` for running instructions, trial licenses and API documentation links.
Copy file name to clipboardExpand all lines: scenarios/debug/README.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ This sample is designed to:
6
6
2. Check if your device and browser are compatible with the camera and to what extent.
7
7
3. Collect video frames for analysis. (Require to host the sample locally)
8
8
9
-
You can directly debug 1 and 2 in this link: [https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/others/debug/public/index.html](https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/others/debug/public/index.html)
9
+
You can directly debug 1 and 2 in this link: [https://demo.dynamsoft.com/Samples/DBR/JS/scenarios/debug/public/index.html](https://demo.dynamsoft.com/Samples/DBR/JS/scenarios/debug/public/index.html)
10
10
11
11
Item 3 we will introduce in detail.
12
12
@@ -20,7 +20,7 @@ The following shows how to host the sample and collect frames.
20
20
21
21
The sample can be downloaded from
22
22
23
-
<atarget_="blank"href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug"alt="Debug Sample on GitHub">Debug Sample on GitHub</a>
23
+
<atarget_="blank"href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/debug"alt="Debug Sample on GitHub">Debug Sample on GitHub</a>
24
24
25
25
Note that the entire folder is required. To download only the files in this folder, try using "https://downgit.github.io/#/home".
A focused demo that helps locate and highlight items in a UI by scanning barcodes. Useful for inventory lookup, picking workflows, or warehouse/retail assistance where scanning a code should point you to the corresponding item on screen.
4
+
5
+
## Included files
6
+
7
+
-`index.html` — main demo page (camera + UI to locate items).
8
+
-`icons/` — UI icons used by the sample (checkmark, cross, logo).
9
+
10
+
## ✨ Features
11
+
12
+
- Scan a barcode (or fill in text) and find the matching item in the displayed list
13
+
- Visual highlight and status feedback for match / no-match cases
14
+
- Simple UI for quick prototyping of locate-by-barcode workflows
15
+
16
+
## 🔧 How it works
17
+
18
+
- The page runs a barcode scanner that decodes incoming frames.
19
+
- Decoded barcode values are compared against an on-page item dataset (client-side lookup).
20
+
- When a match is found the sample highlights the matched item and shows contextual feedback; when no match is found it displays an unmatched-result state.
21
+
22
+
## Quick start
23
+
24
+
Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
25
+
26
+
1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
27
+
28
+
2. Right-click on `index.html` and select "Open with Five Server".
29
+
30
+
## 💡 Tips
31
+
32
+
- Good lighting and steady camera framing improve decode accuracy.
33
+
- Use the icons folder as a reference for UI feedback and quick prototyping.
34
+
35
+
## 📌 Notes
36
+
37
+
- Serve via localhost or HTTPS to enable camera access.
38
+
- See the repository root `README.md` for running instructions, trial licenses and API documentation
A compact demo that helps pick the correct item from several candidates by scanning barcodes. The sample uses the Dynamsoft Barcode Reader bundle to decode barcodes from camera or image input and demonstrates a simple match-and-highlight UX.
4
+
5
+
## Included files
6
+
7
+
-`index.html` — main demo page.
8
+
-`index.css` — styles for the demo.
9
+
-`package-label.png` — sample product label used by the demo.
10
+
11
+
## ✨ Features
12
+
13
+
- Field-specific Camera Activation Open the camera individually for different fields.
14
+
- Manual control when to start decoding Start decoding manually after aiming at the target to reduce the risk of misreads and missed barcodes.
15
+
- Auto-Fill with Scan Result Automatically populates input fields with scanned barcode values.
16
+
17
+
## 🔄 Sample Usage Flow
18
+
19
+
1. Click the "Open Camera" button to activate the camera.
20
+
2. Aim at the sample image shown below.
21
+
3. Click the "Decode" button to start barcode recognition.
22
+
4. If only one barcode is detected, its value will be automatically filled into the corresponding field. If multiple barcodes are detected, the video stream will freeze, and you’ll need to manually select one from the decoded results to fill in.
23
+
24
+
## Quick start
25
+
26
+
Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
27
+
28
+
1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
29
+
30
+
2. Right-click on `index.html` and select "Open with Five Server".
31
+
32
+
## 📌 Notes
33
+
34
+
- This usage is especially suitable for scenarios with densely packed barcodes, where secondary confirmation or manual selection is highly needed.
35
+
- You can find a sample reference image in ·./pick-one-to-fill/·
A focused demo that decodes and parses barcode data from driver's license images (camera or file input). The sample demonstrates extracting structured fields (name, DOB, license number, address, etc.) using a parsing template.
4
+
5
+
## Included files
6
+
7
+
-`index.html` — main demo page (camera + image input UI).
8
+
-`SampleDriversLicense.jpg` — example license image.
9
+
-`read_and_parse_dl.json` — parsing template / configuration used by the sample.
10
+
-`style.css` — page styles.
11
+
12
+
## ✨ Features
13
+
14
+
- Decode driver's license barcode (PDF417 / AAMVA formats) from camera or static image
15
+
- Parse and display structured fields
16
+
- Simple UI for testing and validating parsing rules
17
+
18
+
## 🔧 How it works
19
+
20
+
- The page initializes the barcode scanner to decode the license barcode from an image or live video frame.
21
+
- The sample parsed fields are rendered in the UI alongside the raw decoded text; the sample also highlights parsing errors or missing fields for easier troubleshooting.
22
+
23
+
## Quick start
24
+
25
+
Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/):
26
+
27
+
1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
28
+
29
+
2. Right-click on `index.html` and select "Open with Five Server".
30
+
31
+
## 💡 Tips
32
+
33
+
- Use high-resolution images or a higher camera resolution for reliable decoding and parsing.
34
+
- Test with multiple sample licenses to ensure the parsing template covers expected variants.
35
+
36
+
## 📌 Notes
37
+
38
+
- Serve via localhost or HTTPS to enable camera access.
39
+
- Replace the included trial/demo license with a valid Dynamsoft license for extended evaluation.
40
+
- See the repository root `README.md` for running instructions and API documentation.
0 commit comments