Dev

README.md

@@ -1,6 +1,45 @@
-# Dynamsoft Barcode Reader samples for the web
+# Dynamsoft Barcode Reader Samples for the Web
 
-This repository contains multiple samples that demonstrates how to use the [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/?utm_source=sampleReadme) for creating web-based barcode scanning applications.
+This repository contains multiple samples that demonstrate how to use the [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/?utm_source=sampleReadme) for creating web-based barcode scanning applications.
+
+---
+
+## System Requirements
+
+### Secure Context (HTTPS Deployment)
+
+When deploying your application/website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons:
+
+- Access to the camera video stream is only granted in a security context. Most browsers impose this restriction.
+- Dynamsoft License requires a secure context to work.
+
+> Some browsers like Chrome may grant access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and testing.
+
+### Browser Compatibility
+
+The following table is a list of supported browsers based on the above requirements:
+
+| Browser Name |     Version      |
+| :----------: | :--------------: |
+|    Chrome    | v78+<sup>1</sup> |
+|   Firefox    | v68+<sup>1</sup> |
+|     Edge     |       v79+       |
+|    Safari    |      v14.5+      |
+
+<sup>1</sup> Devices running iOS need to be on iOS 14.5+ for camera video streaming to work in Chrome, Firefox or other apps using webviews.
+
+Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK.
+
+---
+
+## License
+
+A default trial 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 the Dynamsoft website to evaluate further.
+
+>[!IMPORTANT]
+> Once your trial license expires, the SDK will throw an error and cease to function. You can visit the [Dynamsoft Customer Portal](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=sampleReadme&package=js) to view your trial license details. Additionally, it's possible to extend the trial period via the customer portal, allowing for a total trial duration of 60 days.
+
+---
 
 ## Get the Code
 
@@ -16,28 +55,75 @@ git clone https://github.com/Dynamsoft/barcode-reader-javascript-samples.git --d
 
 > [!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
+---
+
+## Running the Samples Locally
+
+The standalone samples (`hello-world.html`, `scan-a-single-barcode.html`, `read-an-image.html`) and scenario samples load the SDK from a CDN, so you can open them directly by double-clicking — no web server required (an internet connection is needed).
+
+To browse all available samples, open `index.html` in your browser — it links to every sample in the repository.
+
+For framework samples, follow the instructions in each subfolder's README (typically `npm install` then `npm run dev`).
+
+If you need a web server for standalone or scenario samples (for example, to serve SDK resources from a local `dist/` folder), here's a quick method using [Visual Studio Code](https://code.visualstudio.com/):
 
-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.
+1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
+
+2. Right-click on an HTML file and select "Open with Five Server". This will serve the application at `http://127.0.0.1:5500/`.
+
+---
+
+## Sample Folders
+
+The repository includes two main sample directories:
+
+- **`frameworks/`** - Framework-specific examples demonstrating how to integrate Dynamsoft Barcode Reader into common web and hybrid frameworks. Each framework folder contains one or more runnable sub-examples (such as `scan-using-foundational-api` and/or `scan-using-rtu-api`) showing practical integration patterns.
+
+- **`scenarios/`** - Focused scenario samples that show common real-world uses of Dynamsoft Barcode Reader.
+
+---
+
+## Choosing an API
+
+The SDK provides two approaches for integrating barcode scanning capabilities:
+
+### Ready-To-Use (RTU) API — BarcodeScanner
+
+The RTU API offers the quickest path to a working barcode scanner (**Recommended for most users**):
+
+- **One-line integration** – Launch a full scanner with a single API call
+- **Built-in UI** – Pre-designed viewfinder and scan region highlighting
+- **Simple configuration** – Customize behavior through intuitive config objects
+
+### Foundational APIs
+
+If you are looking for a fully customizable barcode decoding library with complete control over the scanning process and UI, you are welcome to use the Foundational APIs.
+
+---
 
 ## 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.2.4000&utm_source=sampleReadme).
 
+- [Barcode Scanner API Docs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?utm_source=sampleReadme)
+- [Foundational API Docs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?utm_source=sampleReadme)
+
+---
+
 ## Support
 
 If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).
 
-## Sample list
+---
+
+## Sample List
+
+### Hello World
+
+- [hello-world.html](./hello-world.html) — Demonstrates continuously scanning and collecting multiple unique barcodes via camera.
+- [scan-a-single-barcode.html](./scan-a-single-barcode.html) — Demonstrates single-barcode scanning: stops and returns as soon as the first barcode is detected.
+- [read-an-image.html](./read-an-image.html) — Demonstrates how to decode and read barcodes from uploaded image files.
 
 ### Hello-world
 
@@ -69,12 +155,13 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 - [show-result-texts-on-the-video/](./scenarios/show-result-texts-on-the-video/) — Overlay decoded text on live video while scanning.
 - [batch-inventory/](./scenarios/batch-inventory/) — Batch scanning workflow for inventory collection and export.
 - [read-a-drivers-license/](./scenarios/read-a-drivers-license/) — Demo for reading and parsing a driver's license image/data.
