Merge pull request #251 from Dynamsoft/_dev

Dev

Author: Shen-wb

README.md

@@ -4,18 +4,34 @@ This repository contains multiple samples that demonstrates how to use the [Dyna
 
 ## Get the Code
 
-Since the repository has a lot of history, it is slow to clone directly. Please download the [zip](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.zip)/[tar.gz](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.tar.gz), or use the `--depth 1` to clone the code.
+Cloning the full repository may be slow due to its extensive history. To get started quickly, you have a few options:
+
+- Download as [zip](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.zip)
+- Download as [tar.gz](https://github.com/Dynamsoft/barcode-reader-javascript-samples/archive/refs/heads/main.tar.gz)
+- Shallow clone with Git:
+
 ```git
 git clone https://github.com/Dynamsoft/barcode-reader-javascript-samples.git --depth 1
 ```
 
+> [!NOTE]
+> If you expect unstable network conditions or prefer to work entirely offline, you can download the [offline package from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/). This includes the full repository and all required dependencies for offline use.
+>
+> **Running the Samples Locally**
+>
+> 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/):
+>
+> 1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
+>
+> 2. Right-click on `hello-world.html` and select "Open with Five Server". This will serve the application at `http://127.0.0.1:5500/hello-world.html`.
+
 ## Request a trial license
 
 A default license is included which allows you to test the sample apps for up to 24 hours. You can [request a 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) via Dynamsoft website to evaluate further.
 
 ## 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=10.5.1000&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.3000&utm_source=sampleReadme).
 
 ## Support
 
@@ -30,6 +46,7 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 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.
 
 * [**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.
 * [**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.

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@10.5.1000/dist/",
+    rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/",
   },
   container: ".barcode-scanner-view",
   scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
@@ -73,6 +73,7 @@ A list of 20 dummy products is used, with each scan randomly adding a product to
 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.
 
 * [**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.
+* [**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.
 * [**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.

barcode-scanner-api-samples/scan-multiple-barcodes/cart-builder.html

@@ -6,10 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>List-Builder - Scan to Cart Simulation</title>
 
-  <!-- Dynamsoft Barcode Reader Bundle -->
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.js"></script>
+  <!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
   <!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
-  <!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
+  <!-- <script src="../../../dist/dbr.bundle.js"></script> -->
 
 
   <style>
@@ -70,16 +70,20 @@
 
     #floatingDiv {
       position: fixed;
-      top: 400px;
-      left: 100px;
-      width: 400px;
-      height: 200px;
+      top: 40%;
+      left: 10%;
+      width: 50%;
+      height: 25%;
+      max-width: 400px;
+      max-height: 200px;
+      min-width: 150px;
+      min-height: 150px;
       background: #f9f9f9;
       border: 2px solid #ccc;
       border-radius: 8px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       cursor: move;
-      z-index: 9999;
+      z-index: 999;
       padding: 3px;
       box-sizing: border-box;
     }
@@ -116,25 +120,22 @@ <h2>Simulated Shopping Cart</h2>
   </div>
 
   <script>
+    const dragDiv = document.getElementById("floatingDiv");
     // Function to initialize and launch the barcode scanner
     async function startScanner() {
       // Create a new instance of Dynamsoft BarcodeScanner with configuration options
       const scanner = new Dynamsoft.BarcodeScanner({
         // License key for Dynamsoft Barcode Reader (replace with a valid key)
         license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9",
 
-        // Specify the path to the engine resources (loaded from CDN in this case)
-        engineResourcePaths: {
-          rootDirectory:
-            "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/",
-        },
-
         // Set scanning mode to detect multiple unique barcodes in one session
         scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
 
         // Time in milliseconds to forget duplicate barcodes (prevents rapid duplicate scans)
         duplicateForgetTime: 5000,
 
+        showResultView: false,
+
         // Configure the scanner view (UI settings)
         scannerViewConfig: {
           container: document.querySelector("#floatingDiv"), // Attach scanner UI to floating div
@@ -225,7 +226,6 @@ <h2>Simulated Shopping Cart</h2>
         .addEventListener("click", startScanner);
 
       // Make the Floating Div Draggable
-      const dragDiv = document.getElementById("floatingDiv");
       let offsetX = 0,
         offsetY = 0,
         isDragging = false;
@@ -244,7 +244,28 @@ <h2>Simulated Shopping Cart</h2>
       });
 
       document.addEventListener("mouseup", () => (isDragging = false));
+
+      dragDiv.addEventListener("touchstart", (e) => {
+        isDragging = true;
+        offsetX = e.touches[0].clientX - dragDiv.offsetLeft;
+        offsetY = e.touches[0].clientY - dragDiv.offsetTop;
+      });
+
+      document.addEventListener("touchmove", (e) => {
+        if (isDragging) {
+          e.preventDefault();
+          dragDiv.style.left = `${e.touches[0].clientX - offsetX}px`;
+          dragDiv.style.top = `${e.touches[0].clientY - offsetY}px`;
+        }
+      }, { passive: false });
+
+      document.addEventListener("touchend", () => (isDragging = false));
     };
+
+    window.addEventListener("orientationchange", () => {
+      dragDiv.style.left = "10%"
+      dragDiv.style.top = "40%"
+    })
   </script>
 </body>
 

barcode-scanner-api-samples/scan-multiple-barcodes/hello-world.html

@@ -7,10 +7,10 @@
   <title>
     Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera)
   </title>
-  <!-- Include Dynamsoft Barcode Reader Bundle from CDN -->
-  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/dbr.bundle.js"></script>
+  <!-- Include Dynamsoft Barcode Reader Bundle via CDN -->
+  <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/dbr.bundle.js"></script>
   <!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
-  <!-- <script src="../../../distributables/dbr.bundle.js"></script> -->
+  <!-- <script src="../../../dist/dbr.bundle.js"></script> -->
 
 
   <style>
@@ -59,20 +59,23 @@ <h1 class="barcode-scanner-title">
       license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9",
 
       // Specify where to render the scanner UI
-      container: ".barcode-scanner-view",
+      container: document.querySelector(".barcode-scanner-view"),
 
       // Set scan mode to detect multiple unique barcodes per scan session
       scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE,
 
-      // Display a result view for barcodes detected
-      showResultView: true,
+      // showResultView: true,
 
       // Enable an "Upload Image" button for scanning barcodes from existing images
       showUploadImageButton: true,
 
+      // showPoweredByDynamsoft: false,
+
       // Additional configuration for the scanner UI
       scannerViewConfig: {
-        showCloseButton: true, // Display a close button on the scanner interface
+        // showCloseButton: false, // Uncomment to show a close button in the scanner UI
+        showFlashButton: true,
+        cameraSwitchControl: "toggleFrontBack"
       },
     };
 

barcode-scanner-api-samples/scan-single-barcode/README.md

@@ -1,14 +1,16 @@
-# 📦 Scan Single Barcode - Hello World
+# 📦 Scan Single Barcode 
+
+## 🚀 1.Hello World
 
 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.
 
-## ✨ Features
+### ✨ Features
 
 - Uses `BarcodeScanner` APIs from `dynamsoft-barcode-reader-bundle`
 - Scans a single barcode at a time
 - UI rendered to a container element
 
-## 🔧 How It Works
+### 🔧 How It Works
 
 The sample uses the `BarcodeScanner` class to launch a scanner and decode a single barcode from a camera stream. The key configuration includes:
 
@@ -21,7 +23,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@10.5.1000/dist/",
+    rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/",
   },
   container: ".barcode-scanner-view",
 };
@@ -34,11 +36,34 @@ const barcodeScanner = new Dynamsoft.BarcodeScanner(config);
 barcodeScanner.launch();
 ```
 
-## 📌 Notes
+### 📌 Notes
 
 - This sample scans one **single barcode**, you can configure `scanMode` to change the behavior to scan multiple barcodes.
 - To avoid network-related loading issues, consider hosting all required resources locally.
 
+## 🛒 2. Scan and Search
+
+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.
+
+### ✨ Features
+
+- Scan Barcodes using your device camera
+- Search by Text or Barcode input
+- Displays mock product data as search results
+- Responsive UI with modern styling
+
+### 🔧 How It Works
+
+1. Click the Scan button to launch the barcode scanner.
+2. Once a barcode is detected, its value is displayed along with placeholder product information.
+3. Alternatively, type a product name or barcode manually in the input field and click Search.
+4. Results are displayed in the Search Result text area.
+
+### 📌 Notes
+
+- No real backend is connected in this demo; results are mocked.
+- You can integrate with a real product API by replacing the placeholder content in the searchResult.value.
+
 ## 📄 See other BarcodeScanner samples
 
 * [**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();
 Scan multiple barcodes:
 
 * [**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.
-* [**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. 
+* [**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.

barcode-scanner-api-samples/scan-single-barcode/angular/package.json

@@ -17,7 +17,7 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
-    "dynamsoft-barcode-reader-bundle": "10.5.3000",
+    "dynamsoft-barcode-reader-bundle": "11.0.3000",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"

barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.html

@@ -4,5 +4,5 @@ <h2 class="barcode-scanner-title-text">Hello World for Angular</h2>
     <svg t="1744959268852" class="barcode-scanner-title-logo" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3482"><path d="M435.8 536.2H512V353z" fill="#DD0031" p-id="3483"></path><path d="M400.9 616.8l-52.4 130.8h-97.2L512 163V64L94.9 212.7l63.6 551.5L512 960V616.8z" fill="#DD0031" p-id="3484"></path><path d="M512 353v183.2h76.2z" fill="#C3002F" p-id="3485"></path><path d="M512 64v99l259.8 584.6h-97.2l-52.4-130.8H512V960l353.5-195.8 63.6-551.5z" fill="#C3002F" p-id="3486"></path></svg>
   </div>
   <!-- This div will host the barcode scanner's camera view -->
-  <div class="barcode-scanner-view"></div>
+  <div class="barcode-scanner-view" #scannerView></div>
 </div>

barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component } from '@angular/core';
-import { BarcodeScanner } from 'dynamsoft-barcode-reader-bundle';
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { BarcodeScanner, BarcodeScannerConfig } from 'dynamsoft-barcode-reader-bundle';
 
 @Component({
   selector: 'app-root',
@@ -10,18 +10,27 @@ import { BarcodeScanner } from 'dynamsoft-barcode-reader-bundle';
 export class AppComponent {
   title = 'angular';
 
+  @ViewChild('scannerView') scannerView!: ElementRef<HTMLDivElement>;
+
   async ngAfterViewInit(): Promise<void> {
     // Configuration object for initializing the BarcodeScanner instance
-    const config = {
+    const config: BarcodeScannerConfig = {
       license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
-      container: ".barcode-scanner-view", // Specify where to render the scanner UI
+      container: this.scannerView.nativeElement, // Specify where to render the scanner UI
 
       // Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view.
-      uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/",
+      uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.0.3000/dist/",
+
+      // showUploadImageButton: true,
+      // showPoweredByDynamsoft: false,
+      // scannerViewConfig: {
+      //   showFlashButton: true,
+      //   cameraSwitchControl: "toggleFrontBack",
+      // },
 
       // Specify custom paths for the engine resources
       engineResourcePaths: {
-        rootDirectory: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.5.3000/dist/",
+        rootDirectory: "https://cdn.jsdelivr.net/npm/",
       },
     }
 
@@ -30,7 +39,9 @@ export class AppComponent {
 
     // Launch the scanner; once a barcode is detected, display its text in an alert
     barcodeScanner.launch().then((result) => {
-      alert(result.barcodeResults[0].text);
+      if (result.barcodeResults.length) {
+        alert(result.barcodeResults[0].text);
+      }
     });
   }
 }