Dev

README.md

@@ -31,7 +31,7 @@ A default license is included which allows you to test the sample apps for up to
 
 ## Documentation
 
-For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/?ver=11.0.3000&utm_source=sampleReadme).
+For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/?ver=11.0.6000&utm_source=sampleReadme).
 
 ## Support
 
@@ -47,6 +47,8 @@ Get the basic features working with plain/native JavaScript or within a framewor
 
 * [**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.
 * [**Scan And Search**](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.
+* [**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/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/pick-one-to-fill/index.html?utm_source=sampleReadme): Pick one and auto-fill fields by simply opening the camera and scanning a group of barcodes.
+* [**Use Customized Template**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-single-barcode/use-customized-template/index.html?utm_source=sampleReadme): Use different customized templates for scanning various barcode types.
 * [**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.
 * [**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.
 * [**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.
@@ -55,6 +57,7 @@ Get the basic features working with plain/native JavaScript or within a framewor
 
 * [**Scan Multiple Barcodes**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
 * [**Cart Builder**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html?utm_source=sampleReadme): Simulates a shopping experience where users scan barcodes to add items to a dynamic cart in JavaScript.
+* [**Batch Inventory**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/blob/main/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/barcode-scanner-api-samples/scan-multiple-barcodes/batch-inventory/index.html?utm_source=sampleReadme): An inventory management tool scan barcodes in batches and provide real-time analysis of the scanned data.
 
 ### Foundational API samples
 
@@ -83,6 +86,7 @@ Get the basic features of the library working with plain/native JavaScript or wi
 * [**Read a Driver's License**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/read-a-drivers-license/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/read-a-drivers-license/index.html?utm_source=sampleReadme): Read the PDF417 barcode on a driver's license (AAMVA compliant) and parse it.
 * [**Show Result Texts on the Video**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/show-result-texts-on-the-video.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/show-result-texts-on-the-video.html?utm_source=sampleReadme): Read barcodes via camera and show result texts on the video.
 * [**Locate an Item with Barcode**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/locate-an-item-with-barcode/index.html?utm_source=sampleReadme): Find a specific item in a large collection by scanning its unique barcode
+* [**Read and Parse GS1-AI**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/read-and-parse-GS1-AI/index.html?utm_source=sampleReadme): Read GS1 Application Identifier (AI) barcode and parse its structured data.
 
 ***Others***
 

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

@@ -25,7 +25,7 @@ const config = {
   license: "YOUR-LICENSE-KEY",
   engineResourcePaths: {
     // feel free to change it to your own path
-    rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/",
+    rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.6000/dist/",
   },
   container: ".barcode-scanner-view",
   scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
@@ -68,6 +68,40 @@ The UI features a "Scan Barcode" button, a styled cart, and basic interactivity
 
 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.
 
+## 🛒 3. Batch inventory
+
+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.
+
+### ✨ Features
+
+- Automatically deduplicate barcodes in each session
+
+- Show session summary:
+  - Total unique barcodes
+  - Barcode type distribution
+  - Session duration
+
+- Track duration of each scan session
+
+### 🔧 How It Works
+
+- The scanner is embedded using `BarcodeScanner` with `SM_MULTI_UNIQUE` mode to capture unique barcodes.
+
+- Once the scan completes, the results are analyzed.
+
+- You can click the back arrow to restart scanning.
+
+### 📌 Notes
+
+- The barcode value must be unique, otherwise it won’t be counted.
+
+- Applicable scenarios may include:
+
+  - Warehouse inventory checks
+  - Retail stock intake
+  - Barcode-based asset tracking
+  - Batch QR code scanning
+
 ## 📄 See other BarcodeScanner samples
 
 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.

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

@@ -0,0 +1,160 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  min-width: 300px;
+  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
+}
+
+.barcode-reader-view {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.summary-view {
+  width: 100%;
+  height: 100%;
+  font-size: 21px;
+  color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  display: none;
+}
+
+.summary-view header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  background-color: #202020;
+}
+
+.summary-view header .icon-back {
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.summary-view .summary-container {
+  width: 100%;
+  height: calc(100% - 50px);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.summary-view .total-unique-barcodes-count {
+  width: 100%;
+  height: 10%;
+  max-height: 80px;
+  min-height: 30px;
+  border-bottom: 1px solid #CCCCCC;
+  padding: 0 25px;
+  font-size: 16px;
+  color: #323234;
+  font-weight: 600;
+  white-space: nowrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.summary-view .session {
+  width: 100%;
+  flex: 1;
+  padding-left: 25px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #F5F5F5;
+}
+
+.summary-view .session .total-count-in-this-session {
+  width: 100%;
+  height: 10%;
+  max-height: 70px;
+  min-height: 30px;
+  font-size: 16px;
+  color: #323234;
+  font-weight: 600;
+  border-bottom: 1px solid #CCCCCC;
+  padding-right: 25px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.summary-view .session .code-type-distribution {
+  width: 100%;
+  border-bottom: 1px solid #CCCCCC;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.summary-view .session .code-type-distribution .title {
+  width: 100%;
+  height: 8%;
+  max-height: 70px;
+  min-height: 30px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323234;
+  display: flex;
+  align-items: center;
+}
+
+.summary-view .session .code-type-distribution .result-list {
+  color: #323234;
+  font-size: 16px;
+  margin-bottom: 10px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.summary-view .session .code-type-distribution .result-list li {
+  list-style: none;
+  line-height: 40px;
+  padding-right: 25px;
+}
+
+.summary-view .session .code-type-distribution .result-list li .decode-count {
+  float: right;
+}
+
+.summary-view .duration {
+  width: 100%;
+  height: 8%;
+  max-height: 70px;
+  min-height: 30px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #323234;
+  padding: 0 25px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #F5F5F5;
+}
+
+.summary-view .duration .time {
+  float: right;
+  font-weight: 400;
+  font-size: 18px;
+}