-
-
-
-
-
-
-
-
-
- Results: -
- );
- }
-}
-
-export default VideoCapture;
-```
-
-> Note:
->
-> * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid.
-> * Also, during 'development', React executes setup and cleanup phases twice in [Strict Mode](https://react.dev/reference/react/StrictMode). To ensure proper functioning of VideoCapture in development, it's advised to avoid using Strict Mode for this component.
-> However, if you're still interested on using Strict Mode, we do have a workaround available. Please contact our [support team](#Support) for further assistance.
-> * If you're looking to customize the UI, the UI customization feature are provided by the auxiliary SDK "Dynamsoft Camera Enhancer". For more details, refer to our [User Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#customizing-the-ui)
-
-### Create and edit the `ImageCapture` component
-
-* Create `ImageCapture.tsx` under `/src/components/ImageCapture/`. The `ImageCapture` component helps decode barcodes in an image.
-
-* In `ImageCapture.tsx`, add code for initializing and destroying the `CaptureVisionRouter` instance. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample).
-
-```tsx
-/* /src/components/ImageCapture/ImageCapture.tsx */
-import React, { ChangeEvent } from "react";
-import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
-import { EnumCapturedResultItemType } from "dynamsoft-core";
-import type { BarcodeResultItem } from "dynamsoft-barcode-reader";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-import "./ImageCapture.css";
-
-class ImageCapture extends React.Component {
- resultsContainer: React.RefObject- Results: -
{this.state.resultText}
-
-
- );
- }
-}
-
-export default ImageCapture;
-```
-
-### Add the `VideoCapture` and `ImageCapture` component to `App.tsx`
-
-* On `/src/App.tsx`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`.
-
-* Add following code to `App.tsx`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample).
-
-```tsx
-/* src/App.tsx */
-import React from "react";
-import reactLogo from "./assets/logo.svg";
-import "./dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
-import VideoCapture from "./components/VideoCapture/VideoCapture";
-import ImageCapture from "./components/ImageCapture/ImageCapture";
-import "./App.css";
-
-enum Modes {
- VIDEO_CAPTURE = "video",
- IMAGE_CAPTURE = "image",
-}
-
-class App extends React.Component {
- state = {
- mode: Modes.VIDEO_CAPTURE,
- };
-
- showVideoCapture = () => {
- this.setState({
- mode: Modes.VIDEO_CAPTURE,
- });
- };
-
- showImageCapture = () => {
- this.setState({
- mode: Modes.IMAGE_CAPTURE,
- });
- };
-
- render() {
- return (
-
-
-
-
-
-
- );
- }
-}
-
-export default App;
-```
-
-* Try running the project.
-
-```cmd
-npm start
-```
-
-If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Decode Image` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog.
-
-## Development server
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-## Build
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://create-react-app.dev/docs/deployment/) for more information.
-
-## Support
-
-If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).
diff --git a/foundational-api-samples/hello-world/react/package.json b/foundational-api-samples/hello-world/react/package.json
deleted file mode 100644
index 7b079c7f..00000000
--- a/foundational-api-samples/hello-world/react/package.json
+++ /dev/null
@@ -1,45 +0,0 @@
-{
- "name": "dbrjs-react-sample",
- "version": "0.1.0",
- "private": true,
- "homepage": "./",
- "dependencies": {
- "@testing-library/jest-dom": "^5.17.0",
- "@testing-library/react": "^13.4.0",
- "@testing-library/user-event": "^13.5.0",
- "@types/jest": "^27.5.2",
- "@types/node": "^16.18.98",
- "@types/react": "^18.3.3",
- "@types/react-dom": "^18.3.0",
- "dynamsoft-barcode-reader-bundle": "11.2.4000",
- "react": "^18.3.1",
- "react-dom": "^18.3.1",
- "react-scripts": "5.0.1",
- "typescript": "^4.9.5",
- "web-vitals": "^2.1.4"
- },
- "scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- }
-}
diff --git a/foundational-api-samples/hello-world/react/public/favicon.ico b/foundational-api-samples/hello-world/react/public/favicon.ico
deleted file mode 100644
index a11777cc..00000000
Binary files a/foundational-api-samples/hello-world/react/public/favicon.ico and /dev/null differ
diff --git a/foundational-api-samples/hello-world/react/public/index.html b/foundational-api-samples/hello-world/react/public/index.html
deleted file mode 100644
index a88f5d4d..00000000
--- a/foundational-api-samples/hello-world/react/public/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
- Hello World for React
-
-
-
-
- {this.state.mode === Modes.VIDEO_CAPTURE ?
-
-
- );
- }
-}
-
-export default App;
diff --git a/foundational-api-samples/hello-world/react/src/assets/logo.svg b/foundational-api-samples/hello-world/react/src/assets/logo.svg
deleted file mode 100644
index 9dfc1c05..00000000
--- a/foundational-api-samples/hello-world/react/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/foundational-api-samples/hello-world/react/src/components/ImageCapture/ImageCapture.css b/foundational-api-samples/hello-world/react/src/components/ImageCapture/ImageCapture.css
deleted file mode 100644
index 03da581c..00000000
--- a/foundational-api-samples/hello-world/react/src/components/ImageCapture/ImageCapture.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.image-capture-container {
- width: 100%;
- height: 100%;
- font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
- Courier New, monospace;
-}
-
-.image-capture-container .input-container {
- width: 80%;
- height: 100%;
- display: flex;
- justify-content: center;
- border: 1px solid black;
- margin: 0 auto;
-}
-
-.image-capture-container .results {
- margin-top: 20px;
- height: 100%;
-}
diff --git a/foundational-api-samples/hello-world/react/src/components/ImageCapture/ImageCapture.tsx b/foundational-api-samples/hello-world/react/src/components/ImageCapture/ImageCapture.tsx
deleted file mode 100644
index 2bc8253a..00000000
--- a/foundational-api-samples/hello-world/react/src/components/ImageCapture/ImageCapture.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { ChangeEvent } from "react";
-import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
-import { EnumCapturedResultItemType, CaptureVisionRouter } from "dynamsoft-barcode-reader-bundle";
-import type { BarcodeResultItem } from "dynamsoft-barcode-reader-bundle";
-import "./ImageCapture.css";
-
-class ImageCapture extends React.Component {
- resultsContainer: React.RefObject
-
-
- Hello World for React
-
-
-
-
- {this.state.mode === Modes.VIDEO_CAPTURE ?
-
-
- );
- }
-}
-
-export default ImageCapture;
diff --git a/foundational-api-samples/hello-world/react/src/components/VideoCapture/VideoCapture.css b/foundational-api-samples/hello-world/react/src/components/VideoCapture/VideoCapture.css
deleted file mode 100644
index 9bfe13ad..00000000
--- a/foundational-api-samples/hello-world/react/src/components/VideoCapture/VideoCapture.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.results {
- width: 100%;
- height: 10vh;
- overflow: auto;
- white-space: pre-wrap;
-}
diff --git a/foundational-api-samples/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/foundational-api-samples/hello-world/react/src/components/VideoCapture/VideoCapture.tsx
deleted file mode 100644
index 62eb118b..00000000
--- a/foundational-api-samples/hello-world/react/src/components/VideoCapture/VideoCapture.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from "react";
-import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
-import { CameraEnhancer, CameraView, CaptureVisionRouter, MultiFrameResultCrossFilter } from "dynamsoft-barcode-reader-bundle";
-import "./VideoCapture.css";
-
-const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
-
-class VideoCapture extends React.Component {
- state = {
- resultText: "",
- };
- cameraViewContainer: React.RefObject
-
-
-
-
-
-
- Results: -
- );
- }
-}
-
-export default VideoCapture;
diff --git a/foundational-api-samples/hello-world/react/src/dynamsoft.config.ts b/foundational-api-samples/hello-world/react/src/dynamsoft.config.ts
deleted file mode 100644
index bc2c9faa..00000000
--- a/foundational-api-samples/hello-world/react/src/dynamsoft.config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { CoreModule } from "dynamsoft-barcode-reader-bundle";
-import { LicenseManager } from "dynamsoft-barcode-reader-bundle";
-
-// Configures the paths where the .wasm files and other necessary resources for modules are located.
-CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/";
-
-/** LICENSE ALERT - README
- * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
- */
-
-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.
- * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
- * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.2.4000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com.
- * LICENSE ALERT - THE END
- */
-
-// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
-CoreModule.loadWasm();
diff --git a/foundational-api-samples/hello-world/react/src/index.css b/foundational-api-samples/hello-world/react/src/index.css
deleted file mode 100644
index e9927237..00000000
--- a/foundational-api-samples/hello-world/react/src/index.css
+++ /dev/null
@@ -1,11 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
- "Droid Sans", "Helvetica Neue", sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
diff --git a/foundational-api-samples/hello-world/react/src/index.tsx b/foundational-api-samples/hello-world/react/src/index.tsx
deleted file mode 100644
index 625b6731..00000000
--- a/foundational-api-samples/hello-world/react/src/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
-
-const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
-root.render(- Results: -
{this.state.resultText}
- Fill Forms with Dynamsoft Barcode Reader
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/foundational-api-samples/use-case/read-a-drivers-license/SampleDriversLicense.jpg b/foundational-api-samples/use-case/read-a-drivers-license/SampleDriversLicense.jpg
deleted file mode 100644
index 7bb877f7..00000000
Binary files a/foundational-api-samples/use-case/read-a-drivers-license/SampleDriversLicense.jpg and /dev/null differ
diff --git a/frameworks/README.md b/frameworks/README.md
new file mode 100644
index 00000000..c7812e62
--- /dev/null
+++ b/frameworks/README.md
@@ -0,0 +1,42 @@
+# 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
+
+- [angular/](./angular/) — Angular examples.
+- [blazor/](./blazor/) — Blazor (.NET) examples.
+- [capacitor/](./capacitor/) — Capacitor mobile hybrid examples.
+- [electron/](./electron/) — Electron desktop examples.
+- [es6/](./es6/) — Plain ES6 module examples.
+- [native-ts/](./native-ts/) — Native TypeScript examples.
+- [next/](./next/) — Next.js examples.
+- [nuxt/](./nuxt/) — Nuxt examples.
+- [pwa/](./pwa/) — Progressive Web App examples.
+- [react/](./react/) — React examples.
+- [requirejs/](./requirejs/) — RequireJS (AMD) examples.
+- [svelte/](./svelte/) — Svelte examples.
+- [vue/](./vue/) — Vue examples.
+- [webview/](./webview/) — Native WebView examples for Android/iOS.
+
+## Quick start
+
+1. Browse into a framework subfolder and choose a subexample, e.g.:
+ ```cmd
+ cd react/scan-using-rtu-api
+ ```
+1. Follow the subexample README for exact steps. Typical commands:
+ ```cmd
+ - npm install
+ - npm run dev (or npm start / npm run build per the subexample)
+ ```
+2. 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.
\ No newline at end of file
diff --git a/frameworks/angular/README.md b/frameworks/angular/README.md
new file mode 100644
index 00000000..97e5d706
--- /dev/null
+++ b/frameworks/angular/README.md
@@ -0,0 +1,23 @@
+# 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.:
+
+ ```bash
+ 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.
\ No newline at end of file
diff --git a/foundational-api-samples/hello-world/angular/.editorconfig b/frameworks/angular/scan-using-foundational-api/.editorconfig
similarity index 100%
rename from foundational-api-samples/hello-world/angular/.editorconfig
rename to frameworks/angular/scan-using-foundational-api/.editorconfig
diff --git a/foundational-api-samples/hello-world/angular/.gitignore b/frameworks/angular/scan-using-foundational-api/.gitignore
similarity index 100%
rename from foundational-api-samples/hello-world/angular/.gitignore
rename to frameworks/angular/scan-using-foundational-api/.gitignore
diff --git a/foundational-api-samples/hello-world/angular/README.md b/frameworks/angular/scan-using-foundational-api/README.md
similarity index 99%
rename from foundational-api-samples/hello-world/angular/README.md
rename to frameworks/angular/scan-using-foundational-api/README.md
index 53abb5d8..7a922945 100644
--- a/foundational-api-samples/hello-world/angular/README.md
+++ b/frameworks/angular/scan-using-foundational-api/README.md
@@ -12,7 +12,7 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.2.4000`](ht
## Official sample
-* Hello World in Angular - Source Code
+* Hello World in Angular - Source Code
## Preparation
Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed.
diff --git a/foundational-api-samples/hello-world/angular/angular.json b/frameworks/angular/scan-using-foundational-api/angular.json
similarity index 100%
rename from foundational-api-samples/hello-world/angular/angular.json
rename to frameworks/angular/scan-using-foundational-api/angular.json
diff --git a/foundational-api-samples/hello-world/angular/package.json b/frameworks/angular/scan-using-foundational-api/package.json
similarity index 100%
rename from foundational-api-samples/hello-world/angular/package.json
rename to frameworks/angular/scan-using-foundational-api/package.json
diff --git a/foundational-api-samples/hello-world/angular/src/app/app.component.css b/frameworks/angular/scan-using-foundational-api/src/app/app.component.css
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/app.component.css
rename to frameworks/angular/scan-using-foundational-api/src/app/app.component.css
diff --git a/foundational-api-samples/hello-world/angular/src/app/app.component.html b/frameworks/angular/scan-using-foundational-api/src/app/app.component.html
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/app.component.html
rename to frameworks/angular/scan-using-foundational-api/src/app/app.component.html
diff --git a/foundational-api-samples/hello-world/angular/src/app/app.component.ts b/frameworks/angular/scan-using-foundational-api/src/app/app.component.ts
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/app.component.ts
rename to frameworks/angular/scan-using-foundational-api/src/app/app.component.ts
diff --git a/foundational-api-samples/hello-world/angular/src/app/dynamsoft.config.ts b/frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/dynamsoft.config.ts
rename to frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts
diff --git a/foundational-api-samples/hello-world/angular/src/app/image-capture/image-capture.component.css b/frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.css
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/image-capture/image-capture.component.css
rename to frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.css
diff --git a/foundational-api-samples/hello-world/angular/src/app/image-capture/image-capture.component.html b/frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.html
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/image-capture/image-capture.component.html
rename to frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.html
diff --git a/foundational-api-samples/hello-world/angular/src/app/image-capture/image-capture.component.ts b/frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.ts
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/image-capture/image-capture.component.ts
rename to frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.ts
diff --git a/foundational-api-samples/hello-world/angular/src/app/video-capture/video-capture.component.css b/frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.css
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/video-capture/video-capture.component.css
rename to frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.css
diff --git a/foundational-api-samples/hello-world/angular/src/app/video-capture/video-capture.component.html b/frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.html
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/video-capture/video-capture.component.html
rename to frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.html
diff --git a/foundational-api-samples/hello-world/angular/src/app/video-capture/video-capture.component.ts b/frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.ts
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/app/video-capture/video-capture.component.ts
rename to frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.ts
diff --git a/foundational-api-samples/hello-world/angular/src/assets/.gitkeep b/frameworks/angular/scan-using-foundational-api/src/assets/.gitkeep
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/assets/.gitkeep
rename to frameworks/angular/scan-using-foundational-api/src/assets/.gitkeep
diff --git a/foundational-api-samples/hello-world/angular/src/favicon.ico b/frameworks/angular/scan-using-foundational-api/src/favicon.ico
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/favicon.ico
rename to frameworks/angular/scan-using-foundational-api/src/favicon.ico
diff --git a/foundational-api-samples/hello-world/angular/src/index.html b/frameworks/angular/scan-using-foundational-api/src/index.html
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/index.html
rename to frameworks/angular/scan-using-foundational-api/src/index.html
diff --git a/foundational-api-samples/hello-world/angular/src/main.ts b/frameworks/angular/scan-using-foundational-api/src/main.ts
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/main.ts
rename to frameworks/angular/scan-using-foundational-api/src/main.ts
diff --git a/foundational-api-samples/hello-world/angular/src/styles.css b/frameworks/angular/scan-using-foundational-api/src/styles.css
similarity index 100%
rename from foundational-api-samples/hello-world/angular/src/styles.css
rename to frameworks/angular/scan-using-foundational-api/src/styles.css
diff --git a/foundational-api-samples/hello-world/angular/tsconfig.app.json b/frameworks/angular/scan-using-foundational-api/tsconfig.app.json
similarity index 100%
rename from foundational-api-samples/hello-world/angular/tsconfig.app.json
rename to frameworks/angular/scan-using-foundational-api/tsconfig.app.json
diff --git a/foundational-api-samples/hello-world/angular/tsconfig.json b/frameworks/angular/scan-using-foundational-api/tsconfig.json
similarity index 100%
rename from foundational-api-samples/hello-world/angular/tsconfig.json
rename to frameworks/angular/scan-using-foundational-api/tsconfig.json
diff --git a/foundational-api-samples/hello-world/angular/tsconfig.spec.json b/frameworks/angular/scan-using-foundational-api/tsconfig.spec.json
similarity index 100%
rename from foundational-api-samples/hello-world/angular/tsconfig.spec.json
rename to frameworks/angular/scan-using-foundational-api/tsconfig.spec.json
diff --git a/barcode-scanner-api-samples/scan-single-barcode/angular/.editorconfig b/frameworks/angular/scan-using-rtu-api/.editorconfig
similarity index 100%
rename from barcode-scanner-api-samples/scan-single-barcode/angular/.editorconfig
rename to frameworks/angular/scan-using-rtu-api/.editorconfig
diff --git a/barcode-scanner-api-samples/scan-single-barcode/angular/.gitignore b/frameworks/angular/scan-using-rtu-api/.gitignore
similarity index 100%
rename from barcode-scanner-api-samples/scan-single-barcode/angular/.gitignore
rename to frameworks/angular/scan-using-rtu-api/.gitignore
diff --git a/barcode-scanner-api-samples/scan-single-barcode/angular/README.md b/frameworks/angular/scan-using-rtu-api/README.md
similarity index 70%
rename from barcode-scanner-api-samples/scan-single-barcode/angular/README.md
rename to frameworks/angular/scan-using-rtu-api/README.md
index e31e5b7c..c6056438 100644
--- a/barcode-scanner-api-samples/scan-single-barcode/angular/README.md
+++ b/frameworks/angular/scan-using-rtu-api/README.md
@@ -26,7 +26,7 @@ Then open your browser at http://localhost:4200 to view the sample app.
## 📌 Customization
-Please refer to sample [`scan-multiple-barcodes`](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/barcode-scanner-api-samples/scan-multiple-barcodes) or check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html).
+Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html).
## 📄 Support
diff --git a/barcode-scanner-api-samples/scan-single-barcode/angular/angular.json b/frameworks/angular/scan-using-rtu-api/angular.json
similarity index 100%
rename from barcode-scanner-api-samples/scan-single-barcode/angular/angular.json
rename to frameworks/angular/scan-using-rtu-api/angular.json
diff --git a/barcode-scanner-api-samples/scan-single-barcode/angular/package.json b/frameworks/angular/scan-using-rtu-api/package.json
similarity index 100%
rename from barcode-scanner-api-samples/scan-single-barcode/angular/package.json
rename to frameworks/angular/scan-using-rtu-api/package.json
diff --git a/barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.css b/frameworks/angular/scan-using-rtu-api/src/app/app.component.css
similarity index 100%
rename from barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.css
rename to frameworks/angular/scan-using-rtu-api/src/app/app.component.css
diff --git a/barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.html b/frameworks/angular/scan-using-rtu-api/src/app/app.component.html
similarity index 100%
rename from barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.html
rename to frameworks/angular/scan-using-rtu-api/src/app/app.component.html
diff --git a/barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.ts b/frameworks/angular/scan-using-rtu-api/src/app/app.component.ts
similarity index 94%
rename from barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.ts
rename to frameworks/angular/scan-using-rtu-api/src/app/app.component.ts
index a9941b96..db4bb914 100644
--- a/barcode-scanner-api-samples/scan-single-barcode/angular/src/app/app.component.ts
+++ b/frameworks/angular/scan-using-rtu-api/src/app/app.component.ts
@@ -20,7 +20,7 @@ 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",
@@ -46,7 +46,7 @@ export class AppComponent {
alert(result.barcodeResults[0].text);
}
}
- async ngOnDestroy(): PromiseClick each input box to fill in!
- - - -
let config = {
license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key
container: document.querySelector(".barcode-scanner-view"), // Specify where to render the scanner UI
-
// showUploadImageButton: true,
// scannerViewConfig: {
// showFlashButton: true,
@@ -42,7 +41,10 @@
// Display the first detected barcode's text in an alert
if (result.barcodeResults.length) {
alert(result.barcodeResults[0].text);
+ } else{
+ alert("No barcode found");
}
+
});
diff --git a/index.html b/index.html
index 3e9b6ec8..657a511c 100644
--- a/index.html
+++ b/index.html
@@ -1,419 +1,1561 @@
-
-
-
-
+
+
+
+
-
+
Dynamsoft Barcode Reader Samples
-
+
-
-
+
+
-
-
+
+
+
+
+
+
+
+ 🚀 Quick Start
+ Hello World - Scan Your First Barcode
+ The simplest example to get started with barcode scanning in under 2 minutes
+
+
+
+
+
+
+
+
+ ✨ Full Demo
+ Official Online Demo
+ Explore all features and capabilities in our comprehensive live demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Main README
+
+
+
+
+
+ Framework Samples (14)
+ README
+
+
+
- BarcodeScanner API Samples
+ Angular Samples -
+ Source
-
- Scan Single Barcode
-
- Scan Multiple Barcodes
-
+
+ Blazor Samples -
+ Source
+
+
+ Capacitor Samples -
+ Source
+
+
+ Electron Samples -
+ Source
+
+
+ ES6 Samples -
+ Source
+
+
+ Native TypeScript Samples -
+ Source
+
+
+ Next.js Samples -
+ Source
+
+
+ Nuxt Samples -
+ Source
- Foundational API Samples
+ PWA Samples -
+ Source
+
+ React Samples -
+ Source
+
+
+ RequireJS Samples -
+ Source
+
+
+ Svelte Samples -
+ Source
+
+
+ Vue Samples -
+ Source
+
+
+ WebView Samples -
+ Source
+
+
+
+
+
+
+ Scenario Samples (17)
+ README
+
+
+
+ Workflow Examples
- Hello World
-
- Hello
- World
-
-
-
-
-
-
-
-
-
-
-
- Hello World in
- PWA (
)
-
-
-
-
-
-
-
- Use Case
-
-
-
-
-
-
- Others
-
-
-
+
+
+
+
+
+
- Official Online Demo
-
-
+
+ Barcode Type Focused
+
+
+
+
+
+
+
+
+
+ Data Parsing
+
+
+ Utilities
+
+
+ Debug Tools -
+ Source
+
+
+
+
+
+
-
+
+
diff --git a/foundational-api-samples/hello-world/read-an-image.html b/read-an-image.html
similarity index 98%
rename from foundational-api-samples/hello-world/read-an-image.html
rename to read-an-image.html
index a0f678a6..dbd49cbc 100644
--- a/foundational-api-samples/hello-world/read-an-image.html
+++ b/read-an-image.html
@@ -4,7 +4,7 @@
-
+
Dynamsoft Barcode Reader Sample - Hello World (Read an Image)
@@ -74,4 +74,4 @@ Hello World (Read an Image)
-
-
-
+
+
+
+
+
+
Dynamsoft Barcode Reader Sample - Hello World (Read an Image)
@@ -74,4 +74,4 @@
+
+ 🚀 Quick Start
+
+
+
+ Hello World - Scan Your First Barcode
+ The simplest example to get started with barcode scanning in under 2 minutes
+
+
+
+
+
+
+
+
+ ✨ Full Demo
+ Official Online Demo
+ Explore all features and capabilities in our comprehensive live demo
+
+
+
+
+
+
+
+
+
+
+ Main README
+
+
+
+
+
+ + Framework Samples (14) + README +
+
-
- BarcodeScanner API Samples
+ Angular Samples - + Source
-
+
+
+ Scan Single Barcode
-
- 
)
)
)
)
)
)
)
)
)
)
)Scan Multiple Barcodes
-
+
+ Blazor Samples -
+ Source
+
+
+ Capacitor Samples -
+ Source
+
+
+ Electron Samples -
+ Source
+
+
+ ES6 Samples -
+ Source
+
+
+ Native TypeScript Samples -
+ Source
+
+
+ Next.js Samples -
+ Source
+
+
+ Nuxt Samples -
+ Source
-
+ Foundational API Samples
+ PWA Samples - + Source
+ React Samples -
+ Source
+
+
+ RequireJS Samples -
+ Source
+
+
+ Svelte Samples -
+ Source
+
+
+ Vue Samples -
+ Source
+
+
+ WebView Samples -
+ Source
+
+
+
+ + Scenario Samples (17) + README +
+
+
-
+
+
diff --git a/foundational-api-samples/hello-world/read-an-image.html b/read-an-image.html
similarity index 98%
rename from foundational-api-samples/hello-world/read-an-image.html
rename to read-an-image.html
index a0f678a6..dbd49cbc 100644
--- a/foundational-api-samples/hello-world/read-an-image.html
+++ b/read-an-image.html
@@ -4,7 +4,7 @@
-
+
Workflow Examples
-
- Hello World
-
-
- Hello
- World
-
-
-
-
-
-
-
-
-
-
-
- Hello World in
- PWA ()
-
-
-
-
-
-
- )
-
-
- Use Case
-
-
-
-
-
-
- Others
-
-
-
+
+
+
+
+
+
Official Online Demo
-
-
+
+
+
+
+
Barcode Type Focused
+
+
+
+
+
+
+
+
+
+ Data Parsing
+
+
+ Utilities
+
+
+
+ Debug Tools -
+ Source
+
+