-- [read-vin/](./scenarios/read-vin/) — Demo for reading and parsing a VIN(vehicle identification number) code.
+- [read-vin/](./scenarios/read-vin/) — Demo for reading and parsing a VIN (vehicle identification number) code.
 - [read-and-parse-GS1-AI/](./scenarios/read-and-parse-GS1-AI/) — Example showing GS1 AI parsing and data extraction.
 - [scan-qr-code/](./scenarios/scan-qr-code/) — QR code targeted demo and settings.
 - [scan-common-1D-and-2D/](./scenarios/scan-common-1D-and-2D/) — Demo configured to detect a wide range of barcode formats.
 - [scan-common-2D-codes/](./scenarios/scan-common-2D-codes/) — Focused on common 2D barcode formats decoding.
 - [scan-datamatrix-code/](./scenarios/scan-datamatrix-code/) — DataMatrix code targeted demo with optimized settings.
+- [scan-dpm-codes/](./scenarios/scan-dpm-codes/) — Demo for reading Direct Part Mark (DPM) codes etched or marked on surfaces.
 - [scan-1D-Retail/](./scenarios/scan-1D-Retail/) — 1D retail barcode tuning example.
 - [scan-1D-Industrial/](./scenarios/scan-1D-Industrial/) — 1D industrial barcode tuning example.
 - [scan-from-distance/](./scenarios/scan-from-distance/) — Demo for scanning barcodes from a distance (zoom/ROI tuning).
@@ -83,4 +170,4 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www.
 
 ### Official Online Demo
 
-- [**Official Online Demo**](https://demo.dynamsoft.com/barcode-reader-js): Official demo for Dynamsoft Barcode Reader JavaScript Edition (written in Vue). Take our barcode scanner demo and see how it works in different modes!
+- [**Official Online Demo**](https://demo.dynamsoft.com/barcode-reader-js): Try the Dynamsoft Barcode Reader JavaScript Edition demo (written in Vue) and see how it works in different modes!

frameworks/angular/scan-using-foundational-api/package.json

@@ -10,23 +10,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "19.2.18",
-    "@angular/common": "19.2.18",
-    "@angular/compiler": "19.2.18",
-    "@angular/core": "19.2.18",
-    "@angular/forms": "19.2.18",
-    "@angular/platform-browser": "19.2.18",
-    "@angular/platform-browser-dynamic": "19.2.18",
-    "@angular/router": "19.2.18",
+    "@angular/animations": "19.2.19",
+    "@angular/common": "19.2.19",
+    "@angular/compiler": "19.2.19",
+    "@angular/core": "19.2.19",
+    "@angular/forms": "19.2.19",
+    "@angular/platform-browser": "19.2.19",
+    "@angular/platform-browser-dynamic": "19.2.19",
+    "@angular/router": "19.2.19",
     "dynamsoft-barcode-reader-bundle": "11.2.4000",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "19.2.18",
-    "@angular/cli": "19.2.18",
-    "@angular/compiler-cli": "19.2.18",
+    "@angular-devkit/build-angular": "19.2.19",
+    "@angular/cli": "19.2.19",
+    "@angular/compiler-cli": "19.2.19",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",

frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts

@@ -7,9 +7,7 @@ CoreModule.engineResourcePaths.rootDirectory = 'https://cdn.jsdelivr.net/npm/';
  * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
  */
 
-LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', {
-  executeNow: true,
-});
+LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', { executeNow: true });
 
 /**
  * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days.

frameworks/angular/scan-using-rtu-api/README.md

@@ -1,6 +1,6 @@
 # 📦 Scan Single Barcode - Angular
 
-This sample shows how to integrate the `BarcodeScanner` from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) in an **Angular** project for scanning a single barcode from live video.
+This sample shows how to integrate the `BarcodeScanner` from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) in an **Angular** project for scanning a single barcode from live video.
 
 ## ✨ Features
 

frameworks/angular/scan-using-rtu-api/src/app/app.component.css

@@ -1,7 +1,6 @@
 .barcode-scanner-hello-world-page {
   width: 100%;
   height: 100%;
-  text-align: center;
 }
 
 .barcode-scanner-title {

frameworks/angular/scan-using-rtu-api/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
-import { BarcodeScanner, BarcodeScannerConfig } from 'dynamsoft-barcode-reader-bundle';
+import { BarcodeScanner, BarcodeScannerConfig, EnumScanMode } from 'dynamsoft-barcode-reader-bundle';
 
 @Component({
   selector: 'app-root',
@@ -20,11 +20,18 @@ export class AppComponent {
 
       // Specify where to render the scanner UI
       // If container is not specified, the UI will take up the full screen
-      container: this.barcodeScannerViewRef.nativeElement, 
+      container: this.barcodeScannerViewRef.nativeElement,
 
       // 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@11.2.4000/dist/ui/barcode-scanner.ui.xml",
 
+      /*
+        scanMode controls the scanning behavior:
+          - SM_MULTI_UNIQUE: Continuously scans and collects each unique barcode.
+          - SM_SINGLE: Stops scanning after the first barcode is detected.
+      */
+      scanMode: EnumScanMode.SM_MULTI_UNIQUE,
+
       // showUploadImageButton: true,
       // scannerViewConfig: {
       //   showFlashButton: true,
