Dynamsoft · Justin-dynamsoft · Dec 15, 2025 · Dec 24, 2025 · Jan 6, 2026 · Jan 6, 2026
diff --git a/README.md b/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,80 @@ 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/):
+
+1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace.
 
-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.
+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
+
+- [hello-world.html](./hello-world.html) — The simplest example to get started with single barcode scanning.
+- [read-an-image.html](./read-an-image.html) — Demonstrates how to decode and read barcodes from uploaded image files.
 
 ### Frameworks
 
@@ -64,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).
@@ -78,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!
diff --git a/frameworks/angular/scan-using-foundational-api/package.json b/frameworks/angular/scan-using-foundational-api/package.json
@@ -10,30 +10,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.0",
-    "@angular/common": "^17.3.0",
-    "@angular/compiler": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
-    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
-    "@angular/router": "^17.3.0",
+    "@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.14.3"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.7",
-    "@angular/cli": "^17.3.7",
-    "@angular/compiler-cli": "^17.3.0",
+    "@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",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.2"
+    "typescript": "~5.5"
   }
 }
diff --git a/frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts b/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.

diff --git a/frameworks/angular/scan-using-foundational-api/src/index.html b/frameworks/angular/scan-using-foundational-api/src/index.html
@@ -11,10 +11,7 @@
       content="Dynamsoft Barcode Reader in an Angular Application, helps read barcodes from camera or images."
     />
     <meta name="keywords" content="barcodes, camera, images, angular" />
-    <link
-      rel="canonical"
-      href="https://demo.dynamsoft.com/Samples/DBR/JS/foundational-api-samples/hello-world/angular/dist/dbrjs-sample-angular/browser/"
-    />
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/frameworks/angular/scan-using-foundational-api/" />
   </head>
   <body>
     <app-root></app-root>

diff --git a/frameworks/angular/scan-using-rtu-api/README.md b/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
 

diff --git a/frameworks/angular/scan-using-rtu-api/package.json b/frameworks/angular/scan-using-rtu-api/package.json
@@ -9,22 +9,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/router": "^19.2.0",
+    "@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",
     "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.8",
-    "@angular/cli": "^19.2.8",
-    "@angular/compiler-cli": "^19.2.0",
+    "@angular-devkit/build-angular": "19.2.8",
+    "@angular/cli": "19.2.8",
+    "@angular/compiler-cli": "19.2.18",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",

diff --git a/frameworks/angular/scan-using-rtu-api/src/app/app.component.css b/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 {

diff --git a/frameworks/angular/scan-using-rtu-api/src/app/app.component.ts b/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();
   }