add Readmes

Author: a362758199

README.md

@@ -31,75 +31,48 @@ 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.6000&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.2.2000&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
 
-### Barcode Scanner API samples
-
-**Scan single barcode**
-
-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.
-* [**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.
-* [**Hello World in Svelte**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/svelte): Read single barcode from camera in a Svelte application.
-* [**Hello World in Capacitor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/capacitor): Read single barcode from camera in a Capacitor application.
-* [**Hello World in Webview**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/webview): Read single barcode from camera in a Webview application.
-* [**Hello World in Typescript**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/native-ts): Read single barcode from camera in a Typescript application.
-* [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/electron): Read single barcode from camera in a Electron application.
-* [**Hello World in Blazor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/blazor): Read single barcode from camera in a Blazor application.
-* [**Hello World in RequireJS**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/requirejs.html): Read single barcode from camera in a RequireJS application.
-* [**Hello World in ES6**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/es6.html): Read single barcode from camera in a ES6 application.
-* [**Hello World in PWA**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-single-barcode/pwa): Read single barcode from camera in a PWA application.
-
-**Scan multiple barcodes**
-
-* [**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
-
-**Hello World**
-
-Get the basic features of the library working with plain/native JavaScript or within a framework like [Angular](https://angular.io/), [React](https://reactjs.org/) or [Vue](https://vuejs.org/), etc.
-
-* [**Hello World**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/hello-world.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/hello-world.html?utm_source=sampleReadme): Scan barcodes from video stream with minimum code in JavaScript.
-* [**Read an Image**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/read-an-image.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/read-an-image.html?utm_source=sampleReadme): Decode barcodes from images in mobile album or desktop file system.
-* [**Hello World in Angular**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/angular#readme): Read barcodes from camera and images in an Angular application.
-* [**Hello World in Blazor**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/blazor#readme): Read barcodes from camera and images in a Blazor application.
-* [**Hello World in React**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react#readme): Read barcodes from camera and images in a React application.
-* [**Hello World in React using Hooks**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/react-hooks#readme): Read barcodes from camera and images in a React application and use the Hooks charactor of React.
-* [**Hello World in Vue**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/vue#readme): Read barcodes from camera and images in a Vue 3 application.
-* [**Hello World in Next.js**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/next#readme): Read barcodes from camera and images in a Next.js application.
-* [**Hello World in Nuxt**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/nuxt#readme): Read barcodes from camera and images in a Nuxt application.
-* [**Hello World in Electron**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/electron#readme): Read barcodes from camera and images in a Electron application.
-* [**Hello World in PWA**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/pwa#readme): Decode video stream in a PWA application from a webcam or a built-in camera.
-* [**Hello World with RequireJS**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/requirejs.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/requirejs.html?utm_source=sampleReadme): Decode video stream in an application using RequireJS from a webcam or a built-in camera.
-* [**Hello World with ES6**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/es6.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/hello-world/es6.html?utm_source=sampleReadme): Decode video stream in an application using ES6 from a webcam or a built-in camera.
-* [**Hello World in WebView**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/hello-world/webview): Decode video stream in an application in WebView from camera. 
-
-***Use Cases***
-
-* [**Read Video and Fill a Form**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html) - [run↗](https://demo.dynamsoft.com/samples/dbr/js/foundational-api-samples/use-case/fill-a-form-with-barcode-reading.html?utm_source=sampleReadme): Read barcodes to fill a form.
-* [**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***
-
-* [**Debug**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/foundational-api-samples/others/debug#readme): Collect the actual image frames for debugging purposes.
+### Frameworks
+
+- [Angular/](./frameworks/angular/)
+- [Blazor/](./frameworks/blazor/)  
+- [Capacitor/](./frameworks/capacitor/)  
+- [Electron/](./frameworks/electron/)  
+- [es6/](./frameworks/es6/)  
+- [Native-ts/](./frameworks/native-ts/)  
+- [Next/](./frameworks/next/)  
+- [Nuxt/](./frameworks/nuxt/)  
+- [PWA/](./frameworks/pwa/)  
+- [React/](./frameworks/react/)  
+- [Requirejs/](./frameworks/requirejs/)  
+- [Svelte/](./frameworks/svelte/)  
+- [Vue/](./frameworks/vue/)  
+- [Webview/](./frameworks/webview/)
+
+### Scenarios
+
+- [pick-one-to-fill/](./scenarios/pick-one-to-fill/)  
+- [cart-builder](./scenarios/cart-builder.html)
+- [scan-and-search](./scenarios/scan-and-search.html)  
+- [show-result-texts-on-the-video](./scenarios/show-result-texts-on-the-video.html)  
+- [batch-inventory/](./scenarios/batch-inventory/)  
+- [read-a-drivers-license/](./scenarios/read-a-drivers-license/)  
+- [read-and-parse-GS1-AI/](./scenarios/read-and-parse-GS1-AI/)  
+- [scan-qr-code/](./scenarios/scan-qr-code/)  
+- [scan-any-codes/](./scenarios/scan-any-codes/)  
+- [scan-common-2D-codes/](./scenarios/scan-common-2D-codes/)  
+- [scan-1D-Retail/](./scenarios/scan-1D-Retail/)  
+- [scan-1D-Industrial/](./scenarios/scan-1D-Industrial/)  
+- [scan-from-distance/](./scenarios/scan-from-distance/)  
+- [locate-an-item-with-barcode/](./scenarios/locate-an-item-with-barcode/)  
+- [debug/](./scenarios/debug/)
 
 ### Official Online Demo
 

frameworks/README.md

@@ -0,0 +1,38 @@
+# Frameworks samples
+
+This directory contains framework-specific examples demonstrating how to integrate the Dynamsoft Barcode Reader (JavaScript edition) into common web and hybrid frameworks. Each framework folder contains one or more runnable sub-examples (for example, scan-using-foundational-api and/or scan-using-rtu-api) showing practical integration patterns.
+
+## Sample list
+
+- [frameworks/angular/](./frameworks/angular/) — Angular examples.
+- [frameworks/blazor/](./frameworks/blazor/) — Blazor (.NET) examples.
+- [frameworks/capacitor/](./frameworks/capacitor/) — Capacitor mobile hybrid examples.
+- [frameworks/electron/](./frameworks/electron/) — Electron desktop examples.
+- [frameworks/es6/](./frameworks/es6/) — Plain ES6 module examples.
+- [frameworks/native-ts/](./frameworks/native-ts/) — Native TypeScript examples.
+- [frameworks/next/](./frameworks/next/) — Next.js examples.
+- [frameworks/nuxt/](./frameworks/nuxt/) — Nuxt examples.
+- [frameworks/pwa/](./frameworks/pwa/) — Progressive Web App examples.
+- [frameworks/react/](./frameworks/react/) — React examples.
+- [frameworks/requirejs/](./frameworks/requirejs/) — RequireJS (AMD) examples.
+- [frameworks/svelte/](./frameworks/svelte/) — Svelte examples.
+- [frameworks/vue/](./frameworks/vue/) — Vue examples.
+- [frameworks/webview/](./frameworks/webview/) — Native WebView examples for Android/iOS.
+
+## Quick start
+
+1. Browse into a framework subfolder and choose a subexample, e.g.:
+   - cd frameworks/react/scan-using-foundational-api
+2. Follow the subexample README for exact steps. Typical commands:
+   - npm install
+   - npm run dev (or npm start / npm run build per the subexample)
+3. Open the local dev URL shown in the terminal (ensure you use localhost or HTTPS for camera access).
+
+## Notes
+
+- Serve examples via the framework dev server or a local HTTP server; opening files directly (file://) may break module loading or camera permissions.
+- Camera and microphone access require a secure context (https or localhost).
+- A trial license is included for short-term testing; request a longer trial from Dynamsoft for extended evaluation.
+- For general instructions, license info and API docs, see the repository root README.md.
+
+If a sub-example provides a README, follow it for platform-specific details and additional troubleshooting tips.

frameworks/angular/README.md

@@ -0,0 +1,16 @@
+# Angular samples
+
+This directory contains Angular-based examples demonstrating how to use the Dynamsoft Barcode Reader (JavaScript edition) in Angular projects.
+
+Included examples
+- scan-using-foundational-api/ — Example using the foundational API.
+- scan-using-rtu-api/ — Example using the RTU API.
+
+Quick start
+1. Change to a subexample directory, e.g.:
+   - cd scan-using-foundational-api
+2. Follow the subexample README for exact steps (typically: npm install && npm run start or ng serve).
+
+Notes
+- Run examples via the framework dev server. Opening files directly may break module loading or camera access.
+- See the repository root README.md for general usage and license information.

frameworks/blazor/README.md

@@ -0,0 +1,16 @@
+# Blazor samples
+
+This directory contains Blazor examples demonstrating how to integrate the Dynamsoft Barcode Reader (JavaScript edition) into Blazor apps.
+
+Included examples
+- scan-using-foundational-api/ — Blazor example with JS interop for video/image decoding.
+- scan-using-rtu-api/ — RTU API demo for Blazor.
+
+Quick start
+1. Change to a subexample directory, e.g.:
+   - cd scan-using-foundational-api
+2. Follow the subexample README for exact steps (may require dotnet/SDK commands or npm for static assets).
+
+Notes
+- Some examples use JS interop; run the app via dotnet or the provided launch configuration.
+- See the repository root README.md for general usage and license information.

frameworks/capacitor/README.md

@@ -0,0 +1,15 @@
+# Capacitor samples
+
+This directory contains Capacitor examples showing how to use the Dynamsoft Barcode Reader in hybrid mobile apps (Android / iOS) via Capacitor.
+
+Included examples
+- scan-using-rtu-api/ — Capacitor project illustrating RTU API usage.
+
+Quick start
+1. Change to the example directory, e.g.:
+   - cd scan-using-rtu-api
+2. Follow the subexample README for platform-specific setup (npm install, capacitor sync, open Android Studio/Xcode).
+
+Notes
+- Mobile platform setup is required to run native apps. See the subexample README for exact steps.
+- See the repository root README.md for general usage and license information.

frameworks/electron/README.md

@@ -0,0 +1,16 @@
+# Electron samples
+
+This directory contains Electron examples demonstrating desktop apps using the Dynamsoft Barcode Reader (JavaScript edition).
+
+Included examples
+- scan-using-foundational-api/ — Electron demo using foundational API.
+- scan-using-rtu-api/ — Electron demo using RTU API.
+
+Quick start
+1. Change to a subexample directory, e.g.:
+   - cd scan-using-foundational-api
+2. Follow the subexample README for exact steps (typically: npm install && npm run start or npm run electron).
+
+Notes
+- Desktop examples may require additional native build steps for packaging. Run via the provided dev command.
+- See the repository root README.md for general usage and license information.

frameworks/es6/README.md

@@ -0,0 +1,15 @@
+# ES6 samples
+
+This directory contains plain ES6 module examples demonstrating basic usage of the Dynamsoft Barcode Reader in vanilla JavaScript (ES6 modules).
+
+Included examples
+- scan-using-foundational-api/ — Plain ES6 page using foundational API.
+- scan-using-rtu-api/ — ES6 page using RTU API.
+
+Quick start
+1. Change to the example directory (or open repository root).
+2. Serve files with a local static server and open the HTML page (e.g., python -m http.server or npx http-server).
+
+Notes
+- ES6 modules require serving over HTTP; opening files directly in the browser may not work.
+- See the repository root README.md for general usage and license information.