@@ -35,6 +42,9 @@ export class AppComponent {
       engineResourcePaths: {
         rootDirectory: "https://cdn.jsdelivr.net/npm/",
       },
+
+      // The watermark can be removed via showPoweredByDynamsoft configuration option.
+      // showPoweredByDynamsoft: false,
     }
 
     // Create an instance of the BarcodeScanner with the provided configuration
@@ -46,7 +56,7 @@ export class AppComponent {
       alert(result.barcodeResults[0].text);
     }
   }
-  async ngOnDestroy(): Promise<void> { 
+  async ngOnDestroy(): Promise<void> {
     // Dispose of the barcode scanner when the component unmounts
     this.barcodeScanner?.dispose();
   }

frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js

@@ -1,70 +1,73 @@
 // Create JS function "startVideoDecode"
 window.startVideoDecode = async () => {
-    const cameraViewContainer = document.getElementById("camera-view-container");
-    const resultsContainer = document.getElementById("results");
+  const cameraViewContainer = document.getElementById("camera-view-container");
+  const resultsContainer = document.getElementById("results");
 
-    try {
-        // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-        const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-        cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
-        // Get default UI and append it to DOM.
-        cameraViewContainer.style.display = "block"
-        cameraViewContainer.append(cameraView.getUIElement());
+  try {
+    // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+    const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
+    cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
+    // Get default UI and append it to DOM.
+    cameraViewContainer.style.display = "block"
+    cameraViewContainer.append(cameraView.getUIElement());
 
-        // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-        cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
-        cvRouter.setInput(cameraEnhancer);
+    // Hide the "Powered by Message" overlay on the scanner view
+    // cameraView.setPowerByMessageVisible(false);
 
-        // Define a callback for results.
-        cvRouter.addResultReceiver({
-            onDecodedBarcodesReceived: (result) => {
-                if (!result.barcodeResultItems.length) return;
+    // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+    cvRouter.setInput(cameraEnhancer);
 
-                resultsContainer.textContent = "";
-                for (let item of result.barcodeResultItems) {
-                    resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
-                }
-            },
-        });
+    // Define a callback for results.
+    cvRouter.addResultReceiver({
+      onDecodedBarcodesReceived: (result) => {
+        if (!result.barcodeResultItems.length) return;
 
-        // Filter out unchecked and duplicate results.
-        const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
-        // Filter out unchecked barcodes.
-        filter.enableResultCrossVerification("barcode", true);
-        // Filter out duplicate barcodes within 3 seconds.
-        filter.enableResultDeduplication("barcode", true);
-        await cvRouter.addResultFilter(filter);
+        resultsContainer.textContent = "";
+        for (let item of result.barcodeResultItems) {
+          resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+        }
+      },
+    });
 
-        // Open camera and start scanning barcode.
-        await cameraEnhancer.open();
-
-        cameraView.setScanLaserVisible(true);
-        await cvRouter.startCapturing("ReadBarcodes_SpeedFirst");
-    } catch (ex) {
-        let errMsg = ex.message || ex;
-        console.error(ex);
-    }
+    // Filter out unchecked and duplicate results.
+    const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
+    // Filter out unchecked barcodes.
+    filter.enableResultCrossVerification("barcode", true);
+    // Filter out duplicate barcodes within 3 seconds.
+    filter.enableResultDeduplication("barcode", true);
+    await cvRouter.addResultFilter(filter);
+
+    // Open camera and start scanning barcode.
+    await cameraEnhancer.open();
+
+    cameraView.setScanLaserVisible(true);
+    await cvRouter.startCapturing("ReadBarcodes_SpeedFirst");
+  } catch (ex) {
+    let errMsg = ex.message || ex;
+    console.error(ex);
+  }
 }
 
 // Create JS function "stopVideoDecode"
 window.stopVideoDecode = async () => {
-    const cameraViewContainer = document.getElementById("camera-view-container");
-    const resultsContainer = document.getElementById("results");
+  const cameraViewContainer = document.getElementById("camera-view-container");
+  const resultsContainer = document.getElementById("results");
 
-    try {
-        if (!cvRouter?.disposed) {
-            await cvRouter?.dispose();
-        }
-        if (!cameraEnhancer?.disposed) {
-            await cameraEnhancer?.dispose();
-        }
-
-        // Reset components
-        cameraViewContainer.style.display = "none";
-        cameraViewContainer.innerHTML = "";
-        resultsContainer.textContent = "";
-    } catch (ex) {
-        let errMsg = ex.message || ex;
-        console.error(ex);
+  try {
+    if (!cvRouter?.disposed) {
+      await cvRouter?.dispose();
     }
+    if (!cameraEnhancer?.disposed) {
+      await cameraEnhancer?.dispose();
+    }
+
+    // Reset components
+    cameraViewContainer.style.display = "none";
+    cameraViewContainer.innerHTML = "";
+    resultsContainer.textContent = "";
+  } catch (ex) {
+    let errMsg = ex.message || ex;
+    console.error(ex);
+  }
 }