diff --git a/README.md b/README.md index 3e0a568f..ec2811c8 100644 --- a/README.md +++ b/README.md @@ -21,12 +21,10 @@ The following table is a list of supported browsers based on the above requireme | Browser Name | Version | | :----------: | :--------------: | -| Chrome | v78+1 | -| Firefox | v68+1 | -| Edge | v79+ | -| Safari | v14.5+ | - -1 Devices running iOS need to be on iOS 14.5+ for camera video streaming to work in Chrome, Firefox or other apps using webviews. +| Chrome | v88+ | +| Firefox | v89+ | +| Edge | v88+ | +| Safari | v15+ | Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. @@ -78,36 +76,17 @@ If you need a web server for standalone or scenario samples (for example, to ser 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. +- **`frameworks/`** - Framework-specific examples demonstrating how to integrate Dynamsoft Barcode Reader into common web and hybrid frameworks. - **`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). +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.4.2000&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) +- [API Docs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?utm_source=sampleReadme) --- @@ -125,11 +104,6 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www. - [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 - [angular/](./frameworks/angular/) — Angular examples. diff --git a/frameworks/README.md b/frameworks/README.md index c7812e62..8638768e 100644 --- a/frameworks/README.md +++ b/frameworks/README.md @@ -1,6 +1,6 @@ # 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. +This directory contains framework-specific examples demonstrating how to integrate the Dynamsoft Barcode Reader (JavaScript edition) into common web and hybrid frameworks. ## Sample list @@ -23,7 +23,7 @@ This directory contains framework-specific examples demonstrating how to integra 1. Browse into a framework subfolder and choose a subexample, e.g.: ```cmd - cd react/scan-using-rtu-api + cd react ``` 1. Follow the subexample README for exact steps. Typical commands: ```cmd diff --git a/frameworks/angular/scan-using-foundational-api/.editorconfig b/frameworks/angular/.editorconfig similarity index 100% rename from frameworks/angular/scan-using-foundational-api/.editorconfig rename to frameworks/angular/.editorconfig diff --git a/frameworks/angular/scan-using-foundational-api/.gitignore b/frameworks/angular/.gitignore similarity index 100% rename from frameworks/angular/scan-using-foundational-api/.gitignore rename to frameworks/angular/.gitignore diff --git a/frameworks/angular/README.md b/frameworks/angular/README.md index 97e5d706..0bf17895 100644 --- a/frameworks/angular/README.md +++ b/frameworks/angular/README.md @@ -1,23 +1,422 @@ -# Angular samples +# Hello World Sample for Angular -This directory contains Angular-based examples demonstrating how to use the Dynamsoft Barcode Reader (JavaScript edition) in Angular projects. +[Angular](https://angular.dev/) is one of the most popular and mature JavaScript frameworks. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into an Angular application. Note that in this sample, `TypeScript` is used. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- scan-using-foundational-api/ — Example using the foundational API. -- scan-using-rtu-api/ — Example using the RTU API. +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official sample -1. Change to a subexample directory, e.g.: +* Hello World in Angular - Source Code - ```bash - cd scan-using-foundational-api - ``` +## Preparation +Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. -2. Follow the subexample README for exact steps (typically: npm install && npm run start or ng serve). +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.7. -## Notes +## Quick Start -- 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 +1. Install project dependencies + +```cmd +npm install +``` + +2. Build and serve the Angular app + +```cmd +ng serve +``` + +Then open `https://localhost:4200/` to view the sample app. + +## Creating the sample project + +In this section, we will be creating an Angular application utilizing the Dynamsoft Barcode Reader bundle sdk. + +We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. + +By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! + +### Create an [Angular](https://angular.dev) Application bootstrapped with [Angular CLI](https://cli.angular.io/) +```cmd +ng new my-app +``` + +On installation, you will be prompted to configure your project.\ +You can customize these options according to your preferences.\ +Below is the configuration used for this sample. + +``` +? Which stylesheet format would you like to use? CSS +? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +cd my-app +npm install dynamsoft-barcode-reader-bundle@11.4.2000 -E +``` + +## Start to implement + +### Add file "dynamsoft.config.ts" at the root of the app to configure libraries + +```typescript +/* /dynamsoft.config.ts */ +import { CoreModule } from 'dynamsoft-core'; +import { LicenseManager } from 'dynamsoft-license'; +import 'dynamsoft-barcode-reader'; + +// 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', 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.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +// Optional. Preload .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. +CoreModule.loadWasm(); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Generate and edit the `video-capture` component + +* Generate the `video-capture`. The `video-capture` component helps decode barcodes via camera. + +```cmd +ng generate component video-capture +``` + +* In `video-capture.component.html`, add code to setup the component's HTML + +```html + +
+
+Results: +
{{resultText}}
+``` + +* In `video-capture.component.ts`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```ts +/* /src/app/video-capture/video-capture.component.ts */ +import { Component, ElementRef, ViewChild } from '@angular/core'; +import '../dynamsoft.config'; +import { CameraEnhancer, CameraView } from 'dynamsoft-camera-enhancer'; +import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router'; +import { MultiFrameResultCrossFilter } from 'dynamsoft-utility'; + +const componentDestroyedErrorMsg = 'VideoCapture Component Destroyed'; + +@Component({ + selector: 'app-video-capture', + templateUrl: './video-capture.component.html', + styleUrls: ['./video-capture.component.css'], + standalone: true, +}) +export class VideoCaptureComponent { + @ViewChild('cameraViewContainer') cameraViewContainer?: ElementRef; + resultText = ""; + + resolveInit?: () => void; + pInit: Promise = new Promise((r) => { + this.resolveInit = r; + }); + isDestroyed = false; + + cvRouter?: CaptureVisionRouter; + cameraEnhancer?: CameraEnhancer; + + async ngAfterViewInit(): Promise { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + if (this.isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } // Check if component is destroyed after every async + this.cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + if (this.isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + + // Get default UI and append it to DOM. + this.cameraViewContainer!.nativeElement.append(cameraView.getUIElement()); + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + this.cvRouter = await CaptureVisionRouter.createInstance(); + if (this.isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + this.cvRouter.setInput(this.cameraEnhancer); + + // Define a callback for results. + this.cvRouter.addResultReceiver({ + onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; + + this.resultText = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + this.resultText += `${item.formatString}: ${item.text}\n\n`; + } + }, + }); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + // Filter out unchecked barcodes. + filter.enableResultCrossVerification('barcode', true); + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication('barcode', true); + await this.cvRouter.addResultFilter(filter); + if (this.isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + + // Open camera and start scanning single barcode. + await this.cameraEnhancer.open(); + cameraView.setScanLaserVisible(true); + if (this.isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + await this.cvRouter.startCapturing('ReadSingleBarcode'); + if (this.isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + } catch (ex: any) { + if ((ex as Error)?.message === componentDestroyedErrorMsg) { + console.log(componentDestroyedErrorMsg); + } else { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } + } + + // Resolve pInit promise once initialization is complete. + this.resolveInit!(); + } + + // dispose cvRouter when it's no longer needed + async ngOnDestroy() { + this.isDestroyed = true; + try { + // Wait for the pInit to complete before disposing resources. + await this.pInit; + this.cvRouter?.dispose(); + this.cameraEnhancer?.dispose(); + } catch (_) {} + } +} +``` +> Note: +> +> 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) + + +### Generate and edit the `image-capture` component + +* Generate the `image-capture`. The `image-capture` component helps decode barcodes in an image. + +```cmd +ng generate component image-capture +``` + +* In `image-capture.component.html`, add code to setup the component's HTML + +```html + +
+
+ +
+
{{resultText}}
+
+``` + +* In `image-capture.component.ts`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```ts +/* /src/app/image-capture/image-capture.component.ts */ +import { Component, ViewChild, ElementRef } from '@angular/core'; +import '../dynamsoft.config'; +import { EnumCapturedResultItemType } from 'dynamsoft-core'; +import type { BarcodeResultItem } from 'dynamsoft-barcode-reader'; +import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router'; + +@Component({ + selector: 'app-image-capture', + templateUrl: './image-capture.component.html', + styleUrls: ['./image-capture.component.css'], + standalone: true, +}) +export class ImageCaptureComponent { + resultText = ""; + + pCvRouter?: Promise; + isDestroyed = false; + + captureImage = async (e: Event) => { + let files = [...((e.target! as HTMLInputElement).files as any as File[])]; + (e.target! as HTMLInputElement).value = ''; // reset input + this.resultText = ''; + try { + // ensure cvRouter is created only once + const cvRouter = await (this.pCvRouter = + this.pCvRouter || CaptureVisionRouter.createInstance()); + if (this.isDestroyed) return; + + for (let file of files) { + // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. + const result = await cvRouter.capture(file, 'ReadBarcodes_ReadRateFirst'); + console.log(result); + if (this.isDestroyed) return; + + // Print file name if there's multiple files + if (files.length > 1) { + this.resultText += `\n${file.name}:\n`; + } + for (let _item of result.items) { + if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { + continue; // check if captured result item is a barcode + } + let item = _item as BarcodeResultItem; + this.resultText += item.text + '\n'; // output the decoded barcode text + } + // If no items are found, display that no barcode was detected + if (!result.items.length) + this.resultText += + 'No barcode found\n'; + } + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } + }; + + // dispose cvRouter when it's no longer needed + async ngOnDestroy() { + this.isDestroyed = true; + if (this.pCvRouter) { + try { + (await this.pCvRouter).dispose(); + } catch (_) {} + } + } +} +``` + +### Add the `video-capture` and `image-capture` component to the `app` component + +* On the `app` component, we will edit the component so that it offers buttons to switch components between `video-capture` and `image-capture`. + +* In `app.component.html`, add the following code. + +```html + +
+
+

Hello World for Angular

+
+
+ + +
+ @if (mode === 'video') { + + } @else { + + } +
+``` + +* In `app.component.ts`, add the following code. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```ts +/* /src/app/app.component.ts */ +import { Component } from '@angular/core'; +import { NgStyle } from '@angular/common'; + +import { ImageCaptureComponent } from './image-capture/image-capture.component'; +import { VideoCaptureComponent } from './video-capture/video-capture.component'; + +@Component({ + selector: 'app-root', + standalone: true, + templateUrl: './app.component.html', + styleUrl: './app.component.css', + imports: [NgStyle, ImageCaptureComponent, VideoCaptureComponent], +}) +export class AppComponent { + title = 'dbrjs-angular-sample'; + + mode: string = 'video'; + + switchMode(value: string) { + this.mode = value; + } +} +``` + +* Try running the project. + +```cmd +ng serve +``` + +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. + +## Further help - Angular + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. + +## Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/angular/scan-using-foundational-api/angular.json b/frameworks/angular/angular.json similarity index 100% rename from frameworks/angular/scan-using-foundational-api/angular.json rename to frameworks/angular/angular.json diff --git a/frameworks/angular/scan-using-foundational-api/package.json b/frameworks/angular/package.json similarity index 56% rename from frameworks/angular/scan-using-foundational-api/package.json rename to frameworks/angular/package.json index 5a5a398d..a9333437 100644 --- a/frameworks/angular/scan-using-foundational-api/package.json +++ b/frameworks/angular/package.json @@ -10,23 +10,23 @@ }, "private": true, "dependencies": { - "@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", + "@angular/animations": "19.2.20", + "@angular/common": "19.2.20", + "@angular/compiler": "19.2.20", + "@angular/core": "19.2.20", + "@angular/forms": "19.2.20", + "@angular/platform-browser": "19.2.20", + "@angular/platform-browser-dynamic": "19.2.20", + "@angular/router": "19.2.20", + "dynamsoft-barcode-reader-bundle": "11.4.2000", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" }, "devDependencies": { - "@angular-devkit/build-angular": "19.2.19", - "@angular/cli": "19.2.19", - "@angular/compiler-cli": "19.2.19", + "@angular-devkit/build-angular": "19.2.20", + "@angular/cli": "19.2.20", + "@angular/compiler-cli": "19.2.20", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", diff --git a/frameworks/angular/scan-using-foundational-api/README.md b/frameworks/angular/scan-using-foundational-api/README.md deleted file mode 100644 index 7a922945..00000000 --- a/frameworks/angular/scan-using-foundational-api/README.md +++ /dev/null @@ -1,422 +0,0 @@ -# Hello World Sample for Angular - -[Angular](https://angular.dev/) is one of the most popular and mature JavaScript frameworks. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into an Angular application. Note that in this sample, `TypeScript` is used. - -In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.2.4000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.2.4000). - -> Note: -> -> If you’re looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! -> -> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. - -## Official sample - -* Hello World in Angular - Source Code - -## Preparation -Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. - -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.7. - -## Quick Start - -1. Install project dependencies - -```cmd -npm install -``` - -2. Build and serve the Angular app - -```cmd -ng serve -``` - -Then open `https://localhost:4200/` to view the sample app. - -## Creating the sample project - -In this section, we will be creating an Angular application utilizing the Dynamsoft Barcode Reader bundle sdk. - -We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. - -By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! - -### Create an [Angular](https://angular.dev) Application bootstrapped with [Angular CLI](https://cli.angular.io/) -```cmd -ng new my-app -``` - -On installation, you will be prompted to configure your project.\ -You can customize these options according to your preferences.\ -Below is the configuration used for this sample. - -``` -? Which stylesheet format would you like to use? CSS -? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No -``` - -### **CD** to the root directory of the application and install necessary libraries - -```cmd -cd my-app -npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E -``` - -## Start to implement - -### Add file "dynamsoft.config.ts" at the root of the app to configure libraries - -```typescript -/* /dynamsoft.config.ts */ -import { CoreModule } from 'dynamsoft-core'; -import { LicenseManager } from 'dynamsoft-license'; -import 'dynamsoft-barcode-reader'; - -// 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', 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 .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. -CoreModule.loadWasm(); -``` - -> Note: -> -> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. - -### Generate and edit the `video-capture` component - -* Generate the `video-capture`. The `video-capture` component helps decode barcodes via camera. - -```cmd -ng generate component video-capture -``` - -* In `video-capture.component.html`, add code to setup the component's HTML - -```html - -
-
-Results: -
{{resultText}}
-``` - -* In `video-capture.component.ts`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```ts -/* /src/app/video-capture/video-capture.component.ts */ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import '../dynamsoft.config'; -import { CameraEnhancer, CameraView } from 'dynamsoft-camera-enhancer'; -import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router'; -import { MultiFrameResultCrossFilter } from 'dynamsoft-utility'; - -const componentDestroyedErrorMsg = 'VideoCapture Component Destroyed'; - -@Component({ - selector: 'app-video-capture', - templateUrl: './video-capture.component.html', - styleUrls: ['./video-capture.component.css'], - standalone: true, -}) -export class VideoCaptureComponent { - @ViewChild('cameraViewContainer') cameraViewContainer?: ElementRef; - resultText = ""; - - resolveInit?: () => void; - pInit: Promise = new Promise((r) => { - this.resolveInit = r; - }); - isDestroyed = false; - - cvRouter?: CaptureVisionRouter; - cameraEnhancer?: CameraEnhancer; - - async ngAfterViewInit(): Promise { - try { - // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. - const cameraView = await CameraView.createInstance(); - if (this.isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } // Check if component is destroyed after every async - this.cameraEnhancer = await CameraEnhancer.createInstance(cameraView); - if (this.isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - - // Get default UI and append it to DOM. - this.cameraViewContainer!.nativeElement.append(cameraView.getUIElement()); - - // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - this.cvRouter = await CaptureVisionRouter.createInstance(); - if (this.isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - this.cvRouter.setInput(this.cameraEnhancer); - - // Define a callback for results. - this.cvRouter.addResultReceiver({ - onDecodedBarcodesReceived: (result) => { - if (!result.barcodeResultItems.length) return; - - this.resultText = ''; - console.log(result); - for (let item of result.barcodeResultItems) { - this.resultText += `${item.formatString}: ${item.text}\n\n`; - } - }, - }); - - // Filter out unchecked and duplicate results. - const filter = new MultiFrameResultCrossFilter(); - // Filter out unchecked barcodes. - filter.enableResultCrossVerification('barcode', true); - // Filter out duplicate barcodes within 3 seconds. - filter.enableResultDeduplication('barcode', true); - await this.cvRouter.addResultFilter(filter); - if (this.isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - - // Open camera and start scanning single barcode. - await this.cameraEnhancer.open(); - cameraView.setScanLaserVisible(true); - if (this.isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - await this.cvRouter.startCapturing('ReadSingleBarcode'); - if (this.isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - } catch (ex: any) { - if ((ex as Error)?.message === componentDestroyedErrorMsg) { - console.log(componentDestroyedErrorMsg); - } else { - let errMsg = ex.message || ex; - console.error(ex); - alert(errMsg); - } - } - - // Resolve pInit promise once initialization is complete. - this.resolveInit!(); - } - - // dispose cvRouter when it's no longer needed - async ngOnDestroy() { - this.isDestroyed = true; - try { - // Wait for the pInit to complete before disposing resources. - await this.pInit; - this.cvRouter?.dispose(); - this.cameraEnhancer?.dispose(); - } catch (_) {} - } -} -``` -> Note: -> -> 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) - - -### Generate and edit the `image-capture` component - -* Generate the `image-capture`. The `image-capture` component helps decode barcodes in an image. - -```cmd -ng generate component image-capture -``` - -* In `image-capture.component.html`, add code to setup the component's HTML - -```html - -
-
- -
-
{{resultText}}
-
-``` - -* In `image-capture.component.ts`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```ts -/* /src/app/image-capture/image-capture.component.ts */ -import { Component, ViewChild, ElementRef } from '@angular/core'; -import '../dynamsoft.config'; -import { EnumCapturedResultItemType } from 'dynamsoft-core'; -import type { BarcodeResultItem } from 'dynamsoft-barcode-reader'; -import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router'; - -@Component({ - selector: 'app-image-capture', - templateUrl: './image-capture.component.html', - styleUrls: ['./image-capture.component.css'], - standalone: true, -}) -export class ImageCaptureComponent { - resultText = ""; - - pCvRouter?: Promise; - isDestroyed = false; - - captureImage = async (e: Event) => { - let files = [...((e.target! as HTMLInputElement).files as any as File[])]; - (e.target! as HTMLInputElement).value = ''; // reset input - this.resultText = ''; - try { - // ensure cvRouter is created only once - const cvRouter = await (this.pCvRouter = - this.pCvRouter || CaptureVisionRouter.createInstance()); - if (this.isDestroyed) return; - - for (let file of files) { - // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. - const result = await cvRouter.capture(file, 'ReadBarcodes_ReadRateFirst'); - console.log(result); - if (this.isDestroyed) return; - - // Print file name if there's multiple files - if (files.length > 1) { - this.resultText += `\n${file.name}:\n`; - } - for (let _item of result.items) { - if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { - continue; // check if captured result item is a barcode - } - let item = _item as BarcodeResultItem; - this.resultText += item.text + '\n'; // output the decoded barcode text - } - // If no items are found, display that no barcode was detected - if (!result.items.length) - this.resultText += - 'No barcode found\n'; - } - } catch (ex: any) { - let errMsg = ex.message || ex; - console.error(ex); - alert(errMsg); - } - }; - - // dispose cvRouter when it's no longer needed - async ngOnDestroy() { - this.isDestroyed = true; - if (this.pCvRouter) { - try { - (await this.pCvRouter).dispose(); - } catch (_) {} - } - } -} -``` - -### Add the `video-capture` and `image-capture` component to the `app` component - -* On the `app` component, we will edit the component so that it offers buttons to switch components between `video-capture` and `image-capture`. - -* In `app.component.html`, add the following code. - -```html - -
-
-

Hello World for Angular

-
-
- - -
- @if (mode === 'video') { - - } @else { - - } -
-``` - -* In `app.component.ts`, add the following code. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```ts -/* /src/app/app.component.ts */ -import { Component } from '@angular/core'; -import { NgStyle } from '@angular/common'; - -import { ImageCaptureComponent } from './image-capture/image-capture.component'; -import { VideoCaptureComponent } from './video-capture/video-capture.component'; - -@Component({ - selector: 'app-root', - standalone: true, - templateUrl: './app.component.html', - styleUrl: './app.component.css', - imports: [NgStyle, ImageCaptureComponent, VideoCaptureComponent], -}) -export class AppComponent { - title = 'dbrjs-angular-sample'; - - mode: string = 'video'; - - switchMode(value: string) { - this.mode = value; - } -} -``` - -* Try running the project. - -```cmd -ng serve -``` - -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. - -## Code scaffolding - -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. - -## Build - -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. - -## Running unit tests - -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). - -## Running end-to-end tests - -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. - -## Further help - Angular - -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. - -## Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/angular/scan-using-rtu-api/.editorconfig b/frameworks/angular/scan-using-rtu-api/.editorconfig deleted file mode 100644 index f166060d..00000000 --- a/frameworks/angular/scan-using-rtu-api/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -# Editor configuration, see https://editorconfig.org -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -insert_final_newline = true -trim_trailing_whitespace = true - -[*.ts] -quote_type = single -ij_typescript_use_double_quotes = false - -[*.md] -max_line_length = off -trim_trailing_whitespace = false diff --git a/frameworks/angular/scan-using-rtu-api/.gitignore b/frameworks/angular/scan-using-rtu-api/.gitignore deleted file mode 100644 index cc7b1413..00000000 --- a/frameworks/angular/scan-using-rtu-api/.gitignore +++ /dev/null @@ -1,42 +0,0 @@ -# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. - -# Compiled output -/dist -/tmp -/out-tsc -/bazel-out - -# Node -/node_modules -npm-debug.log -yarn-error.log - -# IDEs and editors -.idea/ -.project -.classpath -.c9/ -*.launch -.settings/ -*.sublime-workspace - -# Visual Studio Code -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -.history/* - -# Miscellaneous -/.angular/cache -.sass-cache/ -/connect.lock -/coverage -/libpeerconnection.log -testem.log -/typings - -# System files -.DS_Store -Thumbs.db diff --git a/frameworks/angular/scan-using-rtu-api/README.md b/frameworks/angular/scan-using-rtu-api/README.md deleted file mode 100644 index 2e7d55c7..00000000 --- a/frameworks/angular/scan-using-rtu-api/README.md +++ /dev/null @@ -1,33 +0,0 @@ -# 📦 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/sdk-javascript/) in an **Angular** project for scanning a single barcode from live video. - -## ✨ Features - -- Easy integration with pre-built UI -- BarcodeScanner initialized in Angular component -- Scans one barcode at a time from video - -## 🚀 Quick Start - -### 1. Install Dependencies - -```bash -npm install -``` - -### 2. Run the App - -```bash -npm run start -``` - -Then open your browser at http://localhost:4200 to view the sample app. - -## 📌 Customization - -Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). - -## 📄 Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/angular/scan-using-rtu-api/angular.json b/frameworks/angular/scan-using-rtu-api/angular.json deleted file mode 100644 index 60a82d23..00000000 --- a/frameworks/angular/scan-using-rtu-api/angular.json +++ /dev/null @@ -1,100 +0,0 @@ -{ - "$schema": "./node_modules/@angular/cli/lib/config/schema.json", - "version": 1, - "newProjectRoot": "projects", - "projects": { - "angular": { - "projectType": "application", - "schematics": {}, - "root": "", - "sourceRoot": "src", - "prefix": "app", - "architect": { - "build": { - "builder": "@angular-devkit/build-angular:application", - "options": { - "outputPath": "dist/angular", - "index": "src/index.html", - "browser": "src/main.ts", - "polyfills": [ - "zone.js" - ], - "tsConfig": "tsconfig.app.json", - "assets": [ - { - "glob": "**/*", - "input": "public" - } - ], - "styles": [ - "src/styles.css" - ], - "scripts": [], - "baseHref": "./" - }, - "configurations": { - "production": { - "budgets": [ - { - "type": "initial", - "maximumWarning": "1000kb", - "maximumError": "1MB" - }, - { - "type": "anyComponentStyle", - "maximumWarning": "4kB", - "maximumError": "8kB" - } - ], - "outputHashing": "all" - }, - "development": { - "optimization": false, - "extractLicenses": false, - "sourceMap": true - } - }, - "defaultConfiguration": "production" - }, - "serve": { - "builder": "@angular-devkit/build-angular:dev-server", - "configurations": { - "production": { - "buildTarget": "angular:build:production" - }, - "development": { - "buildTarget": "angular:build:development" - } - }, - "defaultConfiguration": "development" - }, - "extract-i18n": { - "builder": "@angular-devkit/build-angular:extract-i18n" - }, - "test": { - "builder": "@angular-devkit/build-angular:karma", - "options": { - "polyfills": [ - "zone.js", - "zone.js/testing" - ], - "tsConfig": "tsconfig.spec.json", - "assets": [ - { - "glob": "**/*", - "input": "public" - } - ], - "styles": [ - "src/styles.css" - ], - "scripts": [] - } - } - } - } - }, - "cli": { - "analytics": false - } -} diff --git a/frameworks/angular/scan-using-rtu-api/package.json b/frameworks/angular/scan-using-rtu-api/package.json deleted file mode 100644 index 63ed4f23..00000000 --- a/frameworks/angular/scan-using-rtu-api/package.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "name": "angular", - "version": "0.0.0", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build", - "watch": "ng build --watch --configuration development" - }, - "private": true, - "dependencies": { - "@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.18", - "@types/jasmine": "~5.1.0", - "jasmine-core": "~5.6.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.7.2" - } -} 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 deleted file mode 100644 index 517d4fd3..00000000 --- a/frameworks/angular/scan-using-rtu-api/src/app/app.component.css +++ /dev/null @@ -1,23 +0,0 @@ -.barcode-scanner-hello-world-page { - width: 100%; - height: 100%; -} - -.barcode-scanner-title { - height: 90px; - display: flex; - justify-content: center; - align-items: center; - padding: 20px 0; -} - -.barcode-scanner-title .barcode-scanner-title-logo { - width: 40px; - height: 40px; - margin-left: 10px; -} - -.barcode-scanner-view { - width: 100%; - height: calc(100% - 90px); -} diff --git a/frameworks/angular/scan-using-rtu-api/src/app/app.component.html b/frameworks/angular/scan-using-rtu-api/src/app/app.component.html deleted file mode 100644 index 1e505568..00000000 --- a/frameworks/angular/scan-using-rtu-api/src/app/app.component.html +++ /dev/null @@ -1,7 +0,0 @@ -
-
-

Hello World for Angular

-
- -
-
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 deleted file mode 100644 index 81a700ed..00000000 --- a/frameworks/angular/scan-using-rtu-api/src/app/app.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { BarcodeScanner, BarcodeScannerConfig, EnumScanMode } from 'dynamsoft-barcode-reader-bundle'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrl: './app.component.css' -}) - -export class AppComponent { - title = 'angular'; - barcodeScanner: BarcodeScanner | null = null; - - @ViewChild('barcodeScannerViewRef') barcodeScannerViewRef!: ElementRef; - - async ngAfterViewInit(): Promise { - // Configuration object for initializing the BarcodeScanner instance - const config: BarcodeScannerConfig = { - license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key - - // Specify where to render the scanner UI - // If container is not specified, the UI will take up the full screen - 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, - // cameraSwitchControl: "toggleFrontBack", - // }, - - // Specify custom paths for the engine resources - 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 - this.barcodeScanner = new BarcodeScanner(config); - - // Launch the scanner; once a barcode is detected, display its text in an alert - let result = await this.barcodeScanner.launch(); - if (result.barcodeResults.length) { - alert(result.barcodeResults[0].text); - } - } - async ngOnDestroy(): Promise { - // Dispose of the barcode scanner when the component unmounts - this.barcodeScanner?.dispose(); - } -} diff --git a/frameworks/angular/scan-using-rtu-api/src/app/app.config.ts b/frameworks/angular/scan-using-rtu-api/src/app/app.config.ts deleted file mode 100644 index a1e7d6f8..00000000 --- a/frameworks/angular/scan-using-rtu-api/src/app/app.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; -import { provideRouter } from '@angular/router'; - -import { routes } from './app.routes'; - -export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)] -}; diff --git a/frameworks/angular/scan-using-rtu-api/src/app/app.routes.ts b/frameworks/angular/scan-using-rtu-api/src/app/app.routes.ts deleted file mode 100644 index dc39edb5..00000000 --- a/frameworks/angular/scan-using-rtu-api/src/app/app.routes.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Routes } from '@angular/router'; - -export const routes: Routes = []; diff --git a/frameworks/angular/scan-using-rtu-api/src/index.html b/frameworks/angular/scan-using-rtu-api/src/index.html deleted file mode 100644 index bae20c6b..00000000 --- a/frameworks/angular/scan-using-rtu-api/src/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera) - - - - - - - diff --git a/frameworks/angular/scan-using-rtu-api/src/main.ts b/frameworks/angular/scan-using-rtu-api/src/main.ts deleted file mode 100644 index 35b00f34..00000000 --- a/frameworks/angular/scan-using-rtu-api/src/main.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { bootstrapApplication } from '@angular/platform-browser'; -import { appConfig } from './app/app.config'; -import { AppComponent } from './app/app.component'; - -bootstrapApplication(AppComponent, appConfig) - .catch((err) => console.error(err)); diff --git a/frameworks/angular/scan-using-rtu-api/src/styles.css b/frameworks/angular/scan-using-rtu-api/src/styles.css deleted file mode 100644 index a0583309..00000000 --- a/frameworks/angular/scan-using-rtu-api/src/styles.css +++ /dev/null @@ -1,16 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html, -body { - width: 100%; - height: 100%; -} - -#root { - width: 100%; - height: 100%; -} diff --git a/frameworks/angular/scan-using-rtu-api/tsconfig.app.json b/frameworks/angular/scan-using-rtu-api/tsconfig.app.json deleted file mode 100644 index 3775b37e..00000000 --- a/frameworks/angular/scan-using-rtu-api/tsconfig.app.json +++ /dev/null @@ -1,15 +0,0 @@ -/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ -/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/app", - "types": [] - }, - "files": [ - "src/main.ts" - ], - "include": [ - "src/**/*.d.ts" - ] -} diff --git a/frameworks/angular/scan-using-rtu-api/tsconfig.json b/frameworks/angular/scan-using-rtu-api/tsconfig.json deleted file mode 100644 index 5525117c..00000000 --- a/frameworks/angular/scan-using-rtu-api/tsconfig.json +++ /dev/null @@ -1,27 +0,0 @@ -/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ -/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ -{ - "compileOnSave": false, - "compilerOptions": { - "outDir": "./dist/out-tsc", - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "skipLibCheck": true, - "isolatedModules": true, - "esModuleInterop": true, - "experimentalDecorators": true, - "moduleResolution": "bundler", - "importHelpers": true, - "target": "ES2022", - "module": "ES2022" - }, - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true - } -} diff --git a/frameworks/angular/scan-using-rtu-api/tsconfig.spec.json b/frameworks/angular/scan-using-rtu-api/tsconfig.spec.json deleted file mode 100644 index 5fb748d9..00000000 --- a/frameworks/angular/scan-using-rtu-api/tsconfig.spec.json +++ /dev/null @@ -1,15 +0,0 @@ -/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ -/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ -{ - "extends": "./tsconfig.json", - "compilerOptions": { - "outDir": "./out-tsc/spec", - "types": [ - "jasmine" - ] - }, - "include": [ - "src/**/*.spec.ts", - "src/**/*.d.ts" - ] -} diff --git a/frameworks/angular/scan-using-foundational-api/src/app/app.component.css b/frameworks/angular/src/app/app.component.css similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/app/app.component.css rename to frameworks/angular/src/app/app.component.css diff --git a/frameworks/angular/scan-using-foundational-api/src/app/app.component.html b/frameworks/angular/src/app/app.component.html similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/app/app.component.html rename to frameworks/angular/src/app/app.component.html diff --git a/frameworks/angular/scan-using-foundational-api/src/app/app.component.ts b/frameworks/angular/src/app/app.component.ts similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/app/app.component.ts rename to frameworks/angular/src/app/app.component.ts diff --git a/frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts b/frameworks/angular/src/app/dynamsoft.config.ts similarity index 92% rename from frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts rename to frameworks/angular/src/app/dynamsoft.config.ts index e4246de0..dec0617b 100644 --- a/frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts +++ b/frameworks/angular/src/app/dynamsoft.config.ts @@ -7,12 +7,12 @@ 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'); /** * 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. + * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. * LICENSE ALERT - THE END */ diff --git a/frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.css b/frameworks/angular/src/app/image-capture/image-capture.component.css similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.css rename to frameworks/angular/src/app/image-capture/image-capture.component.css diff --git a/frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.html b/frameworks/angular/src/app/image-capture/image-capture.component.html similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.html rename to frameworks/angular/src/app/image-capture/image-capture.component.html diff --git a/frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.ts b/frameworks/angular/src/app/image-capture/image-capture.component.ts similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/app/image-capture/image-capture.component.ts rename to frameworks/angular/src/app/image-capture/image-capture.component.ts diff --git a/frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.css b/frameworks/angular/src/app/video-capture/video-capture.component.css similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.css rename to frameworks/angular/src/app/video-capture/video-capture.component.css diff --git a/frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.html b/frameworks/angular/src/app/video-capture/video-capture.component.html similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.html rename to frameworks/angular/src/app/video-capture/video-capture.component.html diff --git a/frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.ts b/frameworks/angular/src/app/video-capture/video-capture.component.ts similarity index 98% rename from frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.ts rename to frameworks/angular/src/app/video-capture/video-capture.component.ts index 26690ed3..7ac4f50e 100644 --- a/frameworks/angular/scan-using-foundational-api/src/app/video-capture/video-capture.component.ts +++ b/frameworks/angular/src/app/video-capture/video-capture.component.ts @@ -48,7 +48,7 @@ export class VideoCaptureComponent { this.cvRouter.setInput(this.cameraEnhancer); // Define a callback for results. - this.cvRouter.addResultReceiver({ + await this.cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; console.log(result); diff --git a/frameworks/angular/scan-using-foundational-api/src/assets/.gitkeep b/frameworks/angular/src/assets/.gitkeep similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/assets/.gitkeep rename to frameworks/angular/src/assets/.gitkeep diff --git a/frameworks/angular/scan-using-foundational-api/src/favicon.ico b/frameworks/angular/src/favicon.ico similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/favicon.ico rename to frameworks/angular/src/favicon.ico diff --git a/frameworks/angular/scan-using-foundational-api/src/index.html b/frameworks/angular/src/index.html similarity index 82% rename from frameworks/angular/scan-using-foundational-api/src/index.html rename to frameworks/angular/src/index.html index bce6b22f..4e212223 100644 --- a/frameworks/angular/scan-using-foundational-api/src/index.html +++ b/frameworks/angular/src/index.html @@ -11,7 +11,6 @@ content="Dynamsoft Barcode Reader in an Angular Application, helps read barcodes from camera or images." /> - diff --git a/frameworks/angular/scan-using-foundational-api/src/main.ts b/frameworks/angular/src/main.ts similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/main.ts rename to frameworks/angular/src/main.ts diff --git a/frameworks/angular/scan-using-foundational-api/src/styles.css b/frameworks/angular/src/styles.css similarity index 100% rename from frameworks/angular/scan-using-foundational-api/src/styles.css rename to frameworks/angular/src/styles.css diff --git a/frameworks/angular/scan-using-foundational-api/tsconfig.app.json b/frameworks/angular/tsconfig.app.json similarity index 100% rename from frameworks/angular/scan-using-foundational-api/tsconfig.app.json rename to frameworks/angular/tsconfig.app.json diff --git a/frameworks/angular/scan-using-foundational-api/tsconfig.json b/frameworks/angular/tsconfig.json similarity index 100% rename from frameworks/angular/scan-using-foundational-api/tsconfig.json rename to frameworks/angular/tsconfig.json diff --git a/frameworks/angular/scan-using-foundational-api/tsconfig.spec.json b/frameworks/angular/tsconfig.spec.json similarity index 100% rename from frameworks/angular/scan-using-foundational-api/tsconfig.spec.json rename to frameworks/angular/tsconfig.spec.json diff --git a/frameworks/blazor/scan-using-foundational-api/.gitignore b/frameworks/blazor/.gitignore similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/.gitignore rename to frameworks/blazor/.gitignore diff --git a/frameworks/blazor/README.md b/frameworks/blazor/README.md index f2dc0dec..e49456e1 100644 --- a/frameworks/blazor/README.md +++ b/frameworks/blazor/README.md @@ -1,23 +1,372 @@ -# Blazor samples +# Hello World Sample for Blazor -This directory contains Blazor examples demonstrating how to integrate the Dynamsoft Barcode Reader (JavaScript edition) into Blazor apps. +[Blazor](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) is a framework for building interactive client-side web apps with .NET and C#. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Blazor application using [JavaScript Interlop](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions). -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). We also used .NET 8.0 (version 8.0.8) to develop this sample. To ensure the sample app runs properly, please refer to this guide to update your .NET installation - https://learn.microsoft.com/en-us/dotnet/core/install/upgrade. -- scan-using-foundational-api/ — Blazor example with JS interop for video/image decoding. -- scan-using-rtu-api/ — RTU API demo for Blazor. +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -1. Change to a subexample directory, e.g.: +* Hello World in Blazor - Source Code - ```bash - cd scan-using-foundational-api - ``` +## Preparation -2. Follow the subexample README for exact steps (may require dotnet/SDK commands or npm for static assets). +This sample was developed using Visual Studio 2022. For a more in-depth guide on creating a Blazor web application with Visual Studio 2022, please follow Microsoft's tutorial on [Building your first web app with ASP.NET Core using Blazor](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro). -## Notes +## Quick Start -- 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. \ No newline at end of file +1. **Open the application** in Visual Studio 2022 by clicking the `Open a Project or Solution` button, and choosing on the `BlazorApp.csproj` file. + +2. **Run the application** by clicking the `Start Debugging` button (a green arrow) in the Debug Toolbar. + +3. A window should open to view the sample application + +> Note: +> +> This sample uses the packages `Microsoft.AspNetCore.Components.WebAssembly` v8.0.8 and `Microsoft.AspNetCore.Components.WebAssembly.DevServer` v8.0.8 which require .NET v8.0.8. +> Refer to the `BlazorApp.csproj` file to change the versions as needed. + +## Creating the sample project + +In this section, we will be creating a Blazor application utilizing the Dynamsoft Barcode Reader bundle sdk. + +We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. + +By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! + +### Initialize project + +Please follow the guide created by Microsoft on [Building your first web app with ASP.NET Code using Blazor](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro). + +This tutorial will guide you through downloading Visual Studio, and set up needed to create a Blazor Web Application. + +**IMPORTANT**: When creating a new project, please select **"Blazor WebAssembly Standalone App"** instead of "Blazor Web App". + +## Start to implement + +### Create a `DecodeVideo.razor` component under the `Pages\` folder + +In `Pages\DecodeVideo.razor`, we will modify the component to enable barcode decoding via camera. This page will be accessible at the `/video` URL. + +```razor +@page "/video" +@inject IJSRuntime JS + +Dynamsoft Barcode Reader Hello World - Blazor + +

Decode Video

+ + +

Results:

+
+ + +@code { + // reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions + private string mode = "stop"; + private string videoDecodeBtn = "Decode Video"; + + private async Task ToggleVideoTask() + { + await JS.InvokeVoidAsync("loadDecodeVideoModule"); + + if (mode == "videoDecode") + { + await StopDecodeVideoTask(); + } + else if (mode == "stop") + { + await DecodeVideoTask(); + + } + } + + private async Task DecodeVideoTask() + { + mode = "videoDecode"; + videoDecodeBtn = "Stop Decode"; + await JS.InvokeAsync("startVideoDecode"); + } + + private async Task StopDecodeVideoTask() + { + mode = "stop"; + videoDecodeBtn = "Decode Video"; + await JS.InvokeAsync("stopVideoDecode"); + } +} +``` + +> Note: +> +> We can significantly improve the initial load speed and performance when we dynamically import Dynamsoft's Barcode Scanning component on-demand. In the sample code above, we dynamically imported the decode video module through the line `await JS.InvokeVoidAsync("loadDecodeVideoModule");`. + +### Create a `wwwroot\decodeVideo.js` file + +In `wwwroot\decodeVideo.js`, we will instantiate `cvRouter` and `cameraEnhancer` to start decoding barcodes through the camera. + +Additionally, we'll include a function to clean up `cvRouter` and `cameraEnhancer` when they are no longer needed. + +These functions will be called by the Blazor components through JavaScript Interop. + +Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions + +```javascript +// Create JS function "startVideoDecode" +window.startVideoDecode = async () => { + 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()); + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + cvRouter.setInput(cameraEnhancer); + + // Define a callback for results. + cvRouter.addResultReceiver({ + onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; + + resultsContainer.textContent = ""; + for (let item of result.barcodeResultItems) { + resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`; + } + }, + }); + + // 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 single barcode. + await cameraEnhancer.open(); + + cameraView.setScanLaserVisible(true); + await cvRouter.startCapturing("ReadSingleBarcode"); + } 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"); + + 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); + } +} +``` + +### Create a `Pages\DecodeImage.razor` component + +In `Pages\DecodeImage.razor`, we will modify the component to enable barcode decoding through an image. This page will be accessible at the `/image` URL. + +```razor +@page "/image" +@inject IJSRuntime JS + +Dynamsoft Barcode Reader Hello World - Blazor + +

Decode Image

+ +

Results:

+
+ +@code { + // reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions + +private async Task DecodeImageTask() + { + // Dynamically load decode image module + await JS.InvokeVoidAsync("loadDecodeImageModule"); + await JS.InvokeAsync("startImageDecode"); + } + + public void Dispose() + { + JS.InvokeAsync("cleanUpImageDecode"); + } +} +``` + +> Note: +> +> We can significantly improve the initial load speed and performance when we dynamically import Dynamsoft's Barcode Scanning component on-demand. In the sample code above, we dynamically imported the decode image module through the line `await JS.InvokeVoidAsync("loadDecodeImageModule");`. + +### Create a `wwwroot\decodeImage.js` file + +In `wwwroot\decodeImage.js`, we will instantiate `cvRouter` to decode barcodes in images. + +These functions will be called by the Blazor components through JavaScript Interop. + +Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions + +```javascript +// Create JS function "startImageDecode" +window.startImageDecode = async () => { + const inputElement = document.getElementById("inputElement"); + const resultsContainer = document.getElementById("results"); + resultsContainer.innerText = ""; // Reset results container + + const { files } = inputElement; + + try { + for (let file of files) { + cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + if (files.length > 1) { + resultsContainer.innerText += `\nFile: ${file.name}\n`; + } + for (let item of result.items) { + if (item.type !== Dynamsoft.Core.EnumCapturedResultItemType.CRIT_BARCODE) { + continue; + } + resultsContainer.innerText += item.text + "\n"; + console.log(item.text); + } + if (!result.items.length) resultsContainer.innerText += "No barcode found\n"; + } + } catch (ex) { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } finally { + inputElement.value = ""; + await cvRouter?.dispose(); + } +}; +``` + +### Modify the `wwwroot\index.html` file + +Inside the `wwwroot\index.html` file, we will initialize the license and necessary modules for Dynamsoft Barcode Reader and create functions to dynamically load the video and image modules. + +```html + + +... + +
+ ... + + + + + + +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. + + +### Modify the `Layout\NavMenu.razor` and `Layout\NavMenu.razor.css` file + +To make sure the `Decode Video` and `Decode Image` pages are accessible from the sidebar, add the following code block to `Layout\NavMenu.razor`. + +```html +... +
+ + Decode Video + +
+
+ + Decode Image + +
+... +``` + +We'll also add the following CSS code to include the icons for `Decode Video` and `Decode Image` in the `Layout\NavMenu.razor.css` file. + +```css +.bi-video-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-camera-video-fill' viewBox='0 0 16 16'%3E%3Cpath d='M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); +} + +.bi-image-fill-nav-menu { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-camera-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54L1 12.5v-9a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E"); +} +``` + +## Run the application + +We can run the application by clicking the `Start Debugging` button (a green arrow) in the Debug Toolbar. + +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/App.razor b/frameworks/blazor/hello-world-blazor/BlazorApp/App.razor similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/App.razor rename to frameworks/blazor/hello-world-blazor/BlazorApp/App.razor diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/BlazorApp.csproj b/frameworks/blazor/hello-world-blazor/BlazorApp/BlazorApp.csproj similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/BlazorApp.csproj rename to frameworks/blazor/hello-world-blazor/BlazorApp/BlazorApp.csproj diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Layout/MainLayout.razor b/frameworks/blazor/hello-world-blazor/BlazorApp/Layout/MainLayout.razor similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Layout/MainLayout.razor rename to frameworks/blazor/hello-world-blazor/BlazorApp/Layout/MainLayout.razor diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Layout/MainLayout.razor.css b/frameworks/blazor/hello-world-blazor/BlazorApp/Layout/MainLayout.razor.css similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Layout/MainLayout.razor.css rename to frameworks/blazor/hello-world-blazor/BlazorApp/Layout/MainLayout.razor.css diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Layout/NavMenu.razor b/frameworks/blazor/hello-world-blazor/BlazorApp/Layout/NavMenu.razor similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Layout/NavMenu.razor rename to frameworks/blazor/hello-world-blazor/BlazorApp/Layout/NavMenu.razor diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Layout/NavMenu.razor.css b/frameworks/blazor/hello-world-blazor/BlazorApp/Layout/NavMenu.razor.css similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Layout/NavMenu.razor.css rename to frameworks/blazor/hello-world-blazor/BlazorApp/Layout/NavMenu.razor.css diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Pages/DecodeImage.razor b/frameworks/blazor/hello-world-blazor/BlazorApp/Pages/DecodeImage.razor similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Pages/DecodeImage.razor rename to frameworks/blazor/hello-world-blazor/BlazorApp/Pages/DecodeImage.razor diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Pages/DecodeVideo.razor b/frameworks/blazor/hello-world-blazor/BlazorApp/Pages/DecodeVideo.razor similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Pages/DecodeVideo.razor rename to frameworks/blazor/hello-world-blazor/BlazorApp/Pages/DecodeVideo.razor diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Pages/Home.razor b/frameworks/blazor/hello-world-blazor/BlazorApp/Pages/Home.razor similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Pages/Home.razor rename to frameworks/blazor/hello-world-blazor/BlazorApp/Pages/Home.razor diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Program.cs b/frameworks/blazor/hello-world-blazor/BlazorApp/Program.cs similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Program.cs rename to frameworks/blazor/hello-world-blazor/BlazorApp/Program.cs diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Properties/launchSettings.json b/frameworks/blazor/hello-world-blazor/BlazorApp/Properties/launchSettings.json similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/Properties/launchSettings.json rename to frameworks/blazor/hello-world-blazor/BlazorApp/Properties/launchSettings.json diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/_Imports.razor b/frameworks/blazor/hello-world-blazor/BlazorApp/_Imports.razor similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/_Imports.razor rename to frameworks/blazor/hello-world-blazor/BlazorApp/_Imports.razor diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/css/app.css b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/css/app.css similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/css/app.css rename to frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/css/app.css diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css rename to frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css.map b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css.map similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css.map rename to frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/css/bootstrap/bootstrap.min.css.map diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeImage.js b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/decodeImage.js similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeImage.js rename to frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/decodeImage.js diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js similarity index 98% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js rename to frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js index b0b380fc..d50df083 100644 --- a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js +++ b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js @@ -19,7 +19,7 @@ window.startVideoDecode = async () => { cvRouter.setInput(cameraEnhancer); // Define a callback for results. - cvRouter.addResultReceiver({ + await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/favicon.png b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/favicon.png similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/favicon.png rename to frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/favicon.png diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/icon-192.png b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/icon-192.png similarity index 100% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/icon-192.png rename to frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/icon-192.png diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/index.html b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html similarity index 95% rename from frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/index.html rename to frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html index fd4d7ef1..701cc861 100644 --- a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/index.html +++ b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html @@ -28,7 +28,7 @@
- + - - - - - -``` - -> Note: -> -> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. - - -### Modify the `Layout\NavMenu.razor` and `Layout\NavMenu.razor.css` file - -To make sure the `Decode Video` and `Decode Image` pages are accessible from the sidebar, add the following code block to `Layout\NavMenu.razor`. - -```html -... -
- - Decode Video - -
-
- - Decode Image - -
-... -``` - -We'll also add the following CSS code to include the icons for `Decode Video` and `Decode Image` in the `Layout\NavMenu.razor.css` file. - -```css -.bi-video-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-camera-video-fill' viewBox='0 0 16 16'%3E%3Cpath d='M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); -} - -.bi-image-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-camera-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54L1 12.5v-9a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E"); -} -``` - -## Run the application - -We can run the application by clicking the `Start Debugging` button (a green arrow) in the Debug Toolbar. - -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/blazor/scan-using-rtu-api/.gitignore b/frameworks/blazor/scan-using-rtu-api/.gitignore deleted file mode 100644 index e6c4e46a..00000000 --- a/frameworks/blazor/scan-using-rtu-api/.gitignore +++ /dev/null @@ -1,486 +0,0 @@ -## Ignore Visual Studio temporary files, build results, and -## files generated by popular Visual Studio add-ons. -## -## Get latest from `dotnet new gitignore` - -# dotenv files -.env - -# User-specific files -*.rsuser -*.suo -*.user -*.userosscache -*.sln.docstates - -# User-specific files (MonoDevelop/Xamarin Studio) -*.userprefs - -# Mono auto generated files -mono_crash.* - -# Build results -[Dd]ebug/ -[Dd]ebugPublic/ -[Rr]elease/ -[Rr]eleases/ -x64/ -x86/ -[Ww][Ii][Nn]32/ -[Aa][Rr][Mm]/ -[Aa][Rr][Mm]64/ -bld/ -[Bb]in/ -[Oo]bj/ -[Ll]og/ -[Ll]ogs/ - -# Visual Studio 2015/2017 cache/options directory -.vs/ -# Uncomment if you have tasks that create the project's static files in wwwroot -#wwwroot/ - -# Visual Studio 2017 auto generated files -Generated\ Files/ - -# MSTest test Results -[Tt]est[Rr]esult*/ -[Bb]uild[Ll]og.* - -# NUnit -*.VisualState.xml -TestResult.xml -nunit-*.xml - -# Build Results of an ATL Project -[Dd]ebugPS/ -[Rr]eleasePS/ -dlldata.c - -# Benchmark Results -BenchmarkDotNet.Artifacts/ - -# .NET -project.lock.json -project.fragment.lock.json -artifacts/ - -# Tye -.tye/ - -# ASP.NET Scaffolding -ScaffoldingReadMe.txt - -# StyleCop -StyleCopReport.xml - -# Files built by Visual Studio -*_i.c -*_p.c -*_h.h -*.ilk -*.meta -*.obj -*.iobj -*.pch -*.pdb -*.ipdb -*.pgc -*.pgd -*.rsp -*.sbr -*.tlb -*.tli -*.tlh -*.tmp -*.tmp_proj -*_wpftmp.csproj -*.log -*.tlog -*.vspscc -*.vssscc -.builds -*.pidb -*.svclog -*.scc - -# Chutzpah Test files -_Chutzpah* - -# Visual C++ cache files -ipch/ -*.aps -*.ncb -*.opendb -*.opensdf -*.sdf -*.cachefile -*.VC.db -*.VC.VC.opendb - -# Visual Studio profiler -*.psess -*.vsp -*.vspx -*.sap - -# Visual Studio Trace Files -*.e2e - -# TFS 2012 Local Workspace -$tf/ - -# Guidance Automation Toolkit -*.gpState - -# ReSharper is a .NET coding add-in -_ReSharper*/ -*.[Rr]e[Ss]harper -*.DotSettings.user - -# TeamCity is a build add-in -_TeamCity* - -# DotCover is a Code Coverage Tool -*.dotCover - -# AxoCover is a Code Coverage Tool -.axoCover/* -!.axoCover/settings.json - -# Coverlet is a free, cross platform Code Coverage Tool -coverage*.json -coverage*.xml -coverage*.info - -# Visual Studio code coverage results -*.coverage -*.coveragexml - -# NCrunch -_NCrunch_* -.*crunch*.local.xml -nCrunchTemp_* - -# MightyMoose -*.mm.* -AutoTest.Net/ - -# Web workbench (sass) -.sass-cache/ - -# Installshield output folder -[Ee]xpress/ - -# DocProject is a documentation generator add-in -DocProject/buildhelp/ -DocProject/Help/*.HxT -DocProject/Help/*.HxC -DocProject/Help/*.hhc -DocProject/Help/*.hhk -DocProject/Help/*.hhp -DocProject/Help/Html2 -DocProject/Help/html - -# Click-Once directory -publish/ - -# Publish Web Output -*.[Pp]ublish.xml -*.azurePubxml -# Note: Comment the next line if you want to checkin your web deploy settings, -# but database connection strings (with potential passwords) will be unencrypted -*.pubxml -*.publishproj - -# Microsoft Azure Web App publish settings. Comment the next line if you want to -# checkin your Azure Web App publish settings, but sensitive information contained -# in these scripts will be unencrypted -PublishScripts/ - -# NuGet Packages -*.nupkg -# NuGet Symbol Packages -*.snupkg -# The packages folder can be ignored because of Package Restore -**/[Pp]ackages/* -# except build/, which is used as an MSBuild target. -!**/[Pp]ackages/build/ -# Uncomment if necessary however generally it will be regenerated when needed -#!**/[Pp]ackages/repositories.config -# NuGet v3's project.json files produces more ignorable files -*.nuget.props -*.nuget.targets - -# Microsoft Azure Build Output -csx/ -*.build.csdef - -# Microsoft Azure Emulator -ecf/ -rcf/ - -# Windows Store app package directories and files -AppPackages/ -BundleArtifacts/ -Package.StoreAssociation.xml -_pkginfo.txt -*.appx -*.appxbundle -*.appxupload - -# Visual Studio cache files -# files ending in .cache can be ignored -*.[Cc]ache -# but keep track of directories ending in .cache -!?*.[Cc]ache/ - -# Others -ClientBin/ -~$* -*~ -*.dbmdl -*.dbproj.schemaview -*.jfm -*.pfx -*.publishsettings -orleans.codegen.cs - -# Including strong name files can present a security risk -# (https://github.com/github/gitignore/pull/2483#issue-259490424) -#*.snk - -# Since there are multiple workflows, uncomment next line to ignore bower_components -# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) -#bower_components/ - -# RIA/Silverlight projects -Generated_Code/ - -# Backup & report files from converting an old project file -# to a newer Visual Studio version. Backup files are not needed, -# because we have git ;-) -_UpgradeReport_Files/ -Backup*/ -UpgradeLog*.XML -UpgradeLog*.htm -ServiceFabricBackup/ -*.rptproj.bak - -# SQL Server files -*.mdf -*.ldf -*.ndf - -# Business Intelligence projects -*.rdl.data -*.bim.layout -*.bim_*.settings -*.rptproj.rsuser -*- [Bb]ackup.rdl -*- [Bb]ackup ([0-9]).rdl -*- [Bb]ackup ([0-9][0-9]).rdl - -# Microsoft Fakes -FakesAssemblies/ - -# GhostDoc plugin setting file -*.GhostDoc.xml - -# Node.js Tools for Visual Studio -.ntvs_analysis.dat -node_modules/ - -# Visual Studio 6 build log -*.plg - -# Visual Studio 6 workspace options file -*.opt - -# Visual Studio 6 auto-generated workspace file (contains which files were open etc.) -*.vbw - -# Visual Studio 6 auto-generated project file (contains which files were open etc.) -*.vbp - -# Visual Studio 6 workspace and project file (working project files containing files to include in project) -*.dsw -*.dsp - -# Visual Studio 6 technical files -*.ncb -*.aps - -# Visual Studio LightSwitch build output -**/*.HTMLClient/GeneratedArtifacts -**/*.DesktopClient/GeneratedArtifacts -**/*.DesktopClient/ModelManifest.xml -**/*.Server/GeneratedArtifacts -**/*.Server/ModelManifest.xml -_Pvt_Extensions - -# Paket dependency manager -.paket/paket.exe -paket-files/ - -# FAKE - F# Make -.fake/ - -# CodeRush personal settings -.cr/personal - -# Python Tools for Visual Studio (PTVS) -__pycache__/ -*.pyc - -# Cake - Uncomment if you are using it -# tools/** -# !tools/packages.config - -# Tabs Studio -*.tss - -# Telerik's JustMock configuration file -*.jmconfig - -# BizTalk build output -*.btp.cs -*.btm.cs -*.odx.cs -*.xsd.cs - -# OpenCover UI analysis results -OpenCover/ - -# Azure Stream Analytics local run output -ASALocalRun/ - -# MSBuild Binary and Structured Log -*.binlog - -# NVidia Nsight GPU debugger configuration file -*.nvuser - -# MFractors (Xamarin productivity tool) working folder -.mfractor/ - -# Local History for Visual Studio -.localhistory/ - -# Visual Studio History (VSHistory) files -.vshistory/ - -# BeatPulse healthcheck temp database -healthchecksdb - -# Backup folder for Package Reference Convert tool in Visual Studio 2017 -MigrationBackup/ - -# Ionide (cross platform F# VS Code tools) working folder -.ionide/ - -# Fody - auto-generated XML schema -FodyWeavers.xsd - -# VS Code files for those working on multiple tools -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -*.code-workspace - -# Local History for Visual Studio Code -.history/ - -# Windows Installer files from build outputs -*.cab -*.msi -*.msix -*.msm -*.msp - -# JetBrains Rider -*.sln.iml -.idea - -## -## Visual studio for Mac -## - - -# globs -Makefile.in -*.userprefs -*.usertasks -config.make -config.status -aclocal.m4 -install-sh -autom4te.cache/ -*.tar.gz -tarballs/ -test-results/ - -# Mac bundle stuff -*.dmg -*.app - -# content below from: https://github.com/github/gitignore/blob/master/Global/macOS.gitignore -# General -.DS_Store -.AppleDouble -.LSOverride - -# Icon must end with two \r -Icon - - -# Thumbnails -._* - -# Files that might appear in the root of a volume -.DocumentRevisions-V100 -.fseventsd -.Spotlight-V100 -.TemporaryItems -.Trashes -.VolumeIcon.icns -.com.apple.timemachine.donotpresent - -# Directories potentially created on remote AFP share -.AppleDB -.AppleDesktop -Network Trash Folder -Temporary Items -.apdisk - -# content below from: https://github.com/github/gitignore/blob/master/Global/Windows.gitignore -# Windows thumbnail cache files -Thumbs.db -ehthumbs.db -ehthumbs_vista.db - -# Dump file -*.stackdump - -# Folder config file -[Dd]esktop.ini - -# Recycle Bin used on file shares -$RECYCLE.BIN/ - -# Windows Installer files -*.cab -*.msi -*.msix -*.msm -*.msp - -# Windows shortcuts -*.lnk - -# Vim temporary swap files -*.swp - -PublishProfiles diff --git a/frameworks/blazor/scan-using-rtu-api/App.razor b/frameworks/blazor/scan-using-rtu-api/App.razor deleted file mode 100644 index 6fd3ed1b..00000000 --- a/frameworks/blazor/scan-using-rtu-api/App.razor +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Not found - -

Sorry, there's nothing at this address.

- - - diff --git a/frameworks/blazor/scan-using-rtu-api/BlazorApp.csproj b/frameworks/blazor/scan-using-rtu-api/BlazorApp.csproj deleted file mode 100644 index 8e50d8dc..00000000 --- a/frameworks/blazor/scan-using-rtu-api/BlazorApp.csproj +++ /dev/null @@ -1,18 +0,0 @@ - - - - net8.0 - enable - enable - - - - - - - - - - - - diff --git a/frameworks/blazor/scan-using-rtu-api/Layout/MainLayout.razor b/frameworks/blazor/scan-using-rtu-api/Layout/MainLayout.razor deleted file mode 100644 index 5a584b18..00000000 --- a/frameworks/blazor/scan-using-rtu-api/Layout/MainLayout.razor +++ /dev/null @@ -1,4 +0,0 @@ -@inherits LayoutComponentBase -
- @Body -
diff --git a/frameworks/blazor/scan-using-rtu-api/Pages/Home.razor b/frameworks/blazor/scan-using-rtu-api/Pages/Home.razor deleted file mode 100644 index c94ddbd7..00000000 --- a/frameworks/blazor/scan-using-rtu-api/Pages/Home.razor +++ /dev/null @@ -1,25 +0,0 @@ -@page "/" -@inject IJSRuntime JS - -Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera) - -

Barcode Scanner for Svelte

-
-
- -@code { - // reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-8.0#invoke-js-functions - - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - // This code will only run once after the component has rendered. - // It's the ideal place to call JavaScript functions that - // need access to the rendered HTML. - var resultTxt = await JS.InvokeAsync("decodeBarcodeViaCamera"); - await JS.InvokeVoidAsync("alert", resultTxt); - } - } -} diff --git a/frameworks/blazor/scan-using-rtu-api/Program.cs b/frameworks/blazor/scan-using-rtu-api/Program.cs deleted file mode 100644 index e6ef32a3..00000000 --- a/frameworks/blazor/scan-using-rtu-api/Program.cs +++ /dev/null @@ -1,11 +0,0 @@ -using BlazorApp; -using Microsoft.AspNetCore.Components.Web; -using Microsoft.AspNetCore.Components.WebAssembly.Hosting; - -var builder = WebAssemblyHostBuilder.CreateDefault(args); -builder.RootComponents.Add("#app"); -builder.RootComponents.Add("head::after"); - -builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); - -await builder.Build().RunAsync(); diff --git a/frameworks/blazor/scan-using-rtu-api/Properties/launchSettings.json b/frameworks/blazor/scan-using-rtu-api/Properties/launchSettings.json deleted file mode 100644 index e25d8f48..00000000 --- a/frameworks/blazor/scan-using-rtu-api/Properties/launchSettings.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "$schema": "http://json.schemastore.org/launchsettings.json", - "iisSettings": { - "windowsAuthentication": false, - "anonymousAuthentication": true, - "iisExpress": { - "applicationUrl": "http://localhost:17951", - "sslPort": 44366 - } - }, - "profiles": { - "http": { - "commandName": "Project", - "dotnetRunMessages": true, - "launchBrowser": true, - "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", - "applicationUrl": "http://localhost:5244", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - }, - "https": { - "commandName": "Project", - "dotnetRunMessages": true, - "launchBrowser": true, - "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", - "applicationUrl": "https://localhost:7074;http://localhost:5244", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - }, - "IIS Express": { - "commandName": "IISExpress", - "launchBrowser": true, - "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - } - } -} diff --git a/frameworks/blazor/scan-using-rtu-api/README.md b/frameworks/blazor/scan-using-rtu-api/README.md deleted file mode 100644 index 0cea6a03..00000000 --- a/frameworks/blazor/scan-using-rtu-api/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# 📦 Scan Single Barcode - Blazor - -This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) in a **Blazor** app to scan a single barcode using the camera. - -## ✨ Features - -- Easy integration with pre-built UI -- Renders barcodeScanner inside a container -- Scans one barcode at a time from video - -## 📌 Customization - -Please refer check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). - -## 📄 Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/blazor/scan-using-rtu-api/_Imports.razor b/frameworks/blazor/scan-using-rtu-api/_Imports.razor deleted file mode 100644 index 2c3956ad..00000000 --- a/frameworks/blazor/scan-using-rtu-api/_Imports.razor +++ /dev/null @@ -1,10 +0,0 @@ -@using System.Net.Http -@using System.Net.Http.Json -@using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.Routing -@using Microsoft.AspNetCore.Components.Web -@using Microsoft.AspNetCore.Components.Web.Virtualization -@using Microsoft.AspNetCore.Components.WebAssembly.Http -@using Microsoft.JSInterop -@using BlazorApp -@using BlazorApp.Layout diff --git a/frameworks/blazor/scan-using-rtu-api/wwwroot/index.html b/frameworks/blazor/scan-using-rtu-api/wwwroot/index.html deleted file mode 100644 index 529961ba..00000000 --- a/frameworks/blazor/scan-using-rtu-api/wwwroot/index.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - - - BlazorApp - - - - -
-
- - - - - - - \ No newline at end of file diff --git a/frameworks/capacitor/README.md b/frameworks/capacitor/README.md index 4b3e675c..7b3a62b7 100644 --- a/frameworks/capacitor/README.md +++ b/frameworks/capacitor/README.md @@ -1,22 +1,43 @@ -# Capacitor samples +# 📦 Scan Single Barcode - Capacitor -This directory contains Capacitor examples showing how to use the Dynamsoft Barcode Reader in hybrid mobile apps (Android / iOS) via Capacitor. +This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) in a **Capacitor** app to scan a single barcode using the camera. -**Included example** +We use typescript and rollup inside capacitor for demonstration. You can use any framework you like, or even vanilla javascript. -- scan-using-rtu-api/ — Capacitor project illustrating RTU API usage. +## ✨ Features -## Quick start +- Easy integration with pre-built UI +- Renders barcodeScanner inside a Capacitor container +- Scans one barcode at a time from video -1. Change to the example directory, e.g.: - - ```bash - cd scan-using-rtu-api - ``` +## 🚀 Quick Start -2. Follow the subexample README for platform-specific setup (npm install, capacitor sync, open Android Studio/Xcode). +```bash +npm install +npm run build +npx cap sync +``` -## Notes +Then build your app in Android Studio and Xcode. -- 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. \ No newline at end of file +## 👓 Camera Permission + +Notice we add camera permission in `AndroidManifest.xml` and `Info.plist`. + +[android/app/src/main/AndroidManifest.xml](android/app/src/main/AndroidManifest.xml): +```xml + +``` +[ios/App/App/Info.plist](ios/App/App/Info.plist): +```xml +NSCameraUsageDescription +Decoding barcodes from video needs to access your camera. +``` + +## 📌 Customization + +Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). + +## 📄 Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/capacitor/scan-using-rtu-api/android/.gitignore b/frameworks/capacitor/android/.gitignore similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/.gitignore rename to frameworks/capacitor/android/.gitignore diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/.gitignore b/frameworks/capacitor/android/app/.gitignore similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/.gitignore rename to frameworks/capacitor/android/app/.gitignore diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/build.gradle b/frameworks/capacitor/android/app/build.gradle similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/build.gradle rename to frameworks/capacitor/android/app/build.gradle diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/capacitor.build.gradle b/frameworks/capacitor/android/app/capacitor.build.gradle similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/capacitor.build.gradle rename to frameworks/capacitor/android/app/capacitor.build.gradle diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/proguard-rules.pro b/frameworks/capacitor/android/app/proguard-rules.pro similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/proguard-rules.pro rename to frameworks/capacitor/android/app/proguard-rules.pro diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java b/frameworks/capacitor/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java rename to frameworks/capacitor/android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/AndroidManifest.xml b/frameworks/capacitor/android/app/src/main/AndroidManifest.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/AndroidManifest.xml rename to frameworks/capacitor/android/app/src/main/AndroidManifest.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/java/com/dynamsoft/dbrjs/MainActivity.java b/frameworks/capacitor/android/app/src/main/java/com/dynamsoft/dbrjs/MainActivity.java similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/java/com/dynamsoft/dbrjs/MainActivity.java rename to frameworks/capacitor/android/app/src/main/java/com/dynamsoft/dbrjs/MainActivity.java diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-hdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-land-hdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-hdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-land-hdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-mdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-land-mdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-mdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-land-mdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-xhdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-land-xhdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-xhdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-land-xhdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-xxhdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-land-xxhdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-xxhdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-land-xxhdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-xxxhdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-land-xxxhdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-land-xxxhdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-land-xxxhdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-hdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-port-hdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-hdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-port-hdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-mdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-port-mdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-mdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-port-mdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-xhdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-port-xhdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-xhdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-port-xhdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-xxhdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-port-xxhdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-xxhdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-port-xxhdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-xxxhdpi/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable-port-xxxhdpi/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-port-xxxhdpi/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable-port-xxxhdpi/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml b/frameworks/capacitor/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml rename to frameworks/capacitor/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable/ic_launcher_background.xml b/frameworks/capacitor/android/app/src/main/res/drawable/ic_launcher_background.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable/ic_launcher_background.xml rename to frameworks/capacitor/android/app/src/main/res/drawable/ic_launcher_background.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable/splash.png b/frameworks/capacitor/android/app/src/main/res/drawable/splash.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/drawable/splash.png rename to frameworks/capacitor/android/app/src/main/res/drawable/splash.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/layout/activity_main.xml b/frameworks/capacitor/android/app/src/main/res/layout/activity_main.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/layout/activity_main.xml rename to frameworks/capacitor/android/app/src/main/res/layout/activity_main.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/frameworks/capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml rename to frameworks/capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/frameworks/capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml rename to frameworks/capacitor/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/frameworks/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png b/frameworks/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png b/frameworks/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/frameworks/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png b/frameworks/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png b/frameworks/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png b/frameworks/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png rename to frameworks/capacitor/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/values/ic_launcher_background.xml b/frameworks/capacitor/android/app/src/main/res/values/ic_launcher_background.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/values/ic_launcher_background.xml rename to frameworks/capacitor/android/app/src/main/res/values/ic_launcher_background.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/values/strings.xml b/frameworks/capacitor/android/app/src/main/res/values/strings.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/values/strings.xml rename to frameworks/capacitor/android/app/src/main/res/values/strings.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/values/styles.xml b/frameworks/capacitor/android/app/src/main/res/values/styles.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/values/styles.xml rename to frameworks/capacitor/android/app/src/main/res/values/styles.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/xml/file_paths.xml b/frameworks/capacitor/android/app/src/main/res/xml/file_paths.xml similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/main/res/xml/file_paths.xml rename to frameworks/capacitor/android/app/src/main/res/xml/file_paths.xml diff --git a/frameworks/capacitor/scan-using-rtu-api/android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java b/frameworks/capacitor/android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java rename to frameworks/capacitor/android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java diff --git a/frameworks/capacitor/scan-using-rtu-api/android/build.gradle b/frameworks/capacitor/android/build.gradle similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/build.gradle rename to frameworks/capacitor/android/build.gradle diff --git a/frameworks/capacitor/scan-using-rtu-api/android/capacitor.settings.gradle b/frameworks/capacitor/android/capacitor.settings.gradle similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/capacitor.settings.gradle rename to frameworks/capacitor/android/capacitor.settings.gradle diff --git a/frameworks/capacitor/scan-using-rtu-api/android/gradle.properties b/frameworks/capacitor/android/gradle.properties similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/gradle.properties rename to frameworks/capacitor/android/gradle.properties diff --git a/frameworks/capacitor/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.jar b/frameworks/capacitor/android/gradle/wrapper/gradle-wrapper.jar similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.jar rename to frameworks/capacitor/android/gradle/wrapper/gradle-wrapper.jar diff --git a/frameworks/capacitor/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.properties b/frameworks/capacitor/android/gradle/wrapper/gradle-wrapper.properties similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.properties rename to frameworks/capacitor/android/gradle/wrapper/gradle-wrapper.properties diff --git a/frameworks/capacitor/scan-using-rtu-api/android/gradlew b/frameworks/capacitor/android/gradlew similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/gradlew rename to frameworks/capacitor/android/gradlew diff --git a/frameworks/capacitor/scan-using-rtu-api/android/gradlew.bat b/frameworks/capacitor/android/gradlew.bat similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/gradlew.bat rename to frameworks/capacitor/android/gradlew.bat diff --git a/frameworks/capacitor/scan-using-rtu-api/android/settings.gradle b/frameworks/capacitor/android/settings.gradle similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/settings.gradle rename to frameworks/capacitor/android/settings.gradle diff --git a/frameworks/capacitor/scan-using-rtu-api/android/variables.gradle b/frameworks/capacitor/android/variables.gradle similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/android/variables.gradle rename to frameworks/capacitor/android/variables.gradle diff --git a/frameworks/capacitor/scan-using-rtu-api/capacitor.config.json b/frameworks/capacitor/capacitor.config.json similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/capacitor.config.json rename to frameworks/capacitor/capacitor.config.json diff --git a/frameworks/capacitor/index.ts b/frameworks/capacitor/index.ts new file mode 100644 index 00000000..a20e7bf0 --- /dev/null +++ b/frameworks/capacitor/index.ts @@ -0,0 +1,30 @@ +import { LicenseManager, CameraView, CameraEnhancer, CaptureVisionRouter, CapturedResultReceiver, MultiFrameResultCrossFilter } from "dynamsoft-barcode-reader-bundle"; + +LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); +(async () => { + const cameraView = await CameraView.createInstance(); + const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + const cvRouter = await CaptureVisionRouter.createInstance(); + + cvRouter.setInput(cameraEnhancer); + + const resultReceiver = new CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = (result) => { + alert(result.barcodeResultItems[0].text); + }; + await cvRouter.addResultReceiver(resultReceiver); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + // Filter out unchecked barcodes. + filter.enableResultCrossVerification("barcode", true); + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication("barcode", true); + await cvRouter.addResultFilter(filter); + + const uiElement = cameraView.getUIElement(); + document.querySelector(".barcode-scanner-view")!.append(uiElement); + + await cameraEnhancer.open(); + await cvRouter.startCapturing("ReadBarcodes_SpeedFirst"); +})(); \ No newline at end of file diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/.gitignore b/frameworks/capacitor/ios/.gitignore similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/.gitignore rename to frameworks/capacitor/ios/.gitignore diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App.xcodeproj/project.pbxproj b/frameworks/capacitor/ios/App/App.xcodeproj/project.pbxproj similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App.xcodeproj/project.pbxproj rename to frameworks/capacitor/ios/App/App.xcodeproj/project.pbxproj diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/frameworks/capacitor/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist rename to frameworks/capacitor/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/AppDelegate.swift b/frameworks/capacitor/ios/App/App/AppDelegate.swift similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/AppDelegate.swift rename to frameworks/capacitor/ios/App/App/AppDelegate.swift diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png b/frameworks/capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png rename to frameworks/capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json b/frameworks/capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json rename to frameworks/capacitor/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Contents.json b/frameworks/capacitor/ios/App/App/Assets.xcassets/Contents.json similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Contents.json rename to frameworks/capacitor/ios/App/App/Assets.xcassets/Contents.json diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json b/frameworks/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json rename to frameworks/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png b/frameworks/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png rename to frameworks/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png b/frameworks/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png rename to frameworks/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png b/frameworks/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png rename to frameworks/capacitor/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Base.lproj/LaunchScreen.storyboard b/frameworks/capacitor/ios/App/App/Base.lproj/LaunchScreen.storyboard similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Base.lproj/LaunchScreen.storyboard rename to frameworks/capacitor/ios/App/App/Base.lproj/LaunchScreen.storyboard diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Base.lproj/Main.storyboard b/frameworks/capacitor/ios/App/App/Base.lproj/Main.storyboard similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Base.lproj/Main.storyboard rename to frameworks/capacitor/ios/App/App/Base.lproj/Main.storyboard diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/App/Info.plist b/frameworks/capacitor/ios/App/App/Info.plist similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/App/Info.plist rename to frameworks/capacitor/ios/App/App/Info.plist diff --git a/frameworks/capacitor/scan-using-rtu-api/ios/App/Podfile b/frameworks/capacitor/ios/App/Podfile similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/ios/App/Podfile rename to frameworks/capacitor/ios/App/Podfile diff --git a/frameworks/capacitor/scan-using-rtu-api/package.json b/frameworks/capacitor/package.json similarity index 91% rename from frameworks/capacitor/scan-using-rtu-api/package.json rename to frameworks/capacitor/package.json index 592e4268..0f5a0e2d 100644 --- a/frameworks/capacitor/scan-using-rtu-api/package.json +++ b/frameworks/capacitor/package.json @@ -16,7 +16,7 @@ "@capacitor/ios": "^7.4.2", "@rollup/plugin-node-resolve": "^15.3.0", "@rollup/plugin-typescript": "^12.1.1", - "dynamsoft-barcode-reader-bundle": "11.2.4000", + "dynamsoft-barcode-reader-bundle": "11.4.2000", "rollup": "^4.24.0", "tslib": "^2.8.0", "typescript": "^5.6.3" diff --git a/frameworks/capacitor/scan-using-rtu-api/public/index.html b/frameworks/capacitor/public/index.html similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/public/index.html rename to frameworks/capacitor/public/index.html diff --git a/frameworks/capacitor/scan-using-rtu-api/rollup.config.mjs b/frameworks/capacitor/rollup.config.mjs similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/rollup.config.mjs rename to frameworks/capacitor/rollup.config.mjs diff --git a/frameworks/capacitor/scan-using-rtu-api/README.md b/frameworks/capacitor/scan-using-rtu-api/README.md deleted file mode 100644 index 7b3a62b7..00000000 --- a/frameworks/capacitor/scan-using-rtu-api/README.md +++ /dev/null @@ -1,43 +0,0 @@ -# 📦 Scan Single Barcode - Capacitor - -This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) in a **Capacitor** app to scan a single barcode using the camera. - -We use typescript and rollup inside capacitor for demonstration. You can use any framework you like, or even vanilla javascript. - -## ✨ Features - -- Easy integration with pre-built UI -- Renders barcodeScanner inside a Capacitor container -- Scans one barcode at a time from video - -## 🚀 Quick Start - -```bash -npm install -npm run build -npx cap sync -``` - -Then build your app in Android Studio and Xcode. - -## 👓 Camera Permission - -Notice we add camera permission in `AndroidManifest.xml` and `Info.plist`. - -[android/app/src/main/AndroidManifest.xml](android/app/src/main/AndroidManifest.xml): -```xml - -``` -[ios/App/App/Info.plist](ios/App/App/Info.plist): -```xml -NSCameraUsageDescription -Decoding barcodes from video needs to access your camera. -``` - -## 📌 Customization - -Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). - -## 📄 Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/capacitor/scan-using-rtu-api/index.ts b/frameworks/capacitor/scan-using-rtu-api/index.ts deleted file mode 100644 index 50ff24a0..00000000 --- a/frameworks/capacitor/scan-using-rtu-api/index.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { BarcodeScanner, BarcodeScannerConfig } from "dynamsoft-barcode-reader-bundle"; - -// Configuration object for initializing the BarcodeScanner instance -const config: BarcodeScannerConfig = { - license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key - - // Specify where to render the scanner UI - // If container is not specified, the UI will take up the full screen - container: document.querySelector(".barcode-scanner-view") as HTMLElement, // 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@11.2.4000/dist/ui/barcode-scanner.ui.xml", - - // showUploadImageButton: true, - // scannerViewConfig: { - // showFlashButton: true, - // cameraSwitchControl: "toggleFrontBack", - // }, - - // Specify custom paths for the engine resources - engineResourcePaths: { - rootDirectory: "https://cdn.jsdelivr.net/npm/", - }, -}; - -// Create a new instance of the Dynamsoft Barcode Scanner -const barcodeScanner = new BarcodeScanner(config); - -(async()=>{ - // Launch the scanner; once a barcode is detected, display its text in an alert - let result = await barcodeScanner.launch(); - if (result.barcodeResults.length) { - alert(result.barcodeResults[0].text); - } -})(); diff --git a/frameworks/capacitor/scan-using-rtu-api/tsconfig.json b/frameworks/capacitor/tsconfig.json similarity index 100% rename from frameworks/capacitor/scan-using-rtu-api/tsconfig.json rename to frameworks/capacitor/tsconfig.json diff --git a/frameworks/electron/README.md b/frameworks/electron/README.md index b07a6f7d..bbaf190e 100644 --- a/frameworks/electron/README.md +++ b/frameworks/electron/README.md @@ -1,23 +1,241 @@ -# Electron samples +# Hello World Sample for Electron -This directory contains Electron examples demonstrating desktop apps using the Dynamsoft Barcode Reader (JavaScript edition). +[Electron](https://www.electronjs.org/) is a framework for creating native applications with web technologies. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into an Electron application. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- scan-using-foundational-api/ — Electron demo using foundational API. -- scan-using-rtu-api/ — Electron demo using RTU API. +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -1. Change to a subexample directory, e.g.: +* Hello World in Electron - Source Code - ```bash - cd scan-using-foundational-api - ``` +## Preparation -2. Follow the subexample README for exact steps (typically: npm install && npm run start or npm run electron). +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `electron 26.4.1` are used in this article. -## Notes +## Quick Start -- 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. \ No newline at end of file +```cmd +npm install +npm start +``` + +A window should open to view the sample application + +## Creating the sample project + +In this section, we will be creating an Electron application utilizing the Dynamsoft Barcode Reader bundle sdk. + +We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. + +By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! + +### Initialize project + +```cmd +mkdir my-app && cd my-app +npm init +``` + +`npm init` will prompt you to configure some fields in your `package.json`. Note that the `entry point` should be `main.js` (it will be created later). + +### Install the necessary libraries + +```cmd +npm install electron --save-dev +npm install dynamsoft-capture-vision-std@1.4.10 -E +npm install dynamsoft-image-processing@2.4.20 -E +npm install dynamsoft-barcode-reader-bundle@11.4.2000 -E +``` + +## Start to implement + +### Create a main.js file + +As defined in the `package.json` file, `main.js` is the entry point of the application. + +Create a `main.js` file at the root folder, and define it like this: + +```javascript +/* /main.js */ +const { app, BrowserWindow } = require("electron"); + +function createWindow() { + const win = new BrowserWindow({ + width: 800, + height: 600, + webPreferences: { + nativeWindowOpen: true, + }, + }); + + win.loadFile("index.html"); +} + +app.whenReady().then(() => { + createWindow(); + + app.on("activate", () => { + if (BrowserWindow.getAllWindows().length === 0) { + createWindow(); + } + }); +}); + +app.on("window-all-closed", () => { + if (process.platform !== "darwin") { + app.quit(); + } +}); +``` + +Two modules are imported in this file: + +* `app`: controls the application's event lifecycle. +* `BrowserWindow`: creates and manages application windows. + +The code basically opens `index.html` in a window. For more information, check out [Electron Quick Start](https://www.electronjs.org/docs/latest/tutorial/quick-start). + +### Create an `index.html` file + +As defined above, `index.html` is the file that will be loaded into the crated window. + +Create an `index.html` file at the root folder, and define it like this: + +```html + + + + + + + + Dynamsoft Barcode Reader Sample - Electron + + + + +

Hello World for Electron

+
+
+ Results: +
+ + + +``` + +### Create an `action.js` file + +`index.html` will load `action.js`, which makes use of libraries to read barcodes from a video input. + +Create the `action.js` file at the root folder, and define it like this: + +```javascript +/* /action.js */ +// Configures the paths where the .wasm files and other necessary resources for modules are located. +Dynamsoft.Core.CoreModule.engineResourcePaths = { + dbrBundle: "./node_modules/dynamsoft-barcode-reader-bundle/dist/", +}; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +Dynamsoft.License.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.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +// Optional. Preload .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. +Dynamsoft.Core.CoreModule.loadWasm(); + +(async () => { + // Defined globally for easy debugging. + let cameraEnhancer, cvRouter; + + try { + // Create a `CameraView` instance for UI control and a `CameraEnhancer` instance for camera control. + const cameraView = await Dynamsoft.DCE.CameraView.createInstance(); + cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); + // Get default UI and append it to DOM. + document.querySelector("#camera-view-container").append(cameraView.getUIElement()); + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + cvRouter.setInput(cameraEnhancer); + + // Define a callback for results. + cvRouter.addResultReceiver({ + onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; + + const resultsContainer = document.querySelector("#results"); + resultsContainer.textContent = ""; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`; + } + }, + }); + + // 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 single barcode. + await cameraEnhancer.open(); + cameraView.setScanLaserVisible(true); + await cvRouter.startCapturing("ReadSingleBarcode"); + } catch (ex) { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } +})(); +``` + +### Create an `style.css` file + +`index.html` will load `style.css`, which defines the styles for the UI. + +Create the `style.css` file at the root folder. Note that this is customizable! + +```css +#results { + width: 100%; + height: 10vh; + overflow: auto; + white-space: pre-wrap; +} +``` + +## Run the application + +Run the application with the following command and see how it goes. + +```cmd +npm start +``` + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/electron/scan-using-foundational-api/action.js b/frameworks/electron/action.js similarity index 95% rename from frameworks/electron/scan-using-foundational-api/action.js rename to frameworks/electron/action.js index 8c70bb15..9b4bb76a 100644 --- a/frameworks/electron/scan-using-foundational-api/action.js +++ b/frameworks/electron/action.js @@ -7,12 +7,12 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = { * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. */ -Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", { executeNow: true }); +Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * 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. + * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. * LICENSE ALERT - THE END */ @@ -38,7 +38,7 @@ Dynamsoft.Core.CoreModule.loadWasm(); cvRouter.setInput(cameraEnhancer); // Define a callback for results. - cvRouter.addResultReceiver({ + await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; diff --git a/frameworks/electron/scan-using-foundational-api/index.html b/frameworks/electron/index.html similarity index 100% rename from frameworks/electron/scan-using-foundational-api/index.html rename to frameworks/electron/index.html diff --git a/frameworks/electron/scan-using-foundational-api/main.js b/frameworks/electron/main.js similarity index 100% rename from frameworks/electron/scan-using-foundational-api/main.js rename to frameworks/electron/main.js diff --git a/frameworks/electron/scan-using-foundational-api/package.json b/frameworks/electron/package.json similarity index 89% rename from frameworks/electron/scan-using-foundational-api/package.json rename to frameworks/electron/package.json index 5f6d1d80..bdd9c1c8 100644 --- a/frameworks/electron/scan-using-foundational-api/package.json +++ b/frameworks/electron/package.json @@ -18,9 +18,9 @@ }, "homepage": "https://github.com/Dynamsoft/barcode-reader-javascript-samples#readme", "devDependencies": { - "electron": "^33.2.0" + "electron": "39.8.5" }, "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.2.4000" + "dynamsoft-barcode-reader-bundle": "11.4.2000" } -} +} \ No newline at end of file diff --git a/frameworks/electron/scan-using-foundational-api/README.md b/frameworks/electron/scan-using-foundational-api/README.md deleted file mode 100644 index a6dd47ed..00000000 --- a/frameworks/electron/scan-using-foundational-api/README.md +++ /dev/null @@ -1,241 +0,0 @@ -# Hello World Sample for Electron - -[Electron](https://www.electronjs.org/) is a framework for creating native applications with web technologies. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into an Electron application. - -In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.2.4000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.2.4000). - -> Note: -> -> If you’re looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! -> -> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. - -## Official Sample - -* Hello World in Electron - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `electron 26.4.1` are used in this article. - -## Quick Start - -```cmd -npm install -npm start -``` - -A window should open to view the sample application - -## Creating the sample project - -In this section, we will be creating an Electron application utilizing the Dynamsoft Barcode Reader bundle sdk. - -We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. - -By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! - -### Initialize project - -```cmd -mkdir my-app && cd my-app -npm init -``` - -`npm init` will prompt you to configure some fields in your `package.json`. Note that the `entry point` should be `main.js` (it will be created later). - -### Install the necessary libraries - -```cmd -npm install electron --save-dev -npm install dynamsoft-capture-vision-std@1.4.10 -E -npm install dynamsoft-image-processing@2.4.20 -E -npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E -``` - -## Start to implement - -### Create a main.js file - -As defined in the `package.json` file, `main.js` is the entry point of the application. - -Create a `main.js` file at the root folder, and define it like this: - -```javascript -/* /main.js */ -const { app, BrowserWindow } = require("electron"); - -function createWindow() { - const win = new BrowserWindow({ - width: 800, - height: 600, - webPreferences: { - nativeWindowOpen: true, - }, - }); - - win.loadFile("index.html"); -} - -app.whenReady().then(() => { - createWindow(); - - app.on("activate", () => { - if (BrowserWindow.getAllWindows().length === 0) { - createWindow(); - } - }); -}); - -app.on("window-all-closed", () => { - if (process.platform !== "darwin") { - app.quit(); - } -}); -``` - -Two modules are imported in this file: - -* `app`: controls the application's event lifecycle. -* `BrowserWindow`: creates and manages application windows. - -The code basically opens `index.html` in a window. For more information, check out [Electron Quick Start](https://www.electronjs.org/docs/latest/tutorial/quick-start). - -### Create an `index.html` file - -As defined above, `index.html` is the file that will be loaded into the crated window. - -Create an `index.html` file at the root folder, and define it like this: - -```html - - - - - - - - Dynamsoft Barcode Reader Sample - Electron - - - - -

Hello World for Electron

-
-
- Results: -
- - - -``` - -### Create an `action.js` file - -`index.html` will load `action.js`, which makes use of libraries to read barcodes from a video input. - -Create the `action.js` file at the root folder, and define it like this: - -```javascript -/* /action.js */ -// Configures the paths where the .wasm files and other necessary resources for modules are located. -Dynamsoft.Core.CoreModule.engineResourcePaths = { - dbrBundle: "./node_modules/dynamsoft-barcode-reader-bundle/dist/", -}; - -/** LICENSE ALERT - README - * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. - */ - -Dynamsoft.License.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 .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. -Dynamsoft.Core.CoreModule.loadWasm(); - -(async () => { - // Defined globally for easy debugging. - let cameraEnhancer, cvRouter; - - try { - // Create a `CameraView` instance for UI control and a `CameraEnhancer` instance for camera control. - const cameraView = await Dynamsoft.DCE.CameraView.createInstance(); - cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); - // Get default UI and append it to DOM. - document.querySelector("#camera-view-container").append(cameraView.getUIElement()); - - // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); - cvRouter.setInput(cameraEnhancer); - - // Define a callback for results. - cvRouter.addResultReceiver({ - onDecodedBarcodesReceived: (result) => { - if (!result.barcodeResultItems.length) return; - - const resultsContainer = document.querySelector("#results"); - resultsContainer.textContent = ""; - console.log(result); - for (let item of result.barcodeResultItems) { - resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`; - } - }, - }); - - // 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 single barcode. - await cameraEnhancer.open(); - cameraView.setScanLaserVisible(true); - await cvRouter.startCapturing("ReadSingleBarcode"); - } catch (ex) { - let errMsg = ex.message || ex; - console.error(ex); - alert(errMsg); - } -})(); -``` - -### Create an `style.css` file - -`index.html` will load `style.css`, which defines the styles for the UI. - -Create the `style.css` file at the root folder. Note that this is customizable! - -```css -#results { - width: 100%; - height: 10vh; - overflow: auto; - white-space: pre-wrap; -} -``` - -## Run the application - -Run the application with the following command and see how it goes. - -```cmd -npm start -``` - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/electron/scan-using-rtu-api/README.md b/frameworks/electron/scan-using-rtu-api/README.md deleted file mode 100644 index 072cdc2f..00000000 --- a/frameworks/electron/scan-using-rtu-api/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# 📦 Scan Single Barcode - Electron - -This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) in a **Electron** app to scan a single barcode using the camera. - -## ✨ Features - -- Easy integration with pre-built UI -- Renders barcodeScanner inside a container -- Scans one barcode at a time from video - -## 🚀 Quick Start - -### 1. Install Dependencies - -```bash -npm install -``` - -### 2. Start the App - -```bash -npm run start -``` - -## 📌 Customization - -Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). - -## 📄 Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/electron/scan-using-rtu-api/action.js b/frameworks/electron/scan-using-rtu-api/action.js deleted file mode 100644 index 3c1d2cd7..00000000 --- a/frameworks/electron/scan-using-rtu-api/action.js +++ /dev/null @@ -1,34 +0,0 @@ -// Configuration object for initializing the BarcodeScanner instance. Refer to https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig -let config = { - license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key - container: document.querySelector(".barcode-scanner-view"), // Specify where to render the scanner UI - - /* - 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: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE, - - // showUploadImageButton: true, - // scannerViewConfig: { - // showFlashButton: true, - // cameraSwitchControl: "toggleFrontBack", - // }, - - // The watermark can be removed via showPoweredByDynamsoft configuration option. - // showPoweredByDynamsoft: false, -}; - -// Create a new instance of the Dynamsoft Barcode Scanner -const barcodeScanner = new Dynamsoft.BarcodeScanner(config); - -// Launch the scanner and handle the scanned result -barcodeScanner.launch().then((result) => { - // Display the first detected barcode's text in an alert - if (result.barcodeResults.length) { - alert(result.barcodeResults[0].text); - } -}).catch((err) => { - alert(err.message || err); -});; diff --git a/frameworks/electron/scan-using-rtu-api/index.html b/frameworks/electron/scan-using-rtu-api/index.html deleted file mode 100644 index d887df60..00000000 --- a/frameworks/electron/scan-using-rtu-api/index.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - - - Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera) - - - - -

- Hello World (Scan One Single Barcode via Camera) -

- -
- - - - - - - - - - - - diff --git a/frameworks/electron/scan-using-rtu-api/main.js b/frameworks/electron/scan-using-rtu-api/main.js deleted file mode 100644 index 452d42f9..00000000 --- a/frameworks/electron/scan-using-rtu-api/main.js +++ /dev/null @@ -1,29 +0,0 @@ -const { app, BrowserWindow } = require("electron"); - -function createWindow() { - const win = new BrowserWindow({ - width: 800, - height: 600, - webPreferences: { - nativeWindowOpen: true, - }, - }); - - win.loadFile("index.html"); -} - -app.whenReady().then(() => { - createWindow(); - - app.on("activate", () => { - if (BrowserWindow.getAllWindows().length === 0) { - createWindow(); - } - }); -}); - -app.on("window-all-closed", () => { - if (process.platform !== "darwin") { - app.quit(); - } -}); diff --git a/frameworks/electron/scan-using-rtu-api/package.json b/frameworks/electron/scan-using-rtu-api/package.json deleted file mode 100644 index 9cbd8e51..00000000 --- a/frameworks/electron/scan-using-rtu-api/package.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "name": "dbrjs-electron-rtu", - "version": "1.2.0", - "description": "How to read barcodes from a video input in an Electron App", - "main": "main.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "start": "electron ." - }, - "repository": { - "type": "git", - "url": "git+https://github.com/Dynamsoft/barcode-reader-javascript-samples.git" - }, - "author": "Dynamsoft", - "license": "ISC", - "bugs": { - "url": "https://github.com/Dynamsoft/barcode-reader-javascript-samples/issues" - }, - "homepage": "https://github.com/Dynamsoft/barcode-reader-javascript-samples#readme", - "devDependencies": { - "electron": "^33.2.0" - }, - "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.2.4000" - } -} diff --git a/frameworks/electron/scan-using-rtu-api/style.css b/frameworks/electron/scan-using-rtu-api/style.css deleted file mode 100644 index 917e0cc1..00000000 --- a/frameworks/electron/scan-using-rtu-api/style.css +++ /dev/null @@ -1,6 +0,0 @@ -#results { - width: 100%; - height: 10vh; - overflow: auto; - white-space: pre-wrap; -} diff --git a/frameworks/electron/scan-using-foundational-api/style.css b/frameworks/electron/style.css similarity index 100% rename from frameworks/electron/scan-using-foundational-api/style.css rename to frameworks/electron/style.css diff --git a/frameworks/es6/README.md b/frameworks/es6/README.md index b6f0e81a..84474249 100644 --- a/frameworks/es6/README.md +++ b/frameworks/es6/README.md @@ -1,18 +1,67 @@ -# ES6 samples +# Hello World Sample for ES6 (Decode via Camera) -This directory contains plain ES6 module examples demonstrating basic usage of the Dynamsoft Barcode Reader in vanilla JavaScript (ES6 modules). +[ES6 modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) allow you to use modern JavaScript features with native import/export syntax. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into an ES6 application using the foundational API to decode barcodes from a live camera stream. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- scan-using-foundational-api/ — Plain ES6 page using foundational API. -- scan-using-rtu-api/ — ES6 page using RTU API. +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -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). +* Hello World in ES6 (Decode via Camera) - Source Code -## Notes +## Usage -- 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. \ No newline at end of file +Open `es6.html` in a web browser (via `http://` or `https://` protocol, not `file://`). + +## Features + +This sample demonstrates: +- Using ES6 module imports to load the Dynamsoft Barcode Reader bundle +- Creating a `CameraEnhancer` instance for camera control +- Creating a `CaptureVisionRouter` instance for barcode scanning +- Implementing result filtering to remove duplicates and unchecked results +- Displaying decoded barcode results in real-time + +## Implementation Highlights + +### ES6 Module Import + +```javascript +import { + CoreModule, + LicenseManager, + CaptureVisionRouter, + CameraView, + CameraEnhancer, + MultiFrameResultCrossFilter, +} from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.mjs"; +``` + +### Camera Setup + +```javascript +const cameraView = await CameraView.createInstance(); +const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); +document.querySelector("#camera-view-container").append(cameraView.getUIElement()); +``` + +### Barcode Scanning + +```javascript +const cvRouter = await CaptureVisionRouter.createInstance(); +cvRouter.setInput(cameraEnhancer); +await cvRouter.startCapturing("ReadSingleBarcode"); +``` + +## 📌 Customization + +For more advanced customization options, please check the official [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html). + +## 📄 Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/es6/scan-using-foundational-api/es6.html b/frameworks/es6/es6.html similarity index 92% rename from frameworks/es6/scan-using-foundational-api/es6.html rename to frameworks/es6/es6.html index b75fa4c9..adfa97b2 100644 --- a/frameworks/es6/scan-using-foundational-api/es6.html +++ b/frameworks/es6/es6.html @@ -6,7 +6,6 @@ - Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera) @@ -23,18 +22,18 @@

Hello World for ES6 (Decode via Camera)

CameraView, CameraEnhancer, MultiFrameResultCrossFilter, - } from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.mjs"; + } from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/dbr.bundle.mjs"; /** 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 }); + LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * 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. + * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. * LICENSE ALERT - THE END */ @@ -53,13 +52,12 @@

Hello World for ES6 (Decode via Camera)

// Hide the "Powered by Message" overlay on the scanner view // cameraView.setPowerByMessageVisible(false); - // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. const cvRouter = await CaptureVisionRouter.createInstance(); cvRouter.setInput(cameraEnhancer); // Define a callback for results. - cvRouter.addResultReceiver({ + await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; diff --git a/frameworks/es6/scan-using-rtu-api/es6.html b/frameworks/es6/scan-using-rtu-api/es6.html deleted file mode 100644 index 07a8dbf8..00000000 --- a/frameworks/es6/scan-using-rtu-api/es6.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - - - - - Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera) - - - - -

- Hello World (Scan One Single Barcode via Camera) -

- -
- - - - - - - - \ No newline at end of file diff --git a/frameworks/native-ts/README.md b/frameworks/native-ts/README.md deleted file mode 100644 index 558d624b..00000000 --- a/frameworks/native-ts/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# Native TypeScript samples - -This directory contains TypeScript-based native examples demonstrating how to use the Dynamsoft Barcode Reader in TypeScript projects. - -**Included examples** - -- scan-using-foundational-api/ — TypeScript example with build config. -- scan-using-rtu-api/ — RTU API example in TypeScript. - -## Quick start - -1. Change to a subexample directory, e.g.: - - ```bash - cd scan-using-foundational-api - ``` - -2. Follow the subexample README for build/run steps (typically: npm install && npm run build / npm run dev). - -## Notes - -- Use the included build tooling (rollup/tsconfig) as described in each subexample. -- See the repository root README.md for general usage and license information. \ No newline at end of file diff --git a/frameworks/native-ts/scan-using-foundational-api/index.ts b/frameworks/native-ts/index.ts similarity index 98% rename from frameworks/native-ts/scan-using-foundational-api/index.ts rename to frameworks/native-ts/index.ts index 217f27d1..eab0f4cb 100644 --- a/frameworks/native-ts/scan-using-foundational-api/index.ts +++ b/frameworks/native-ts/index.ts @@ -38,7 +38,7 @@ let cvRouter: CaptureVisionRouter; cvRouter.setInput(cameraEnhancer); // Define a callback for results. - cvRouter.addResultReceiver({ + await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result: DecodedBarcodesResult) => { if (!result.barcodeResultItems.length) return; diff --git a/frameworks/native-ts/scan-using-foundational-api/package.json b/frameworks/native-ts/package.json similarity index 90% rename from frameworks/native-ts/scan-using-foundational-api/package.json rename to frameworks/native-ts/package.json index 8cf816e8..71c7fba2 100644 --- a/frameworks/native-ts/scan-using-foundational-api/package.json +++ b/frameworks/native-ts/package.json @@ -11,7 +11,7 @@ "license": "ISC", "description": "", "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.2.4000" + "dynamsoft-barcode-reader-bundle": "11.4.2000" }, "devDependencies": { "@rollup/plugin-node-resolve": "^15.3.0", diff --git a/frameworks/native-ts/scan-using-foundational-api/index.html b/frameworks/native-ts/public/index.html similarity index 78% rename from frameworks/native-ts/scan-using-foundational-api/index.html rename to frameworks/native-ts/public/index.html index 6abae2bc..2d1346b9 100644 --- a/frameworks/native-ts/scan-using-foundational-api/index.html +++ b/frameworks/native-ts/public/index.html @@ -6,7 +6,6 @@ - Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera) @@ -15,7 +14,7 @@

Hello World (Decode via Camera)

Results:
- + \ No newline at end of file diff --git a/frameworks/native-ts/scan-using-rtu-api/rollup.config.mjs b/frameworks/native-ts/rollup.config.mjs similarity index 99% rename from frameworks/native-ts/scan-using-rtu-api/rollup.config.mjs rename to frameworks/native-ts/rollup.config.mjs index dab19334..027f6c96 100644 --- a/frameworks/native-ts/scan-using-rtu-api/rollup.config.mjs +++ b/frameworks/native-ts/rollup.config.mjs @@ -25,4 +25,4 @@ export default async() => { ], }, ]; -}; +}; \ No newline at end of file diff --git a/frameworks/native-ts/scan-using-foundational-api/rollup.config.mjs b/frameworks/native-ts/scan-using-foundational-api/rollup.config.mjs deleted file mode 100644 index d78fbc65..00000000 --- a/frameworks/native-ts/scan-using-foundational-api/rollup.config.mjs +++ /dev/null @@ -1,27 +0,0 @@ -import typescript from "@rollup/plugin-typescript"; -import { nodeResolve } from "@rollup/plugin-node-resolve"; - -// https://rollupjs.org/guide/en/#configuration-files -export default () => { - // cvr.js: Only use for - - - \ No newline at end of file diff --git a/frameworks/native-ts/scan-using-rtu-api/tsconfig.json b/frameworks/native-ts/scan-using-rtu-api/tsconfig.json deleted file mode 100644 index 35e8318a..00000000 --- a/frameworks/native-ts/scan-using-rtu-api/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "target": "es2017", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "allowJs": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "ESNext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - } -} diff --git a/frameworks/native-ts/scan-using-foundational-api/tsconfig.json b/frameworks/native-ts/tsconfig.json similarity index 95% rename from frameworks/native-ts/scan-using-foundational-api/tsconfig.json rename to frameworks/native-ts/tsconfig.json index 35e8318a..a27ff72d 100644 --- a/frameworks/native-ts/scan-using-foundational-api/tsconfig.json +++ b/frameworks/native-ts/tsconfig.json @@ -17,5 +17,6 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, + "outDir": "dist" } } diff --git a/frameworks/next/scan-using-foundational-api/.eslintrc.json b/frameworks/next/.eslintrc.json similarity index 100% rename from frameworks/next/scan-using-foundational-api/.eslintrc.json rename to frameworks/next/.eslintrc.json diff --git a/frameworks/next/scan-using-foundational-api/.gitignore b/frameworks/next/.gitignore similarity index 100% rename from frameworks/next/scan-using-foundational-api/.gitignore rename to frameworks/next/.gitignore diff --git a/frameworks/next/README.md b/frameworks/next/README.md index f7d70cf5..15b8aea4 100644 --- a/frameworks/next/README.md +++ b/frameworks/next/README.md @@ -1,24 +1,434 @@ -# Next.js samples +# Hello World Sample for Next.js -This directory contains Next.js examples demonstrating how to integrate the Dynamsoft Barcode Reader into Next.js apps. +[Next.js](https://nextjs.org/) is a react framework that enables functionalities such as server-side rendering and generating static websites for react-based web applications. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Next.js application. Note that in this sample, `TypeScript` is used. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- `scan-using-foundational-api/` — Next.js example using the foundational API. -- `scan-using-rtu-api/` — Next.js example using the RTU API. (**Recommended for most users**) +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -1. Change to the example directory, e.g.: +* Hello World in Next.js - Source Code - ```bash - cd scan-using-foundational-api +## Preparation - ``` +Make sure you have [node](https://nodejs.org/) installed. `node 18.17.1` and `next 14.2.3` are used in the example below. -2. Follow the subexample README for exact steps (typically: npm install && npm run dev). +## Quick Start -## Notes +```cmd +npm install +npm run dev +``` +Then open http://localhost:3000/ to view the sample app. -- Run via the framework dev server to ensure module loading and camera access work correctly. -- See the repository root README.md for general usage and license information. \ No newline at end of file +## Creating the sample project + +In this section, we will be creating a Next.js application utilizing the Dynamsoft Barcode Reader bundle sdk. + +We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. + +By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! + +### Create a [Next.js](https://nextjs.org/) Application bootstrapped with [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with TypeScript. + +```cmd +npx create-next-app@latest +``` + +On installation, you will be prompted to configure your project.\ +You can customize these options according to your preferences.\ +Below is the configuration used for this sample. + +``` +√ What is your project named? ... my-app +√ Would you like to use TypeScript? ... Yes +√ Would you like to use ESLint? ... Yes +√ Would you like to use Tailwind CSS? ... No +√ Would you like to use `src/` directory? ... No +√ Would you like to use App Router? (recommended) ... Yes +√ Would you like to customize the default import alias (@/*)? ... Yes +√ What import alias would you like configured? ... @/* +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +cd my-app +npm install dynamsoft-barcode-reader-bundle@11.4.2000 -E +``` + +## Start to implement + +### Add file "dynamsoft.config.ts" at the root of the app to configure libraries + +```typescript +/* /dynamsoft.config.ts */ +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; + +// 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.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +// Optional. Preload .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. +CoreModule.loadWasm(); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Build directory structure + +* Create a directory `components` on the root directory, and then create another two directories, `VideoCapture` and `ImageCapture` under `/components/`. + +### Create and edit the `VideoCapture` component + +* Create `VideoCapture.tsx` under `/components/VideoCapture/`. The `VideoCapture` component helps decode barcodes via camera. + +* In `VideoCapture.tsx`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```tsx +/* /components/VideoCapture/VideoCapture.tsx */ +import React, { useEffect, useRef, useState } from "react"; +import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. +import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; +import "./VideoCapture.css"; + +const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; + +function VideoCapture() { + const cameraViewContainer = useRef(null); + const [resultsText, setResultText] = useState(""); + + useEffect((): any => { + let resolveInit: () => void; + const pInit: Promise = new Promise((r) => { + resolveInit = r; + }); + let isDestroyed = false; + + let cvRouter: CaptureVisionRouter; + let cameraEnhancer: CameraEnhancer; + + (async () => { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } // Check if component is destroyed after every async + cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + + // Get default UI and append it to DOM. + cameraViewContainer.current!.append(cameraView.getUIElement()); + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + cvRouter = await CaptureVisionRouter.createInstance(); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + cvRouter.setInput(cameraEnhancer); + + // Define a callback for results. + cvRouter.addResultReceiver({ + onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; + + let _resultText = ""; + console.log(result); + for (let item of result.barcodeResultItems) { + _resultText += `${item.formatString}: ${item.text}\n\n`; + } + setResultText(_resultText); + }, + }); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + // Filter out unchecked barcodes. + filter.enableResultCrossVerification("barcode", true); + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication("barcode", true); + await cvRouter.addResultFilter(filter); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + cameraView.setScanLaserVisible(true); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + await cvRouter.startCapturing("ReadSingleBarcode"); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + } catch (ex: any) { + if ((ex as Error)?.message === componentDestroyedErrorMsg) { + console.log(componentDestroyedErrorMsg); + } else { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } + } + })(); + + // Resolve pInit promise once initialization is complete. + resolveInit!(); + + // componentWillUnmount. dispose cvRouter when it's no longer needed + return async () => { + isDestroyed = true; + try { + // Wait for the pInit to complete before disposing resources. + await pInit; + cvRouter?.dispose(); + cameraEnhancer?.dispose(); + } catch (_) {} + }; + }, []); + + return ( +
+
+
+ Results: +
{resultsText}
+
+ ); +} + +export default VideoCapture; +``` + +> Note: +> +> * The component should never update so that events bound to the UI stay valid. In this component, the useEffect() hook is used to handle the component's mount and unmount lifecycle events, and there are no state updates that would cause a re-render. +> * 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 `/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 +/* /components/ImageCapture/ImageCapture.tsx */ +import React, { useRef, useEffect, MutableRefObject, useState } from "react"; +import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import "./ImageCapture.css"; + +function ImageCapture() { + const [resultText, setResultText] = useState(""); + + let pCvRouter: MutableRefObject | null> = useRef(null); + let isDestroyed = useRef(false); + + const captureImage = async (e: React.ChangeEvent) => { + let files = [...(e.target.files as any as File[])]; + e.target.value = ""; // reset input + let _resultText = ""; + + try { + // ensure cvRouter is created only once + const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance()); + if (isDestroyed.current) return; + + for (let file of files) { + // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst"); + console.log(result); + if (isDestroyed.current) return; + + let _resultText = ""; + // Print file name if there's multiple files + if (files.length > 1) { + _resultText += `\n${file.name}:\n`; + } + for (let _item of result.items) { + if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { + continue; // check if captured result item is a barcode + } + let item = _item as BarcodeResultItem; + _resultText += item.text + "\n"; // output the decoded barcode text + } + // If no items are found, display that no barcode was detected + if (!result.items.length) _resultText = "No barcode found"; + setResultText(_resultText); + } + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } + }; + + useEffect((): any => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + isDestroyed.current = false; + + // componentWillUnmount. dispose cvRouter when it's no longer needed + return () => { + isDestroyed.current = true; + if (pCvRouter.current) { + pCvRouter.current.then((cvRouter) => { + cvRouter.dispose(); + }).catch((_) => { }) + } + }; + }, []); + + return ( +
+
+ +
+
{resultText}
+
+ ); +} + +export default ImageCapture; +``` + +### Add the `VideoCapture` and `ImageCapture` component to `page.tsx` + +* On `/app/page.tsx`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. + +* Add following code to `page.tsx`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```tsx +/* /app/page.tsx */ +"use client"; + +import dynamic from "next/dynamic"; +import { useState } from "react"; +import "./page.css"; + +const VideoCapture = dynamic(() => import("../components/VideoCapture/VideoCapture"), { + ssr: false, +}); +const ImageCapture = dynamic(() => import("../components/ImageCapture/ImageCapture"), { + ssr: false, +}); + +enum Modes { + VIDEO_CAPTURE = "video", + IMAGE_CAPTURE = "image", +} + +export default function Home() { + const [mode, setMode] = useState(Modes.VIDEO_CAPTURE); + + const showVideoCapture = () => setMode(Modes.VIDEO_CAPTURE); + const showImageCapture = () => setMode(Modes.IMAGE_CAPTURE); + + return ( +
+
+

Hello World for Next.js

+
+
+ + +
+
{mode === Modes.VIDEO_CAPTURE ? : }
+
+ ); +} +``` +> Note: +> +> With Next.js' dynamic `import()`, we can significantly improve the initial load speed and performance when we dynamically import Dynamsoft's Barcode Scanning component on-demand. +> +> Additionally, we need to set `{ ssr: false }` since the component is client-side only and could not be rendered server-side. +> +> Read more: [https://nextjs.org/learn-pages-router/seo/improve/dynamic-import-components](https://nextjs.org/learn-pages-router/seo/improve/dynamic-import-components) + +* Try running the project. + +```cmd +npm run dev +``` + +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show 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. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. + +## Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/next/scan-using-foundational-api/app/favicon.ico b/frameworks/next/app/favicon.ico similarity index 100% rename from frameworks/next/scan-using-foundational-api/app/favicon.ico rename to frameworks/next/app/favicon.ico diff --git a/frameworks/next/scan-using-foundational-api/app/globals.css b/frameworks/next/app/globals.css similarity index 100% rename from frameworks/next/scan-using-foundational-api/app/globals.css rename to frameworks/next/app/globals.css diff --git a/frameworks/next/scan-using-foundational-api/app/layout.tsx b/frameworks/next/app/layout.tsx similarity index 100% rename from frameworks/next/scan-using-foundational-api/app/layout.tsx rename to frameworks/next/app/layout.tsx diff --git a/frameworks/next/scan-using-foundational-api/app/page.css b/frameworks/next/app/page.css similarity index 100% rename from frameworks/next/scan-using-foundational-api/app/page.css rename to frameworks/next/app/page.css diff --git a/frameworks/next/scan-using-foundational-api/app/page.tsx b/frameworks/next/app/page.tsx similarity index 100% rename from frameworks/next/scan-using-foundational-api/app/page.tsx rename to frameworks/next/app/page.tsx diff --git a/frameworks/next/scan-using-foundational-api/components/ImageCapture/ImageCapture.css b/frameworks/next/components/ImageCapture/ImageCapture.css similarity index 100% rename from frameworks/next/scan-using-foundational-api/components/ImageCapture/ImageCapture.css rename to frameworks/next/components/ImageCapture/ImageCapture.css diff --git a/frameworks/next/scan-using-foundational-api/components/ImageCapture/ImageCapture.tsx b/frameworks/next/components/ImageCapture/ImageCapture.tsx similarity index 100% rename from frameworks/next/scan-using-foundational-api/components/ImageCapture/ImageCapture.tsx rename to frameworks/next/components/ImageCapture/ImageCapture.tsx diff --git a/frameworks/next/scan-using-foundational-api/components/VideoCapture/VideoCapture.css b/frameworks/next/components/VideoCapture/VideoCapture.css similarity index 100% rename from frameworks/next/scan-using-foundational-api/components/VideoCapture/VideoCapture.css rename to frameworks/next/components/VideoCapture/VideoCapture.css diff --git a/frameworks/next/scan-using-foundational-api/components/VideoCapture/VideoCapture.tsx b/frameworks/next/components/VideoCapture/VideoCapture.tsx similarity index 98% rename from frameworks/next/scan-using-foundational-api/components/VideoCapture/VideoCapture.tsx rename to frameworks/next/components/VideoCapture/VideoCapture.tsx index f0443a20..065cc4e9 100644 --- a/frameworks/next/scan-using-foundational-api/components/VideoCapture/VideoCapture.tsx +++ b/frameworks/next/components/VideoCapture/VideoCapture.tsx @@ -45,7 +45,7 @@ function VideoCapture() { cvRouter.setInput(cameraEnhancer); // Define a callback for results. - cvRouter.addResultReceiver({ + await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; diff --git a/frameworks/react/scan-using-foundational-api/src/dynamsoft.config.ts b/frameworks/next/dynamsoft.config.ts similarity index 92% rename from frameworks/react/scan-using-foundational-api/src/dynamsoft.config.ts rename to frameworks/next/dynamsoft.config.ts index b25d65cb..0061db7a 100644 --- a/frameworks/react/scan-using-foundational-api/src/dynamsoft.config.ts +++ b/frameworks/next/dynamsoft.config.ts @@ -7,12 +7,12 @@ 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"); /** * 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. + * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. * LICENSE ALERT - THE END */ diff --git a/frameworks/next/scan-using-foundational-api/next.config.mjs b/frameworks/next/next.config.mjs similarity index 100% rename from frameworks/next/scan-using-foundational-api/next.config.mjs rename to frameworks/next/next.config.mjs diff --git a/frameworks/next/scan-using-foundational-api/package.json b/frameworks/next/package.json similarity index 85% rename from frameworks/next/scan-using-foundational-api/package.json rename to frameworks/next/package.json index 1c0daba4..c79cf265 100644 --- a/frameworks/next/scan-using-foundational-api/package.json +++ b/frameworks/next/package.json @@ -11,8 +11,8 @@ "dependencies": { "react": "^18", "react-dom": "^18", - "next": "14.2.35", - "dynamsoft-barcode-reader-bundle": "11.2.4000" + "next": "16.1.7", + "dynamsoft-barcode-reader-bundle": "11.4.2000" }, "devDependencies": { "typescript": "^5", @@ -22,4 +22,4 @@ "eslint": "^8", "eslint-config-next": "14.2.3" } -} +} \ No newline at end of file diff --git a/frameworks/next/scan-using-foundational-api/public/next.svg b/frameworks/next/public/next.svg similarity index 100% rename from frameworks/next/scan-using-foundational-api/public/next.svg rename to frameworks/next/public/next.svg diff --git a/frameworks/next/scan-using-foundational-api/public/vercel.svg b/frameworks/next/public/vercel.svg similarity index 100% rename from frameworks/next/scan-using-foundational-api/public/vercel.svg rename to frameworks/next/public/vercel.svg diff --git a/frameworks/next/scan-using-foundational-api/README.md b/frameworks/next/scan-using-foundational-api/README.md deleted file mode 100644 index 3e9cad23..00000000 --- a/frameworks/next/scan-using-foundational-api/README.md +++ /dev/null @@ -1,434 +0,0 @@ -# Hello World Sample for Next.js - -[Next.js](https://nextjs.org/) is a react framework that enables functionalities such as server-side rendering and generating static websites for react-based web applications. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Next.js application. Note that in this sample, `TypeScript` is used. - -In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.2.4000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.2.4000). - -> Note: -> -> If you’re looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! -> -> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. - -## Official Sample - -* Hello World in Next.js - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 18.17.1` and `next 14.2.3` are used in the example below. - -## Quick Start - -```cmd -npm install -npm run dev -``` -Then open http://localhost:3000/ to view the sample app. - -## Creating the sample project - -In this section, we will be creating a Next.js application utilizing the Dynamsoft Barcode Reader bundle sdk. - -We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. - -By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! - -### Create a [Next.js](https://nextjs.org/) Application bootstrapped with [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with TypeScript. - -```cmd -npx create-next-app@latest -``` - -On installation, you will be prompted to configure your project.\ -You can customize these options according to your preferences.\ -Below is the configuration used for this sample. - -``` -√ What is your project named? ... my-app -√ Would you like to use TypeScript? ... Yes -√ Would you like to use ESLint? ... Yes -√ Would you like to use Tailwind CSS? ... No -√ Would you like to use `src/` directory? ... No -√ Would you like to use App Router? (recommended) ... Yes -√ Would you like to customize the default import alias (@/*)? ... Yes -√ What import alias would you like configured? ... @/* -``` - -### **CD** to the root directory of the application and install necessary libraries - -```cmd -cd my-app -npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E -``` - -## Start to implement - -### Add file "dynamsoft.config.ts" at the root of the app to configure libraries - -```typescript -/* /dynamsoft.config.ts */ -import { CoreModule } from "dynamsoft-core"; -import { LicenseManager } from "dynamsoft-license"; -import "dynamsoft-barcode-reader"; - -// 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 .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. -CoreModule.loadWasm(); -``` - -> Note: -> -> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. - -### Build directory structure - -* Create a directory `components` on the root directory, and then create another two directories, `VideoCapture` and `ImageCapture` under `/components/`. - -### Create and edit the `VideoCapture` component - -* Create `VideoCapture.tsx` under `/components/VideoCapture/`. The `VideoCapture` component helps decode barcodes via camera. - -* In `VideoCapture.tsx`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```tsx -/* /components/VideoCapture/VideoCapture.tsx */ -import React, { useEffect, useRef, useState } from "react"; -import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. -import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer"; -import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; -import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; -import "./VideoCapture.css"; - -const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; - -function VideoCapture() { - const cameraViewContainer = useRef(null); - const [resultsText, setResultText] = useState(""); - - useEffect((): any => { - let resolveInit: () => void; - const pInit: Promise = new Promise((r) => { - resolveInit = r; - }); - let isDestroyed = false; - - let cvRouter: CaptureVisionRouter; - let cameraEnhancer: CameraEnhancer; - - (async () => { - try { - // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. - const cameraView = await CameraView.createInstance(); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } // Check if component is destroyed after every async - cameraEnhancer = await CameraEnhancer.createInstance(cameraView); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - - // Get default UI and append it to DOM. - cameraViewContainer.current!.append(cameraView.getUIElement()); - - // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - cvRouter = await CaptureVisionRouter.createInstance(); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - cvRouter.setInput(cameraEnhancer); - - // Define a callback for results. - cvRouter.addResultReceiver({ - onDecodedBarcodesReceived: (result) => { - if (!result.barcodeResultItems.length) return; - - let _resultText = ""; - console.log(result); - for (let item of result.barcodeResultItems) { - _resultText += `${item.formatString}: ${item.text}\n\n`; - } - setResultText(_resultText); - }, - }); - - // Filter out unchecked and duplicate results. - const filter = new MultiFrameResultCrossFilter(); - // Filter out unchecked barcodes. - filter.enableResultCrossVerification("barcode", true); - // Filter out duplicate barcodes within 3 seconds. - filter.enableResultDeduplication("barcode", true); - await cvRouter.addResultFilter(filter); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - - // Open camera and start scanning single barcode. - await cameraEnhancer.open(); - cameraView.setScanLaserVisible(true); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - await cvRouter.startCapturing("ReadSingleBarcode"); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - } catch (ex: any) { - if ((ex as Error)?.message === componentDestroyedErrorMsg) { - console.log(componentDestroyedErrorMsg); - } else { - let errMsg = ex.message || ex; - console.error(ex); - alert(errMsg); - } - } - })(); - - // Resolve pInit promise once initialization is complete. - resolveInit!(); - - // componentWillUnmount. dispose cvRouter when it's no longer needed - return async () => { - isDestroyed = true; - try { - // Wait for the pInit to complete before disposing resources. - await pInit; - cvRouter?.dispose(); - cameraEnhancer?.dispose(); - } catch (_) {} - }; - }, []); - - return ( -
-
-
- Results: -
{resultsText}
-
- ); -} - -export default VideoCapture; -``` - -> Note: -> -> * The component should never update so that events bound to the UI stay valid. In this component, the useEffect() hook is used to handle the component’s mount and unmount lifecycle events, and there are no state updates that would cause a re-render. -> * 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 `/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 -/* /components/ImageCapture/ImageCapture.tsx */ -import React, { useRef, useEffect, MutableRefObject, useState } from "react"; -import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. -import { EnumCapturedResultItemType } from "dynamsoft-core"; -import { BarcodeResultItem } from "dynamsoft-barcode-reader"; -import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; -import "./ImageCapture.css"; - -function ImageCapture() { - const [resultText, setResultText] = useState(""); - - let pCvRouter: MutableRefObject | null> = useRef(null); - let isDestroyed = useRef(false); - - const captureImage = async (e: React.ChangeEvent) => { - let files = [...(e.target.files as any as File[])]; - e.target.value = ""; // reset input - let _resultText = ""; - - try { - // ensure cvRouter is created only once - const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance()); - if (isDestroyed.current) return; - - for (let file of files) { - // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. - const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst"); - console.log(result); - if (isDestroyed.current) return; - - let _resultText = ""; - // Print file name if there's multiple files - if (files.length > 1) { - _resultText += `\n${file.name}:\n`; - } - for (let _item of result.items) { - if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { - continue; // check if captured result item is a barcode - } - let item = _item as BarcodeResultItem; - _resultText += item.text + "\n"; // output the decoded barcode text - } - // If no items are found, display that no barcode was detected - if (!result.items.length) _resultText = "No barcode found"; - setResultText(_resultText); - } - } catch (ex: any) { - let errMsg = ex.message || ex; - console.error(ex); - alert(errMsg); - } - }; - - useEffect((): any => { - // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. - isDestroyed.current = false; - - // componentWillUnmount. dispose cvRouter when it's no longer needed - return () => { - isDestroyed.current = true; - if (pCvRouter.current) { - pCvRouter.current.then((cvRouter) => { - cvRouter.dispose(); - }).catch((_) => { }) - } - }; - }, []); - - return ( -
-
- -
-
{resultText}
-
- ); -} - -export default ImageCapture; -``` - -### Add the `VideoCapture` and `ImageCapture` component to `page.tsx` - -* On `/app/page.tsx`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. - -* Add following code to `page.tsx`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```tsx -/* /app/page.tsx */ -"use client"; - -import dynamic from "next/dynamic"; -import { useState } from "react"; -import "./page.css"; - -const VideoCapture = dynamic(() => import("../components/VideoCapture/VideoCapture"), { - ssr: false, -}); -const ImageCapture = dynamic(() => import("../components/ImageCapture/ImageCapture"), { - ssr: false, -}); - -enum Modes { - VIDEO_CAPTURE = "video", - IMAGE_CAPTURE = "image", -} - -export default function Home() { - const [mode, setMode] = useState(Modes.VIDEO_CAPTURE); - - const showVideoCapture = () => setMode(Modes.VIDEO_CAPTURE); - const showImageCapture = () => setMode(Modes.IMAGE_CAPTURE); - - return ( -
-
-

Hello World for Next.js

-
-
- - -
-
{mode === Modes.VIDEO_CAPTURE ? : }
-
- ); -} -``` -> Note: -> -> With Next.js' dynamic `import()`, we can significantly improve the initial load speed and performance when we dynamically import Dynamsoft's Barcode Scanning component on-demand. -> -> Additionally, we need to set `{ ssr: false }` since the component is client-side only and could not be rendered server-side. -> -> Read more: [https://nextjs.org/learn-pages-router/seo/improve/dynamic-import-components](https://nextjs.org/learn-pages-router/seo/improve/dynamic-import-components) - -* Try running the project. - -```cmd -npm run dev -``` - -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show 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. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. - -## Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/next/scan-using-foundational-api/tsconfig.json b/frameworks/next/tsconfig.json similarity index 53% rename from frameworks/next/scan-using-foundational-api/tsconfig.json rename to frameworks/next/tsconfig.json index e7ff90fd..9e9bbf7b 100644 --- a/frameworks/next/scan-using-foundational-api/tsconfig.json +++ b/frameworks/next/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -10,7 +14,7 @@ "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve", + "jsx": "react-jsx", "incremental": true, "plugins": [ { @@ -18,9 +22,20 @@ } ], "paths": { - "@/*": ["./*"] - } + "@/*": [ + "./*" + ] + }, + "target": "ES2017" }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + ".next/dev/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] } diff --git a/frameworks/nuxt/scan-using-foundational-api/.gitignore b/frameworks/nuxt/.gitignore similarity index 100% rename from frameworks/nuxt/scan-using-foundational-api/.gitignore rename to frameworks/nuxt/.gitignore diff --git a/frameworks/nuxt/README.md b/frameworks/nuxt/README.md index 86c6af3d..bd71ee2b 100644 --- a/frameworks/nuxt/README.md +++ b/frameworks/nuxt/README.md @@ -1,23 +1,383 @@ -# Nuxt samples +# Hello World Sample for NuxtJS -This directory contains Nuxt examples demonstrating use of the Dynamsoft Barcode Reader in Nuxt projects. +[Nuxt](https://nuxtjs.org/) is a higher-level framework that builds on top of [Vue](https://vuejs.org/). Check out the following guide on how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Nuxt application. Note that in this sample `TypeScript` is used. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- `scan-using-foundational-api/` — Nuxt example using the foundational API. -- `scan-using-rtu-api/` — Nuxt example using the RTU API. (**Recommended for most users**) +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -1. Change to the example directory, e.g.: +* Hello World in Nuxt - Source Code - ```bash - cd scan-using-foundational-api - ``` +## Preparation -2. Follow the subexample README for exact steps (typically: npm install && npm run dev). +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `nuxt 3.2.3` are used in this article. -## Notes +## Quick Start -- Use the Nuxt dev server for best results; opening static files directly is not recommended. -- See the repository root README.md for general usage and license information. \ No newline at end of file +```cmd +npm install +npm run dev +``` + +Then open `https://localhost:3000/` to view the sample app. + +## Creating the sample project + +In this section, we will be creating a NuxtJS application utilizing the Dynamsoft Barcode Reader bundle sdk. + +We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. + +By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! + +### Create a Bootstrapped Nuxt Application + +```cmd +npx nuxi@latest init my-app +``` + +You will be asked to configure quite a few things for the application during the creation. In our example, we chose the default one in every step. + +### **CD** to the root directory of the application and install the dependencies + +```cmd +cd my-app +npm install dynamsoft-barcode-reader-bundle@11.4.2000 -E +``` + +## Start to implement + +### Add file "dynamsoft.config.ts" at the root of the app to configure libraries + +```typescript +/* /dynamsoft.config.ts */ +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; + +// 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.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +// Optional. Preload .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. +CoreModule.loadWasm(); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Create a directory "components" and create the following files inside it to represent two components + +* `VideoCapture.client.vue` +* `ImageCapture.client.vue` + +`.client` suffix means the component is rendered only client-side. + +### Edit the `VideoCapture` component + +* In `VideoCapture.client.vue`, add code for initializing and destroying some instances. The `VideoCapture` component helps decode barcodes via camera. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```vue + + + + + + +``` +> Note: +> +> 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) + +### Edit the `ImageCapture` component + +* In `ImageCapture.client.vue`, add code for initializing and destroying the `CaptureVisionRouter` instance. The `ImageCapture` helps decode barcodes in an image. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```vue + + + + + + +``` + +### Add `VideoCapture` and `ImageCapture` components in `app.vue` + +* On `/app.vue`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. + +* Add following code to `app.vue`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```vue + + + + +``` +> Note: +> +> Since `VideoCapture` and `ImageCapture` components are only rendered on the client side, we want to make sure that these components are not causing sie effects during the server rendering phase. We can solve this using the `client-only` component. + +* Try running the project. + +```cmd +npm run dev +``` + +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-foundational-api/app.vue b/frameworks/nuxt/app.vue similarity index 80% rename from frameworks/nuxt/scan-using-foundational-api/app.vue rename to frameworks/nuxt/app.vue index 5430ef36..6c98850c 100644 --- a/frameworks/nuxt/scan-using-foundational-api/app.vue +++ b/frameworks/nuxt/app.vue @@ -5,10 +5,8 @@
- - + +
@@ -18,8 +16,6 @@ diff --git a/frameworks/nuxt/scan-using-foundational-api/components/VideoCapture.client.vue b/frameworks/nuxt/components/VideoCapture.client.vue similarity index 96% rename from frameworks/nuxt/scan-using-foundational-api/components/VideoCapture.client.vue rename to frameworks/nuxt/components/VideoCapture.client.vue index e86a3223..9242fa10 100644 --- a/frameworks/nuxt/scan-using-foundational-api/components/VideoCapture.client.vue +++ b/frameworks/nuxt/components/VideoCapture.client.vue @@ -37,7 +37,7 @@ onMounted(async () => { cvRouter.setInput(cameraEnhancer); // Define a callback for results. - cvRouter.addResultReceiver({ + await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; @@ -95,7 +95,7 @@ onBeforeUnmount(async () => {

- Results: +
Results:
{{ resultText }}
@@ -106,5 +106,6 @@ onBeforeUnmount(async () => { height: 10vh; overflow: auto; white-space: pre-wrap; + text-align: center; } diff --git a/frameworks/next/scan-using-foundational-api/dynamsoft.config.ts b/frameworks/nuxt/dynamsoft.config.ts similarity index 94% rename from frameworks/next/scan-using-foundational-api/dynamsoft.config.ts rename to frameworks/nuxt/dynamsoft.config.ts index b25d65cb..e54a421d 100644 --- a/frameworks/next/scan-using-foundational-api/dynamsoft.config.ts +++ b/frameworks/nuxt/dynamsoft.config.ts @@ -12,7 +12,7 @@ LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", { execute /** * 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. + * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. * LICENSE ALERT - THE END */ diff --git a/frameworks/nuxt/scan-using-foundational-api/nuxt.config.ts b/frameworks/nuxt/nuxt.config.ts similarity index 82% rename from frameworks/nuxt/scan-using-foundational-api/nuxt.config.ts rename to frameworks/nuxt/nuxt.config.ts index 8d361178..4bbb3a1b 100644 --- a/frameworks/nuxt/scan-using-foundational-api/nuxt.config.ts +++ b/frameworks/nuxt/nuxt.config.ts @@ -1,4 +1,4 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ - + telemetry: false }) diff --git a/frameworks/nuxt/scan-using-foundational-api/package.json b/frameworks/nuxt/package.json similarity index 85% rename from frameworks/nuxt/scan-using-foundational-api/package.json rename to frameworks/nuxt/package.json index 000d468c..b12a47ce 100644 --- a/frameworks/nuxt/scan-using-foundational-api/package.json +++ b/frameworks/nuxt/package.json @@ -13,6 +13,6 @@ "nuxt": "3.2.3" }, "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.2.4000" + "dynamsoft-barcode-reader-bundle": "11.4.2000" } } \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-foundational-api/public/favicon.ico b/frameworks/nuxt/public/favicon.ico similarity index 100% rename from frameworks/nuxt/scan-using-foundational-api/public/favicon.ico rename to frameworks/nuxt/public/favicon.ico diff --git a/frameworks/nuxt/scan-using-foundational-api/README.md b/frameworks/nuxt/scan-using-foundational-api/README.md deleted file mode 100644 index 003c4582..00000000 --- a/frameworks/nuxt/scan-using-foundational-api/README.md +++ /dev/null @@ -1,383 +0,0 @@ -# Hello World Sample for NuxtJS - -[Nuxt](https://nuxtjs.org/) is a higher-level framework that builds on top of [Vue](https://vuejs.org/). Check out the following guide on how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Nuxt application. Note that in this sample `TypeScript` is used. - -In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.2.4000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.2.4000). - -> Note: -> -> If you’re looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! -> -> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. - -## Official Sample - -* Hello World in Nuxt - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `nuxt 3.2.3` are used in this article. - -## Quick Start - -```cmd -npm install -npm run dev -``` - -Then open `https://localhost:3000/` to view the sample app. - -## Creating the sample project - -In this section, we will be creating a NuxtJS application utilizing the Dynamsoft Barcode Reader bundle sdk. - -We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. - -By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! - -### Create a Bootstrapped Nuxt Application - -```cmd -npx nuxi@latest init my-app -``` - -You will be asked to configure quite a few things for the application during the creation. In our example, we chose the default one in every step. - -### **CD** to the root directory of the application and install the dependencies - -```cmd -cd my-app -npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E -``` - -## Start to implement - -### Add file "dynamsoft.config.ts" at the root of the app to configure libraries - -```typescript -/* /dynamsoft.config.ts */ -import { CoreModule } from "dynamsoft-core"; -import { LicenseManager } from "dynamsoft-license"; -import "dynamsoft-barcode-reader"; - -// 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 .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. -CoreModule.loadWasm(); -``` - -> Note: -> -> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. - -### Create a directory "components" and create the following files inside it to represent two components - -* `VideoCapture.client.vue` -* `ImageCapture.client.vue` - -`.client` suffix means the component is rendered only client-side. - -### Edit the `VideoCapture` component - -* In `VideoCapture.client.vue`, add code for initializing and destroying some instances. The `VideoCapture` component helps decode barcodes via camera. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```vue - - - - - - -``` -> Note: -> -> 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) - -### Edit the `ImageCapture` component - -* In `ImageCapture.client.vue`, add code for initializing and destroying the `CaptureVisionRouter` instance. The `ImageCapture` helps decode barcodes in an image. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```vue - - - - - - -``` - -### Add `VideoCapture` and `ImageCapture` components in `app.vue` - -* On `/app.vue`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. - -* Add following code to `app.vue`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```vue - - - - -``` -> Note: -> -> Since `VideoCapture` and `ImageCapture` components are only rendered on the client side, we want to make sure that these components are not causing sie effects during the server rendering phase. We can solve this using the `client-only` component. - -* Try running the project. - -```cmd -npm run dev -``` - -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-foundational-api/assets/main.css b/frameworks/nuxt/scan-using-foundational-api/assets/main.css deleted file mode 100644 index b458c93e..00000000 --- a/frameworks/nuxt/scan-using-foundational-api/assets/main.css +++ /dev/null @@ -1,7 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - text-align: center; - } - \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-foundational-api/tsconfig.json b/frameworks/nuxt/tsconfig.json similarity index 100% rename from frameworks/nuxt/scan-using-foundational-api/tsconfig.json rename to frameworks/nuxt/tsconfig.json diff --git a/frameworks/pwa/README.md b/frameworks/pwa/README.md index 46ff2b72..dbc6d279 100644 --- a/frameworks/pwa/README.md +++ b/frameworks/pwa/README.md @@ -1,23 +1,307 @@ -# PWA samples +# Hello World Sample for PWA -This directory contains Progressive Web App examples demonstrating how to use Dynamsoft Barcode Reader in PWA contexts. +[PWA](https://web.dev/progressive-web-apps/) is short for Progressive Web Apps, which are web applications designed to mimic the functionality and user experience of platform-specific (native) applications. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a PWA application. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- scan-using-foundational-api/ (helloworld-pwa.html) — PWA sample pages and service worker. -- scan-using-rtu-api/ — RTU API PWA example. +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -1. Change to the example directory, e.g.: +* Hello World in PWA - Source Code - ```bash - cd scan-using-foundational-api - ``` +## Preparation -2. Serve the files over HTTPS or a local dev server and open the provided HTML (service worker requires secure context). +We will try to turn our basic "Hello World" sample into a PWA. Follow these steps: -## Notes +* Create new file named `helloworld-pwa.html` and add the following code: -- PWAs require HTTPS (or localhost) for service worker and camera features. -- See the repository root README.md for general usage and license information. \ No newline at end of file +```html + + + + + + + Dynamsoft Barcode Reader PWA Sample - Hello World + + + +

Hello World for PWA

+
+
+ Results: +
+ + + + + +``` + +* Next, set up a secure environment (HTTPS) to run the page `helloworld-pwa.html`. This is required as PWAs only run in secure environments. +> Note: +> +> In this sample, we're using IIS to set up a secure site at https://localhost. The page will be located at the root of the site so that it can be accessed at https://localhost/helloworld-pwa.html. + +## Make the app progressive + +### Register a service worker for offline support + +Service Workers form the foundation of PWAs, acting as the virtual proxy between the browser and the network. They enable offline content delivery, manage notifications, and perform heavy calculations on a separate thread + +* To use a service worker, we first need to register it. In the `helloworld-pwa.html` file, add the following code at the end of the script: + +```javascript +/* /helloworld-pwa.html */ +if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('./service-worker.js'); +}; +``` + +* Next, create the `service-worker.js` file with the following content: + +```javascript +/* /service-worker.js */ +// Files to cache +const cacheName = 'helloworld-pwa'; +const appShellFiles = [ + './helloworld-pwa.html', +]; + +// Installing Service Worker +self.addEventListener("install", (e) => { + console.log("[Service Worker] Install"); + e.waitUntil( + (async () => { + const cache = await caches.open(cacheName); + console.log("[Service Worker] Caching all: app shell and content"); + await cache.addAll(appShellFiles); + })() + ); +}); + +self.addEventListener("fetch", (e) => { + e.respondWith( + (async () => { + // Fetch cached response if exists + const cachedResponse = await caches.match(e.request); + console.log(`[Service Worker] Fetching resource: ${e.request.url}`); + if (cachedResponse) { + return cachedResponse; + } + + // Otherwise, fetch from network + const response = await fetch(e.request); + const cache = await caches.open(cacheName); + console.log(`[Service Worker] Caching new resource: ${e.request.url}`); + if (e.request.method !== "POST") { + cache.put(e.request, response.clone()); + } + return response; + })() + ); +}); +``` + +With the above code, the application can now work offline because the service worker will cache the `helloworld-pwa.html` page and its related resources. + +For more information, refer to [Making PWAs work offline with Service workers](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers). + +> Note: +> +> Since the files are cached, changes we make in later steps may not be reflected immediately. To ensure updates are applied, clear the cache after changes are made. You can do this by running the following code in the browser console: +> +> ```javascript +> const cacheName = 'helloworld-pwa'; +> const cache = await caches.delete(cacheName); +> ``` + +### Use a web manifest file to make the application installable + +A web manifest file contains a list of information about a website in JSON format. This information is used to enable the web app to be installed on a device. + +* Create a file named `helloworld-pwa.json` with the following content: + +```json +/* /helloworld-pwa.json */ +{ + "name": "Dynamsoft Barcode Reader Progressive Web App", + "short_name": "DBR-PWA", + "description": "Progressive Web App that reads barcodes from a video input with Dynamsoft Barcode Reader.", + "start_url": "./helloworld-pwa.html", + "scope": ".", + "display": "standalone", + "theme_color": "#B12A34", + "background_color": "#B12A34", + "icons": [ + { + "src": "./dynamsoft-512x512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "src": "./dynamsoft-192x192.png", + "sizes": "192x192", + "type": "image/png" + } + ] +} +``` + +> Note: The icon files can be found in the github repository. + +* Then we include the file in the `` block of the `helloworld-pwa.html` file as such: + +```html + + +``` + +* For compatibility on safari, we need add some `meta` in ``. + +```html + + + + + + + + + +``` + +Now, if you open the application again in your browser, you will notice an install icon appear on the right side of the address bar. When you click on it, a pop-up will appear asking if you want to install the app. + +Once installed, you can use it just like any native app. + +To enable offline functionality for Dynamsoft Barcode Reader, you'll need to cache more files. + +### Enabling offline functionality for Dynamsoft Barcode Reader + +These directories below are the resources required for Dynamsoft Barcode Reader functionality. Once added, these files are cached on installation of the service worker (i.e. `install` event), wensuring the PWA remains fully functional without any internet. + +Add this code below to the `service-worker.js` +```javascript +/* /service-worker.js */ +const engineResourcePaths = { + dbrBundle: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/", +}; + +// Files to cache +const cacheName = "helloworld-pwa"; +const appShellFiles = [ + "./helloworld-pwa.html", + "./dynamsoft-192x192.png", + "./dynamsoft-512x512.png", + "./helloworld-pwa.json", + `${engineResourcePaths.dbrBundle}dbr.bundle.worker.js`, + `${engineResourcePaths.dbrBundle}dynamsoft-capture-vision-bundle.js` + `${engineResourcePaths.dbrBundle}dynamsoft-capture-vision-bundle.wasm`, + `${engineResourcePaths.dbrBundle}models/OneDDeblur.data`, + `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR_Map.txt`, + `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID_WITH_MAG_STRIPE.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_Map.txt`, + `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI_Map.txt`, + `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI.txt`, + `${engineResourcePaths.dbrBundle}parser-resources/MRTD_Map.txt`, + `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD1_ID.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_FRENCH_ID.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_ID.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_VISA.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD3_PASSPORT.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD3_VISA.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL_Map.txt`, + `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL.dcpres`, + `${engineResourcePaths.dbrBundle}parser-resources/VIN_Map.txt`, + `${engineResourcePaths.dbrBundle}parser-resources/VIN.dcpres`, + `${engineResourcePaths.dbrBundle}templates/DBR-PresetTemplates.json`, + `${engineResourcePaths.dbrBundle}ui/barcode-scanner.ui.xml`, + `${engineResourcePaths.dbrBundle}ui/dce.ui.xml`, + `${engineResourcePaths.dbrBundle}ui/dls.license.dialog.html`, +]; +``` + +## Summary + +In this article we took a look at how you can turn a simple barcode reading page into a PWA that is installable, re-engageable and capable of working offline. To learn more about Progressive web apps, you can click [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps). + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/frameworks/pwa/scan-using-foundational-api/dynamsoft-192x192.png b/frameworks/pwa/dynamsoft-192x192.png similarity index 100% rename from frameworks/pwa/scan-using-foundational-api/dynamsoft-192x192.png rename to frameworks/pwa/dynamsoft-192x192.png diff --git a/frameworks/pwa/scan-using-foundational-api/dynamsoft-512x512.png b/frameworks/pwa/dynamsoft-512x512.png similarity index 100% rename from frameworks/pwa/scan-using-foundational-api/dynamsoft-512x512.png rename to frameworks/pwa/dynamsoft-512x512.png diff --git a/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html b/frameworks/pwa/helloworld-pwa.html similarity index 92% rename from frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html rename to frameworks/pwa/helloworld-pwa.html index 5d156f50..82ccaacc 100644 --- a/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html +++ b/frameworks/pwa/helloworld-pwa.html @@ -7,7 +7,6 @@ Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) - @@ -16,6 +15,8 @@ + + @@ -24,18 +25,18 @@

Hello World for PWA


Results:
- + - - - - -``` - -* Next, set up a secure environment (HTTPS) to run the page `helloworld-pwa.html`. This is required as PWAs only run in secure environments. -> Note: -> -> In this sample, we're using IIS to set up a secure site at https://localhost. The page will be located at the root of the site so that it can be accessed at https://localhost/helloworld-pwa.html. - -## Make the app progressive - -### Register a service worker for offline support - -Service Workers form the foundation of PWAs, acting as the virtual proxy between the browser and the network. They enable offline content delivery, manage notifications, and perform heavy calculations on a separate thread - -* To use a service worker, we first need to register it. In the `helloworld-pwa.html` file, add the following code at the end of the script: - -```javascript -/* /helloworld-pwa.html */ -if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('./service-worker.js'); -}; -``` - -* Next, create the `service-worker.js` file with the following content: - -```javascript -/* /service-worker.js */ -// Files to cache -const cacheName = 'helloworld-pwa'; -const appShellFiles = [ - './helloworld-pwa.html', -]; - -// Installing Service Worker -self.addEventListener("install", (e) => { - console.log("[Service Worker] Install"); - e.waitUntil( - (async () => { - const cache = await caches.open(cacheName); - console.log("[Service Worker] Caching all: app shell and content"); - await cache.addAll(appShellFiles); - })() - ); -}); - -self.addEventListener("fetch", (e) => { - e.respondWith( - (async () => { - // Fetch cached response if exists - const cachedResponse = await caches.match(e.request); - console.log(`[Service Worker] Fetching resource: ${e.request.url}`); - if (cachedResponse) { - return cachedResponse; - } - - // Otherwise, fetch from network - const response = await fetch(e.request); - const cache = await caches.open(cacheName); - console.log(`[Service Worker] Caching new resource: ${e.request.url}`); - if (e.request.method !== "POST") { - cache.put(e.request, response.clone()); - } - return response; - })() - ); -}); -``` - -With the above code, the application can now work offline because the service worker will cache the `helloworld-pwa.html` page and its related resources. - -For more information, refer to [Making PWAs work offline with Service workers](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers). - -> Note: -> -> Since the files are cached, changes we make in later steps may not be reflected immediately. To ensure updates are applied, clear the cache after changes are made. You can do this by running the following code in the browser console: -> -> ```javascript -> const cacheName = 'helloworld-pwa'; -> const cache = await caches.delete(cacheName); -> ``` - -### Use a web manifest file to make the application installable - -A web manifest file contains a list of information about a website in JSON format. This information is used to enable the web app to be installed on a device. - -* Create a file named `helloworld-pwa.json` with the following content: - -```json -/* /helloworld-pwa.json */ -{ - "name": "Dynamsoft Barcode Reader Progressive Web App", - "short_name": "DBR-PWA", - "description": "Progressive Web App that reads barcodes from a video input with Dynamsoft Barcode Reader.", - "start_url": "./helloworld-pwa.html", - "scope": ".", - "display": "standalone", - "theme_color": "#B12A34", - "background_color": "#B12A34", - "icons": [ - { - "src": "./dynamsoft-512x512.png", - "sizes": "512x512", - "type": "image/png" - }, - { - "src": "./dynamsoft-192x192.png", - "sizes": "192x192", - "type": "image/png" - } - ] -} -``` - -> Note: The icon files can be found in the github repository. - -* Then we include the file in the `` block of the `helloworld-pwa.html` file as such: - -```html - - -``` - -* For compatibility on safari, we need add some `meta` in ``. - -```html - - - - - - - - - -``` - -Now, if you open the application again in your browser, you will notice an install icon appear on the right side of the address bar. When you click on it, a pop-up will appear asking if you want to install the app. - -Once installed, you can use it just like any native app. - -To enable offline functionality for Dynamsoft Barcode Reader, you'll need to cache more files. - -### Enabling offline functionality for Dynamsoft Barcode Reader - -These directories below are the resources required for Dynamsoft Barcode Reader functionality. Once added, these files are cached on installation of the service worker (i.e. `install` event), wensuring the PWA remains fully functional without any internet. - -Add this code below to the `service-worker.js` -```javascript -/* /service-worker.js */ -const engineResourcePaths = { - dbrBundle: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/", -}; - -// Files to cache -const cacheName = "helloworld-pwa"; -const appShellFiles = [ - "./helloworld-pwa.html", - "./dynamsoft-192x192.png", - "./dynamsoft-512x512.png", - "./helloworld-pwa.json", - `${engineResourcePaths.dbrBundle}dbr.bundle.worker.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-capture-vision-bundle.js` - `${engineResourcePaths.dbrBundle}dynamsoft-capture-vision-bundle.wasm`, - `${engineResourcePaths.dbrBundle}models/OneDDeblur.data`, - `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID_WITH_MAG_STRIPE.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD1_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_FRENCH_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_VISA.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD3_PASSPORT.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD3_VISA.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/VIN_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/VIN.dcpres`, - `${engineResourcePaths.dbrBundle}templates/DBR-PresetTemplates.json`, - `${engineResourcePaths.dbrBundle}ui/barcode-scanner.ui.xml`, - `${engineResourcePaths.dbrBundle}ui/dce.ui.xml`, - `${engineResourcePaths.dbrBundle}ui/dls.license.dialog.html`, -]; -``` - -## Summary - -In this article we took a look at how you can turn a simple barcode reading page into a PWA that is installable, re-engageable and capable of working offline. To learn more about Progressive web apps, you can click [here](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps). - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/frameworks/pwa/scan-using-foundational-api/service-worker.js b/frameworks/pwa/scan-using-foundational-api/service-worker.js deleted file mode 100644 index 0fb7589b..00000000 --- a/frameworks/pwa/scan-using-foundational-api/service-worker.js +++ /dev/null @@ -1,92 +0,0 @@ -const engineResourcePaths = { - dbrBundle: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/", -}; - -// Files to cache -const cacheName = "helloworld-pwa"; -// Here we choose some files into appShellFiles to cache. -// To keep it simple, you can put all the files -// in "node_modules/dynamsoft-barcode-reader-bundle/dist" into the list. -const appShellFiles = [ - "./helloworld-pwa.html", - "./dynamsoft-192x192.png", - "./dynamsoft-512x512.png", - "./helloworld-pwa.json", - `${engineResourcePaths.dbrBundle}dbr.bundle.worker.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle.wasm`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd.wasm`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.worker.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.wasm`, - `${engineResourcePaths.dbrBundle}models/OneDDeblur.data`, - `${engineResourcePaths.dbrBundle}models/OneDLocalization.data`, - `${engineResourcePaths.dbrBundle}models/DataMatrixQRCodeLocalization.data`, - `${engineResourcePaths.dbrBundle}models/Code128Decoder.data`, - `${engineResourcePaths.dbrBundle}models/EAN13Decoder.data`, - `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID_WITH_MAG_STRIPE.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD1_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_FRENCH_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_VISA.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD3_PASSPORT.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD3_VISA.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/VIN_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/VIN.dcpres`, - `${engineResourcePaths.dbrBundle}templates/DBR-PresetTemplates.json`, - `${engineResourcePaths.dbrBundle}ui/barcode-scanner.ui.xml`, - `${engineResourcePaths.dbrBundle}ui/dce.ui.xml`, - `${engineResourcePaths.dbrBundle}ui/dls.license.dialog.html`, -]; - -// Installing Service Worker -self.addEventListener("install", (e) => { - console.log("[Service Worker] Install"); - e.waitUntil( - (async () => { - const cache = await caches.open(cacheName); - console.log(cache); - console.log("[Service Worker] Caching all: app shell and content"); - await cache.addAll(appShellFiles); - })() - ); -}); - -self.addEventListener("fetch", (e) => { - e.respondWith( - (async () => { - // Fetch cached response if exists - const cachedResponse = await caches.match(e.request); - console.log(`[Service Worker] Fetching resource: ${e.request.url}`); - if (cachedResponse) { - return cachedResponse; - } - - // Otherwise, fetch from network - const response = await fetch(e.request); - - if ( - e.request.method !== "POST" && - // Authorization requests should not be cached - !/https:\/\/.*?\.dynamsoft.com\/auth/.test(e.request.url) - // You can add other filter conditions - ) { - const cache = await caches.open(cacheName); - console.log(`[Service Worker] Caching new resource: ${e.request.url}`); - cache.put(e.request, response.clone()); - } - - return response; - })() - ); -}); diff --git a/frameworks/pwa/scan-using-rtu-api/README.md b/frameworks/pwa/scan-using-rtu-api/README.md deleted file mode 100644 index 7a9a2965..00000000 --- a/frameworks/pwa/scan-using-rtu-api/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# 📦 Scan Single Barcode - PWA - -This sample shows how to integrate the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) into a **PWA** application to scan a single barcode from video. - -## ✨ Features - -- Easy integration with pre-built UI -- BarcodeScanner instance created in a component -- Scans one barcode at a time from video - -## 📌 Customization - -Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). - -## 📄 Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/pwa/scan-using-rtu-api/dynamsoft-192x192.png b/frameworks/pwa/scan-using-rtu-api/dynamsoft-192x192.png deleted file mode 100644 index e02348be..00000000 Binary files a/frameworks/pwa/scan-using-rtu-api/dynamsoft-192x192.png and /dev/null differ diff --git a/frameworks/pwa/scan-using-rtu-api/dynamsoft-512x512.png b/frameworks/pwa/scan-using-rtu-api/dynamsoft-512x512.png deleted file mode 100644 index 1e0ec7dc..00000000 Binary files a/frameworks/pwa/scan-using-rtu-api/dynamsoft-512x512.png and /dev/null differ diff --git a/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.html b/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.html deleted file mode 100644 index 7afb3ae0..00000000 --- a/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.html +++ /dev/null @@ -1,109 +0,0 @@ - - - - - - - - - Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) - - - - - - - - - - - - -

- Hello World (Scan One Single Barcode via Camera) -

- -
- - - - - - - - - - - - - \ No newline at end of file diff --git a/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.json b/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.json deleted file mode 100644 index 1c6c8e42..00000000 --- a/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "Dynamsoft Barcode Reader Progressive Web App", - "short_name": "DBR-PWA", - "description": "Progressive Web App that reads barcodes from a video input with Dynamsoft Barcode Reader.", - "start_url": "./helloworld-pwa.html", - "scope": ".", - "display": "standalone", - "theme_color": "#B12A34", - "background_color": "#B12A34", - "icons": [ - { - "src": "./dynamsoft-512x512.png", - "sizes": "512x512", - "type": "image/png" - }, - { - "src": "./dynamsoft-192x192.png", - "sizes": "192x192", - "type": "image/png" - } - ] -} \ No newline at end of file diff --git a/frameworks/pwa/scan-using-rtu-api/service-worker.js b/frameworks/pwa/scan-using-rtu-api/service-worker.js deleted file mode 100644 index 0fb7589b..00000000 --- a/frameworks/pwa/scan-using-rtu-api/service-worker.js +++ /dev/null @@ -1,92 +0,0 @@ -const engineResourcePaths = { - dbrBundle: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/", -}; - -// Files to cache -const cacheName = "helloworld-pwa"; -// Here we choose some files into appShellFiles to cache. -// To keep it simple, you can put all the files -// in "node_modules/dynamsoft-barcode-reader-bundle/dist" into the list. -const appShellFiles = [ - "./helloworld-pwa.html", - "./dynamsoft-192x192.png", - "./dynamsoft-512x512.png", - "./helloworld-pwa.json", - `${engineResourcePaths.dbrBundle}dbr.bundle.worker.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle.wasm`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd.wasm`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.worker.js`, - `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.wasm`, - `${engineResourcePaths.dbrBundle}models/OneDDeblur.data`, - `${engineResourcePaths.dbrBundle}models/OneDLocalization.data`, - `${engineResourcePaths.dbrBundle}models/DataMatrixQRCodeLocalization.data`, - `${engineResourcePaths.dbrBundle}models/Code128Decoder.data`, - `${engineResourcePaths.dbrBundle}models/EAN13Decoder.data`, - `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID_WITH_MAG_STRIPE.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD1_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_FRENCH_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_ID.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD2_VISA.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD3_PASSPORT.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/MRTD_TD3_VISA.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL.dcpres`, - `${engineResourcePaths.dbrBundle}parser-resources/VIN_Map.txt`, - `${engineResourcePaths.dbrBundle}parser-resources/VIN.dcpres`, - `${engineResourcePaths.dbrBundle}templates/DBR-PresetTemplates.json`, - `${engineResourcePaths.dbrBundle}ui/barcode-scanner.ui.xml`, - `${engineResourcePaths.dbrBundle}ui/dce.ui.xml`, - `${engineResourcePaths.dbrBundle}ui/dls.license.dialog.html`, -]; - -// Installing Service Worker -self.addEventListener("install", (e) => { - console.log("[Service Worker] Install"); - e.waitUntil( - (async () => { - const cache = await caches.open(cacheName); - console.log(cache); - console.log("[Service Worker] Caching all: app shell and content"); - await cache.addAll(appShellFiles); - })() - ); -}); - -self.addEventListener("fetch", (e) => { - e.respondWith( - (async () => { - // Fetch cached response if exists - const cachedResponse = await caches.match(e.request); - console.log(`[Service Worker] Fetching resource: ${e.request.url}`); - if (cachedResponse) { - return cachedResponse; - } - - // Otherwise, fetch from network - const response = await fetch(e.request); - - if ( - e.request.method !== "POST" && - // Authorization requests should not be cached - !/https:\/\/.*?\.dynamsoft.com\/auth/.test(e.request.url) - // You can add other filter conditions - ) { - const cache = await caches.open(cacheName); - console.log(`[Service Worker] Caching new resource: ${e.request.url}`); - cache.put(e.request, response.clone()); - } - - return response; - })() - ); -}); diff --git a/frameworks/pwa/service-worker.js b/frameworks/pwa/service-worker.js new file mode 100644 index 00000000..e0539995 --- /dev/null +++ b/frameworks/pwa/service-worker.js @@ -0,0 +1,95 @@ +const engineResourcePaths = { + dbrBundle: "https://npm.scannerproxy.com:802/cdn/@dynamsoft/dynamsoft-barcode-reader-bundle@11.4.2000-dev-20260410144128/dist/", +}; + +// Files to cache +const cacheName = "helloworld-pwa"; +// Here we choose some files into appShellFiles to cache. +// To keep it simple, you can put all the files +// in "node_modules/dynamsoft-barcode-reader-bundle/dist" into the list. +const appShellFiles = [ + "./helloworld-pwa.html", + "./dynamsoft-192x192.png", + "./dynamsoft-512x512.png", + "./helloworld-pwa.json", + `${engineResourcePaths.dbrBundle}dbr.bundle.worker.js`, + `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd.js`, + `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd.wasm`, + `${engineResourcePaths.dbrBundle}models/Code128Decoder.data`, + `${engineResourcePaths.dbrBundle}models/EAN13Decoder.data`, + `${engineResourcePaths.dbrBundle}models/Code39ITFDecoder.data`, + `${engineResourcePaths.dbrBundle}templates/DBR-PresetTemplates.json`, + `${engineResourcePaths.dbrBundle}ui/dce.ui.xml`, + `${engineResourcePaths.dbrBundle}ui/dls.license.dialog.html`, + + // `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle.js`, + // `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle.wasm`, + // `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.js`, + // `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.worker.js`, + // `${engineResourcePaths.dbrBundle}dynamsoft-barcode-reader-bundle-ml-simd-pthread.wasm`, + // `${engineResourcePaths.dbrBundle}models/OneDDeblur.data`, + // `${engineResourcePaths.dbrBundle}models/OneDLocalization.data`, + // `${engineResourcePaths.dbrBundle}models/DataMatrixQRCodeLocalization.data`, + // `${engineResourcePaths.dbrBundle}models/DataMatrixQRCodeDeblur.data`, + // `${engineResourcePaths.dbrBundle}models/PDF417Deblur.data`, + // `${engineResourcePaths.dbrBundle}models/PDF417Localization.data`, + // `${engineResourcePaths.dbrBundle}parser-resources/AADHAAR.data`, + // `${engineResourcePaths.dbrBundle}parser-resources/AAMVA_DL_ID.data`, + // `${engineResourcePaths.dbrBundle}parser-resources/GS1_AI.data`, + // `${engineResourcePaths.dbrBundle}parser-resources/MRTD.data`, + // `${engineResourcePaths.dbrBundle}parser-resources/SOUTH_AFRICA_DL.data`, + // `${engineResourcePaths.dbrBundle}parser-resources/VIN.data`, +]; + +// Installing Service Worker +self.addEventListener("install", (e) => { + console.log("[Service Worker] Install"); + e.waitUntil( + (async () => { + const cache = await caches.open(cacheName); + console.log(cache); + console.log("[Service Worker] Caching all: app shell and content"); + // Avoid failing the whole install if one resource is temporarily unreachable. + await Promise.allSettled(appShellFiles.map((file) => cache.add(file))); + })() + ); +}); + +self.addEventListener("fetch", (e) => { + e.respondWith( + (async () => { + try { + // Fetch cached response if exists + const cachedResponse = await caches.match(e.request); + console.log(`[Service Worker] Fetching resource: ${e.request.url}`); + if (cachedResponse) { + return cachedResponse; + } + + // Otherwise, fetch from network + const response = await fetch(e.request); + + if ( + e.request.method === "GET" && + response.ok && + // Authorization requests should not be cached + !/https:\/\/.*?\.dynamsoft.com\/auth/.test(e.request.url) + // You can add other filter conditions + ) { + const cache = await caches.open(cacheName); + console.log(`[Service Worker] Caching new resource: ${e.request.url}`); + cache.put(e.request, response.clone()); + } + + return response; + } catch (error) { + // Network fallback: try cache one more time before failing. + const fallbackResponse = await caches.match(e.request); + if (fallbackResponse) { + return fallbackResponse; + } + throw error; + } + })() + ); +}); diff --git a/frameworks/react/scan-using-foundational-api/.gitignore b/frameworks/react/.gitignore similarity index 100% rename from frameworks/react/scan-using-foundational-api/.gitignore rename to frameworks/react/.gitignore diff --git a/frameworks/react/README.md b/frameworks/react/README.md index 88def624..e3e7245f 100644 --- a/frameworks/react/README.md +++ b/frameworks/react/README.md @@ -1,23 +1,396 @@ -# React samples +# Hello World Sample for React with Hooks -This directory contains React-based examples demonstrating how to use the Dynamsoft Barcode Reader (JavaScript edition) in React projects. +[React](https://reactjs.org/) is a JavaScript library meant explicitly for creating interactive UIs. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a React application. Note that in this sample we will use `TypeScript` and [Hooks](https://reactjs.org/docs/hooks-intro.html). Also, there is another sample `react` defining components as classes in React. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- `scan-using-foundational-api/` — React + TypeScript example using the foundational API. -- `scan-using-rtu-api/` — React example using the RTU API. +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -1. Change to a subexample directory, e.g.: +* Hello World in React with Hooks - Source Code - ```bash - cd scan-using-foundational-api - ``` +## Preparation -2. Follow the subexample README for exact steps (typically: `npm install` && `npm run dev` or `npm run start`). +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `react 18.2.0` are used in the example below. -## Notes +## Quick Start -- 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 +```cmd +npm install +npm start +``` +Then open http://localhost:3000/ to view the sample app. + +## Create the sample project + +In this section, we will be creating a React application utilizing the Dynamsoft Barcode Reader bundle sdk. + +We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. + +By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! + +### Create a Bootstrapped Raw React Application with TypeScript + +```cmd +npx create-react-app my-app --template typescript +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +cd my-app +npm install dynamsoft-barcode-reader-bundle@11.4.2000 -E +``` + +## Start to implement + +### Add file "dynamsoft.config.ts" under "/src/" to configure libraries + +```typescript +/* /src/dynamsoft.config.ts */ +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; + +// 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.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +// Optional. Preload .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. +CoreModule.loadWasm(); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Build directory structure + +* Create a directory `components` under `/src/`, and then create two other directories, `VideoCapture` and `ImageCapture` under `/components/`. + +### Create and edit the `VideoCapture` component + +* Create `VideoCapture.tsx` under `/src/components/VideoCapture/`. The `VideoCapture` component helps decode barcodes via camera. + +* In `VideoCapture.tsx`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```tsx +/* /src/components/VideoCapture/VideoCapture.tsx */ +import { useEffect, useRef, useState } from "react"; +import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. +import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; +import "./VideoCapture.css"; + +const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; + +function VideoCapture() { + const [resultText, setResultText] = useState(""); + const cameraViewContainer = useRef(null); + + useEffect((): any => { + let resolveInit: () => void; + const pInit: Promise = new Promise((r) => { + resolveInit = r; + }); + let isDestroyed = false; + + let cvRouter: CaptureVisionRouter; + let cameraEnhancer: CameraEnhancer; + + (async () => { + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await CameraView.createInstance(); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } // Check if component is destroyed after every async + cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + + // Get default UI and append it to DOM. + cameraViewContainer.current!.append(cameraView.getUIElement()); + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + cvRouter = await CaptureVisionRouter.createInstance(); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + cvRouter.setInput(cameraEnhancer); + + // Define a callback for results. + cvRouter.addResultReceiver({ + onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; + + let _resultText = ""; + setResultText(_resultText); + console.log(result); + for (let item of result.barcodeResultItems) { + _resultText += `${item.formatString}: ${item.text}\n\n`; + } + setResultText(_resultText); + }, + }); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + // Filter out unchecked barcodes. + filter.enableResultCrossVerification("barcode", true); + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication("barcode", true); + await cvRouter.addResultFilter(filter); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + cameraView.setScanLaserVisible(true); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + await cvRouter.startCapturing("ReadSingleBarcode"); + if (isDestroyed) { + throw Error(componentDestroyedErrorMsg); + } + } catch (ex: any) { + if ((ex as Error)?.message === componentDestroyedErrorMsg) { + console.log(componentDestroyedErrorMsg); + } else { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } + } + // Resolve pInit promise once initialization is complete. + resolveInit!(); + })(); + + // componentWillUnmount. dispose cvRouter when it's no longer needed + return () => { + isDestroyed = true; + // Wait for the pInit to complete before disposing resources. + pInit.then(() => { + cvRouter?.dispose(); + cameraEnhancer?.dispose(); + }).catch((_) => { }) + }; + }, []); + + return ( +
+
+
+ Results: +
{resultText}
+
+ ); +} + +export default VideoCapture; +``` + +> Note: +> +> * The component should never update so that events bound to the UI stay valid. In this copmonent, the useEffect() hook is used to handle the component's mount and unmount lifecycle events, and there are no state updates that would cause a re-render. +> * 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, { useRef, useEffect, MutableRefObject, useState } from "react"; +import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import "./ImageCapture.css"; + +function ImageCapture() { + const [resultText, setResultText] = useState(""); + + let pCvRouter: MutableRefObject | null> = useRef(null); + let isDestroyed = useRef(false); + + const captureImage = async (e: React.ChangeEvent) => { + let files = [...(e.target.files as any as File[])]; + e.target.value = ""; // reset input + setResultText(""); + + try { + // ensure cvRouter is created only once + const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance()); + if (isDestroyed.current) return; + + let _resultText = ""; + for (let file of files) { + // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst"); + console.log(result); + if (isDestroyed.current) return; + + // Print file name if there's multiple files + if (files.length > 1) { + _resultText += `\n${file.name}:\n`; + } + for (let _item of result.items) { + if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { + continue; // check if captured result item is a barcode + } + let item = _item as BarcodeResultItem; + _resultText += item.formatString + ": " + item.text + "\n" + } + setResultText(_resultText); + // If no items are found, display that no barcode was detected + if (!result.items.length) setResultText(_resultText + "No barcode found"); + } + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } + }; + + useEffect((): any => { + // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. + isDestroyed.current = false; + + // componentWillUnmount. dispose cvRouter when it's no longer needed + return () => { + isDestroyed.current = true; + if (pCvRouter.current) { + pCvRouter.current.then((cvRouter) => { + cvRouter.dispose(); + }).catch((_) => { }) + } + }; + }, []); + + return ( +
+
+ +
+
{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 { useState } from "react"; +import reactLogo from "./assets/logo.svg"; +import VideoCapture from "./components/VideoCapture/VideoCapture"; +import ImageCapture from "./components/ImageCapture/ImageCapture"; +import "./App.css"; + +enum Modes { + VIDEO_CAPTURE = "video", + IMAGE_CAPTURE = "image", +} + +function App() { + const [mode, setMode] = useState(Modes.VIDEO_CAPTURE); + + const showVideoCapture = () => setMode(Modes.VIDEO_CAPTURE); + + const showImageCapture = () => setMode(Modes.IMAGE_CAPTURE); + + return ( +
+
+

Hello World for React

+ logo +
+
+ + +
+
{mode === Modes.VIDEO_CAPTURE ? : }
+
+ ); +} + +export default App; +``` + +* Try running the project. + +```cmd +npm start +``` + +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show 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/frameworks/react/scan-using-foundational-api/package.json b/frameworks/react/package.json similarity index 95% rename from frameworks/react/scan-using-foundational-api/package.json rename to frameworks/react/package.json index 465c9542..1f0485b2 100644 --- a/frameworks/react/scan-using-foundational-api/package.json +++ b/frameworks/react/package.json @@ -11,7 +11,7 @@ "@types/node": "^16.18.99", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", - "dynamsoft-barcode-reader-bundle": "11.2.4000", + "dynamsoft-barcode-reader-bundle": "11.4.2000", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", diff --git a/frameworks/react/scan-using-foundational-api/public/favicon.ico b/frameworks/react/public/favicon.ico similarity index 100% rename from frameworks/react/scan-using-foundational-api/public/favicon.ico rename to frameworks/react/public/favicon.ico diff --git a/frameworks/react/scan-using-foundational-api/public/index.html b/frameworks/react/public/index.html similarity index 93% rename from frameworks/react/scan-using-foundational-api/public/index.html rename to frameworks/react/public/index.html index a289ff17..ab650d8e 100644 --- a/frameworks/react/scan-using-foundational-api/public/index.html +++ b/frameworks/react/public/index.html @@ -10,7 +10,6 @@ content="Dynamsoft Barcode Reader in a React Application, helps read barcodes from camera or images." /> - -
- - - - - - - - - \ No newline at end of file diff --git a/frameworks/svelte/scan-using-foundational-api/.gitignore b/frameworks/svelte/.gitignore similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/.gitignore rename to frameworks/svelte/.gitignore diff --git a/frameworks/svelte/README.md b/frameworks/svelte/README.md index 3cea8a4e..e769e6a3 100644 --- a/frameworks/svelte/README.md +++ b/frameworks/svelte/README.md @@ -1,23 +1,351 @@ -# Svelte samples +# Hello World for Vite + Svelte + TS - Dynamsoft Barcode Reader Sample -This directory contains Svelte examples demonstrating how to use the Dynamsoft Barcode Reader in Svelte applications. +[Svelte](https://svelte.dev/) is a JavaScript library meant explicitly for creating interactive UIs. Svelte compiles components into code that directly manipulates the DOM, unlike other frameworks such as Vue and React that relies on a virtual DOM for updates. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Svelte application using Vite. Note that in this sample we will use TypeScript. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- scan-using-foundational-api/ — Svelte + Vite example using foundational API. -- scan-using-rtu-api/ — RTU API Svelte example. +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -1. Change to a subexample directory, e.g.: +* Hello World for Vite + Svelte + TS - Source Code - ```bash - cd scan-using-foundational-api - ``` +## Preparation -2. Follow the subexample README for exact steps (typically: npm install && npm run dev). +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `svelte 4.2.12` are used in the example below. -## Notes +## Quick Start -- Run via Vite or the framework dev server; opening files directly may break functionality. -- See the repository root README.md for general usage and license information. \ No newline at end of file +```cmd +npm install +npm run dev +``` +Then open http://localhost:5173/ to view the sample app. + +## Create the sample project + +If you're planning to start the project from scratch, in this section, we will be creating a Svelte application with Vite utilizing the Dynamsoft Barcode Reader bundle sdk. + +We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. + +By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! + +### Create a Bootstrapped Svelte Application with Vite and TypeScript + +```cmd +npm create vite@latest my-app + + +√ Select a framework: » Svelte +√ Select a variant: » TypeScript +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +cd my-app +npm install dynamsoft-barcode-reader-bundle@11.4.2000 -E +``` + +## Start to implement + +### Add file "dynamsoft.config.ts" under "/src/" to configure libraries + +```typescript +/* /src/dynamsoft.config.ts */ +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; + +// 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.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +// Optional. Preload .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. +CoreModule.loadWasm(); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Build directory structure + +* Create a directory `components` under `/src/` + +### Create and edit the `VideoCapture` component + +* Create `VideoCapture.svelte` under `/src/components/`. The `VideoCapture` component helps decode barcodes via camera. + +* In `VideoCapture.svelte`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```svelte + + + +
+
+ Results:
+
{resultText}
+
+``` + +> Note: +> +> * 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.svelte` under `/src/components/`. The `ImageCapture` component helps decode barcodes in an image. + +* In `ImageCapture.svelte`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```svelte + + + +
+
+ +
+
{resultText}
+
+``` + +### Add the `VideoCapture` and `ImageCapture` component to `App.svelte` + +* On `/src/App.svelte`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. + +* Add following code to `App.svelte`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```svelte + + + +
+
+
+

Hello World for Svelte

+ +
+
+ + +
+ {#if mode === "video"} + + {:else} + + {/if} +
+
+``` + +* Try running the project. + +```cmd +npm run dev +``` + +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/frameworks/svelte/scan-using-foundational-api/index.html b/frameworks/svelte/index.html similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/index.html rename to frameworks/svelte/index.html diff --git a/frameworks/svelte/scan-using-foundational-api/logo.svg b/frameworks/svelte/logo.svg similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/logo.svg rename to frameworks/svelte/logo.svg diff --git a/frameworks/svelte/scan-using-foundational-api/package.json b/frameworks/svelte/package.json similarity index 90% rename from frameworks/svelte/scan-using-foundational-api/package.json rename to frameworks/svelte/package.json index 8a0bc6c7..5da46364 100644 --- a/frameworks/svelte/scan-using-foundational-api/package.json +++ b/frameworks/svelte/package.json @@ -10,7 +10,7 @@ "check": "svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.2.4000" + "dynamsoft-barcode-reader-bundle": "11.4.2000" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.2", @@ -21,4 +21,4 @@ "typescript": "^5.2.2", "vite": "^5.0.0" } -} +} \ No newline at end of file diff --git a/frameworks/svelte/scan-using-foundational-api/README.md b/frameworks/svelte/scan-using-foundational-api/README.md deleted file mode 100644 index 512d0e39..00000000 --- a/frameworks/svelte/scan-using-foundational-api/README.md +++ /dev/null @@ -1,351 +0,0 @@ -# Hello World for Vite + Svelte + TS - Dynamsoft Barcode Reader Sample - -[Svelte](https://svelte.dev/) is a JavaScript library meant explicitly for creating interactive UIs. Svelte compiles components into code that directly manipulates the DOM, unlike other frameworks such as Vue and React that relies on a virtual DOM for updates. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Svelte application using Vite. Note that in this sample we will use TypeScript. - -In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.2.4000](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.2.4000). - -> Note: -> -> If you’re looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! -> -> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. - -## Official Sample - -* Hello World for Vite + Svelte + TS - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `svelte 4.2.12` are used in the example below. - -## Quick Start - -```cmd -npm install -npm run dev -``` -Then open http://localhost:5173/ to view the sample app. - -## Create the sample project - -If you're planning to start the project from scratch, in this section, we will be creating a Svelte application with Vite utilizing the Dynamsoft Barcode Reader bundle sdk. - -We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. - -By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! - -### Create a Bootstrapped Svelte Application with Vite and TypeScript - -```cmd -npm create vite@latest my-app - - -√ Select a framework: » Svelte -√ Select a variant: » TypeScript -``` - -### **CD** to the root directory of the application and install necessary libraries - -```cmd -cd my-app -npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E -``` - -## Start to implement - -### Add file "dynamsoft.config.ts" under "/src/" to configure libraries - -```typescript -/* /src/dynamsoft.config.ts */ -import { CoreModule } from "dynamsoft-core"; -import { LicenseManager } from "dynamsoft-license"; -import "dynamsoft-barcode-reader"; - -// 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 .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. -CoreModule.loadWasm(); -``` - -> Note: -> -> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. - -### Build directory structure - -* Create a directory `components` under `/src/` - -### Create and edit the `VideoCapture` component - -* Create `VideoCapture.svelte` under `/src/components/`. The `VideoCapture` component helps decode barcodes via camera. - -* In `VideoCapture.svelte`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```svelte - - - -
-
- Results:
-
{resultText}
-
-``` - -> Note: -> -> * 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.svelte` under `/src/components/`. The `ImageCapture` component helps decode barcodes in an image. - -* In `ImageCapture.svelte`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```svelte - - - -
-
- -
-
{resultText}
-
-``` - -### Add the `VideoCapture` and `ImageCapture` component to `App.svelte` - -* On `/src/App.svelte`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. - -* Add following code to `App.svelte`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```svelte - - - -
-
-
-

Hello World for Svelte

- -
-
- - -
- {#if mode === "video"} - - {:else} - - {/if} -
-
-``` - -* Try running the project. - -```cmd -npm run dev -``` - -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/frameworks/svelte/scan-using-rtu-api/.gitignore b/frameworks/svelte/scan-using-rtu-api/.gitignore deleted file mode 100644 index b398d222..00000000 --- a/frameworks/svelte/scan-using-rtu-api/.gitignore +++ /dev/null @@ -1,26 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? - -package-lock.json diff --git a/frameworks/svelte/scan-using-rtu-api/README.md b/frameworks/svelte/scan-using-rtu-api/README.md deleted file mode 100644 index 567cc40a..00000000 --- a/frameworks/svelte/scan-using-rtu-api/README.md +++ /dev/null @@ -1,33 +0,0 @@ -# 📦 Scan Single Barcode - Svelte - -This sample shows how to integrate the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) into a **Svelte** application to scan a single barcode from video. - -## ✨ Features - -- Easy integration with pre-built UI -- BarcodeScanner instance created in a Svelte component -- Scans one barcode at a time from video - -## 🚀 Quick Start - -### 1. Install Dependencies - -```bash -npm install -``` - -### 2. Run the App - -```bash -npm run dev -``` - -Then open http://localhost:5173/ to view the sample app. - -## 📌 Customization - -Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). - -## 📄 Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/svelte/scan-using-rtu-api/index.html b/frameworks/svelte/scan-using-rtu-api/index.html deleted file mode 100644 index dce29517..00000000 --- a/frameworks/svelte/scan-using-rtu-api/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera) - - -
- - - diff --git a/frameworks/svelte/scan-using-rtu-api/package.json b/frameworks/svelte/scan-using-rtu-api/package.json deleted file mode 100644 index 8c35efa4..00000000 --- a/frameworks/svelte/scan-using-rtu-api/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "dbrjs-svelte-rtu", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vite build", - "preview": "vite preview", - "check": "svelte-check --tsconfig ./tsconfig.json" - }, - "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.2.4000" - }, - "devDependencies": { - "@sveltejs/vite-plugin-svelte": "^3.0.2", - "@tsconfig/svelte": "^5.0.2", - "svelte": "^4.2.12", - "svelte-check": "^3.6.6", - "tslib": "^2.6.2", - "typescript": "^5.2.2", - "vite": "^5.0.0" - } -} diff --git a/frameworks/svelte/scan-using-rtu-api/src/App.svelte b/frameworks/svelte/scan-using-rtu-api/src/App.svelte deleted file mode 100644 index f966ed5b..00000000 --- a/frameworks/svelte/scan-using-rtu-api/src/App.svelte +++ /dev/null @@ -1,67 +0,0 @@ - - -
-

Barcode Scanner for Svelte

-
-
diff --git a/frameworks/svelte/scan-using-rtu-api/src/main.ts b/frameworks/svelte/scan-using-rtu-api/src/main.ts deleted file mode 100644 index 8c4eaed9..00000000 --- a/frameworks/svelte/scan-using-rtu-api/src/main.ts +++ /dev/null @@ -1,7 +0,0 @@ -import App from "./App.svelte"; - -const app = new App({ - target: document.getElementById("app")!, -}); - -export default app; diff --git a/frameworks/svelte/scan-using-rtu-api/src/vite-env.d.ts b/frameworks/svelte/scan-using-rtu-api/src/vite-env.d.ts deleted file mode 100644 index 4078e747..00000000 --- a/frameworks/svelte/scan-using-rtu-api/src/vite-env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -/// diff --git a/frameworks/svelte/scan-using-rtu-api/svelte.config.js b/frameworks/svelte/scan-using-rtu-api/svelte.config.js deleted file mode 100644 index b0683fd2..00000000 --- a/frameworks/svelte/scan-using-rtu-api/svelte.config.js +++ /dev/null @@ -1,7 +0,0 @@ -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' - -export default { - // Consult https://svelte.dev/docs#compile-time-svelte-preprocess - // for more information about preprocessors - preprocess: vitePreprocess(), -} diff --git a/frameworks/svelte/scan-using-rtu-api/tsconfig.json b/frameworks/svelte/scan-using-rtu-api/tsconfig.json deleted file mode 100644 index 5fb548f2..00000000 --- a/frameworks/svelte/scan-using-rtu-api/tsconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "extends": "@tsconfig/svelte/tsconfig.json", - "compilerOptions": { - "target": "ESNext", - "useDefineForClassFields": true, - "module": "ESNext", - "resolveJsonModule": true, - /** - * Typecheck JS in `.svelte` and `.js` files by default. - * Disable checkJs if you'd like to use dynamic types in JS. - * Note that setting allowJs false does not prevent the use - * of JS in `.svelte` files. - */ - "allowJs": true, - "checkJs": true, - "isolatedModules": true - }, - "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], - "references": [{ "path": "./tsconfig.node.json" }] -} diff --git a/frameworks/svelte/scan-using-rtu-api/tsconfig.node.json b/frameworks/svelte/scan-using-rtu-api/tsconfig.node.json deleted file mode 100644 index d02c37df..00000000 --- a/frameworks/svelte/scan-using-rtu-api/tsconfig.node.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "skipLibCheck": true, - "module": "ESNext", - "moduleResolution": "bundler", - "strict": true - }, - "include": ["vite.config.ts"] -} diff --git a/frameworks/svelte/scan-using-rtu-api/vite.config.ts b/frameworks/svelte/scan-using-rtu-api/vite.config.ts deleted file mode 100644 index 2aeffabd..00000000 --- a/frameworks/svelte/scan-using-rtu-api/vite.config.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { defineConfig } from 'vite' -import { svelte } from '@sveltejs/vite-plugin-svelte' - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [svelte()], - base: "./" -}) diff --git a/frameworks/svelte/scan-using-foundational-api/src/App.svelte b/frameworks/svelte/src/App.svelte similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/src/App.svelte rename to frameworks/svelte/src/App.svelte diff --git a/frameworks/svelte/scan-using-foundational-api/src/components/ImageCapture.svelte b/frameworks/svelte/src/components/ImageCapture.svelte similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/src/components/ImageCapture.svelte rename to frameworks/svelte/src/components/ImageCapture.svelte diff --git a/frameworks/svelte/scan-using-foundational-api/src/components/VideoCapture.svelte b/frameworks/svelte/src/components/VideoCapture.svelte similarity index 98% rename from frameworks/svelte/scan-using-foundational-api/src/components/VideoCapture.svelte rename to frameworks/svelte/src/components/VideoCapture.svelte index 48ccb59d..435c85c6 100644 --- a/frameworks/svelte/scan-using-foundational-api/src/components/VideoCapture.svelte +++ b/frameworks/svelte/src/components/VideoCapture.svelte @@ -50,7 +50,7 @@ cvRouter.setInput(cameraEnhancer); // Define a callback for results. - cvRouter.addResultReceiver({ + await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; diff --git a/frameworks/svelte/scan-using-foundational-api/src/dynamsoft.config.ts b/frameworks/svelte/src/dynamsoft.config.ts similarity index 94% rename from frameworks/svelte/scan-using-foundational-api/src/dynamsoft.config.ts rename to frameworks/svelte/src/dynamsoft.config.ts index f3e49db1..f6b6c6eb 100644 --- a/frameworks/svelte/scan-using-foundational-api/src/dynamsoft.config.ts +++ b/frameworks/svelte/src/dynamsoft.config.ts @@ -13,7 +13,7 @@ LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", { execute /** * 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. + * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. * LICENSE ALERT - THE END */ diff --git a/frameworks/svelte/scan-using-foundational-api/src/main.ts b/frameworks/svelte/src/main.ts similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/src/main.ts rename to frameworks/svelte/src/main.ts diff --git a/frameworks/svelte/scan-using-foundational-api/src/vite-env.d.ts b/frameworks/svelte/src/vite-env.d.ts similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/src/vite-env.d.ts rename to frameworks/svelte/src/vite-env.d.ts diff --git a/frameworks/svelte/scan-using-foundational-api/svelte.config.js b/frameworks/svelte/svelte.config.js similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/svelte.config.js rename to frameworks/svelte/svelte.config.js diff --git a/frameworks/svelte/scan-using-foundational-api/tsconfig.json b/frameworks/svelte/tsconfig.json similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/tsconfig.json rename to frameworks/svelte/tsconfig.json diff --git a/frameworks/svelte/scan-using-foundational-api/tsconfig.node.json b/frameworks/svelte/tsconfig.node.json similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/tsconfig.node.json rename to frameworks/svelte/tsconfig.node.json diff --git a/frameworks/svelte/scan-using-foundational-api/vite.config.ts b/frameworks/svelte/vite.config.ts similarity index 100% rename from frameworks/svelte/scan-using-foundational-api/vite.config.ts rename to frameworks/svelte/vite.config.ts diff --git a/frameworks/vue/scan-using-foundational-api/.gitignore b/frameworks/vue/.gitignore similarity index 100% rename from frameworks/vue/scan-using-foundational-api/.gitignore rename to frameworks/vue/.gitignore diff --git a/frameworks/vue/README.md b/frameworks/vue/README.md index 05808ade..a7abe7b2 100644 --- a/frameworks/vue/README.md +++ b/frameworks/vue/README.md @@ -1,30 +1,379 @@ -# Vue samples +# Hello World Sample for Vue3 -This directory contains Vue-based examples demonstrating how to use the Dynamsoft Barcode Reader (JavaScript edition) in Vue projects. +[Vue 3](https://v3.vuejs.org/) is version 3 of Vue which is a progressive framework for building user interfaces. Check out the following guide on how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Vue 3 application. Note that in this sample, `TypeScript` is used. -**Included examples** +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.4.2000](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.4.2000). -- `scan-using-foundational-api/` — Full example using the foundational API. -- `scan-using-rtu-api/` — Demo showing usage of the RTU API. +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. -## Quick start +## Official Sample -1. Change to a subexample directory, for example: +* Hello World in Vue 3 - Source Code - ```bash - cd scan-using-foundational-api - ``` +## Preparation -2. Install dependencies and start the dev server: +Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `vue 3.3.4` are used in the example below. - ```bash - npm install - npm run dev - ``` +## Quick Start -3. Open the local address shown in the terminal (commonly `http://localhost:3000` when using Vite). +```cmd +npm install +npm run dev +``` +Then open http://localhost:5173/ to view the sample app. -## Notes +## Creating the sample project -- Run the example via a development server. Opening static HTML files directly may break module loading or camera access. -- For general usage and license info, see the repository root `README.md`. \ No newline at end of file +In this section, we will be creating a Vue application utilizing the Dynamsoft Barcode Reader bundle sdk. + +We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. + +By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! + +### Create a Bootstrapped Raw Vue Application + +```cmd +npm create vue@3 +``` + +On installation, you will be prompted to configure your project.\ +You can customize these options according to your preferences.\ +Below is the configuration used for this sample. + +``` +√ Project name: ... vue-project +√ Add TypeScript? ... Yes +√ Add JSX Support? ... No +√ Add Vue Router for Single Page Application development? ... No +√ Add Pinia for state management? ... No +√ Add Vitest for Unit Testing? ... No +√ Add an End-to-End Testing Solution? » No +√ Add ESLint for code quality? ... No +√ Add Vue DevTools 7 extension for debugging? (experimental) ... No +``` + +### **CD** to the root directory of the application and install necessary libraries + +```cmd +cd vue-project +npm install dynamsoft-barcode-reader-bundle@11.4.2000 -E +``` + +## Start to implement + +### Add file "dynamsoft.config.ts" under "/src/" to configure libraries + +```typescript +/* /src/dynamsoft.config.ts */ +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; + +// 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.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +// Optional. Preload .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. +CoreModule.loadWasm(); +``` + +> Note: +> +> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. +> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. + +### Create and edit the `VideoCapture` component + +* Create `VideoCapture.vue` under `/components/`. The VideoCapture component helps decode barcodes via camera. + +* In `VideoCapture.vue`, add the following code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```vue + + + + +``` +> Note: +> +> 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.vue` under `/components/`. The `ImageCapture` component helps decode barcodes in an image. + +* In `ImageCapture.vue`, add code for initializing and destroying `CaptureVisionRouter` instance. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```vue + + + + +``` + +### Add the `VideoCapture` and `ImageCapture` component to `App.vue` + +* On `/src/App.vue`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. + +* Add following code to `App.vue`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```vue + + + + +``` +> Note: +> +> With Vue's `defineAsyncComponent` we can improve the initial load speed and performance of the application. +> +> `defineAsyncComponent` allows us to load components such as `VideoCapture` and `ImageCapture` asynchronously, which means that the component's code is only loaded when it's needed. This will result in a faster initial load times. +> +> However, if you're implementing server-side rendering with Vue, using `defineAsyncComponent` might cause issues while loading `VideoCapture` and `ImageCapture` as we use the window/document object. Make sure to load these components on the client-side! +> +> Read more: https://vuejs.org/guide/components/async.html + +* Try running the project. + +```cmd +npm run dev +``` +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. + +### Comment out the following code in `assets/main.css`. (optional) + +```css +@media (min-width: 1024px) { + /* body { + display: flex; + place-items: center; + } + + #app { + display: grid; + grid-template-columns: 1fr 1fr; + padding: 0 2rem; + } */ +} +``` + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/vue/scan-using-foundational-api/env.d.ts b/frameworks/vue/env.d.ts similarity index 100% rename from frameworks/vue/scan-using-foundational-api/env.d.ts rename to frameworks/vue/env.d.ts diff --git a/frameworks/vue/scan-using-foundational-api/index.html b/frameworks/vue/index.html similarity index 83% rename from frameworks/vue/scan-using-foundational-api/index.html rename to frameworks/vue/index.html index 5c2edf90..b9a150ab 100644 --- a/frameworks/vue/scan-using-foundational-api/index.html +++ b/frameworks/vue/index.html @@ -9,7 +9,6 @@ content="Dynamsoft Barcode Reader in a Vue 3 Application, helps read barcodes from camera or images." /> - Hello World for Vue 3 - Dynamsoft Barcode Reader Sample diff --git a/frameworks/vue/scan-using-foundational-api/package.json b/frameworks/vue/package.json similarity index 91% rename from frameworks/vue/scan-using-foundational-api/package.json rename to frameworks/vue/package.json index 22f56bbb..65b59454 100644 --- a/frameworks/vue/scan-using-foundational-api/package.json +++ b/frameworks/vue/package.json @@ -11,7 +11,7 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.2.4000", + "dynamsoft-barcode-reader-bundle": "11.4.2000", "vue": "^3.2.45" }, "devDependencies": { @@ -23,4 +23,4 @@ "vite": "^4.0.0", "vue-tsc": "^1.0.12" } -} +} \ No newline at end of file diff --git a/frameworks/vue/scan-using-foundational-api/public/favicon.ico b/frameworks/vue/public/favicon.ico similarity index 100% rename from frameworks/vue/scan-using-foundational-api/public/favicon.ico rename to frameworks/vue/public/favicon.ico diff --git a/frameworks/vue/scan-using-foundational-api/README.md b/frameworks/vue/scan-using-foundational-api/README.md deleted file mode 100644 index 367862ba..00000000 --- a/frameworks/vue/scan-using-foundational-api/README.md +++ /dev/null @@ -1,379 +0,0 @@ -# Hello World Sample for Vue3 - -[Vue 3](https://v3.vuejs.org/) is version 3 of Vue which is a progressive framework for building user interfaces. Check out the following guide on how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Vue 3 application. Note that in this sample, `TypeScript` is used. - -In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.2.4000](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.2.4000). - -> Note: -> -> If you’re looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! -> -> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. - -## Official Sample - -* Hello World in Vue 3 - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `vue 3.3.4` are used in the example below. - -## Quick Start - -```cmd -npm install -npm run dev -``` -Then open http://localhost:5173/ to view the sample app. - -## Creating the sample project - -In this section, we will be creating a Vue application utilizing the Dynamsoft Barcode Reader bundle sdk. - -We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. - -By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! - -### Create a Bootstrapped Raw Vue Application - -```cmd -npm create vue@3 -``` - -On installation, you will be prompted to configure your project.\ -You can customize these options according to your preferences.\ -Below is the configuration used for this sample. - -``` -√ Project name: ... vue-project -√ Add TypeScript? ... Yes -√ Add JSX Support? ... No -√ Add Vue Router for Single Page Application development? ... No -√ Add Pinia for state management? ... No -√ Add Vitest for Unit Testing? ... No -√ Add an End-to-End Testing Solution? » No -√ Add ESLint for code quality? ... No -√ Add Vue DevTools 7 extension for debugging? (experimental) ... No -``` - -### **CD** to the root directory of the application and install necessary libraries - -```cmd -cd vue-project -npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E -``` - -## Start to implement - -### Add file "dynamsoft.config.ts" under "/src/" to configure libraries - -```typescript -/* /src/dynamsoft.config.ts */ -import { CoreModule } from "dynamsoft-core"; -import { LicenseManager } from "dynamsoft-license"; -import "dynamsoft-barcode-reader"; - -// 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 .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. -CoreModule.loadWasm(); -``` - -> Note: -> -> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. - -### Create and edit the `VideoCapture` component - -* Create `VideoCapture.vue` under `/components/`. The VideoCapture component helps decode barcodes via camera. - -* In `VideoCapture.vue`, add the following code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```vue - - - - -``` -> Note: -> -> 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.vue` under `/components/`. The `ImageCapture` component helps decode barcodes in an image. - -* In `ImageCapture.vue`, add code for initializing and destroying `CaptureVisionRouter` instance. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```vue - - - - -``` - -### Add the `VideoCapture` and `ImageCapture` component to `App.vue` - -* On `/src/App.vue`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. - -* Add following code to `App.vue`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```vue - - - - -``` -> Note: -> -> With Vue's `defineAsyncComponent` we can improve the initial load speed and performance of the application. -> -> `defineAsyncComponent` allows us to load components such as `VideoCapture` and `ImageCapture` asynchronously, which means that the component's code is only loaded when it's needed. This will result in a faster initial load times. -> -> However, if you're implementing server-side rendering with Vue, using `defineAsyncComponent` might cause issues while loading `VideoCapture` and `ImageCapture` as we use the window/document object. Make sure to load these components on the client-side! -> -> Read more: https://vuejs.org/guide/components/async.html - -* Try running the project. - -```cmd -npm run dev -``` -If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. - -### Comment out the following code in `assets/main.css`. (optional) - -```css -@media (min-width: 1024px) { - /* body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } */ -} -``` - -## Project Setup - -```sh -npm install -``` - -### Compile and Hot-Reload for Development - -```sh -npm run dev -``` - -### Type-Check, Compile and Minify for Production - -```sh -npm run build -``` - -## Support - -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/vue/scan-using-rtu-api/.gitignore b/frameworks/vue/scan-using-rtu-api/.gitignore deleted file mode 100644 index b398d222..00000000 --- a/frameworks/vue/scan-using-rtu-api/.gitignore +++ /dev/null @@ -1,26 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? - -package-lock.json diff --git a/frameworks/vue/scan-using-rtu-api/README.md b/frameworks/vue/scan-using-rtu-api/README.md deleted file mode 100644 index 9a06afd5..00000000 --- a/frameworks/vue/scan-using-rtu-api/README.md +++ /dev/null @@ -1,33 +0,0 @@ -# 📦 Scan Single Barcode - Vue - -This sample shows how to integrate the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) into a **Vue 3** application to scan a single barcode from video. - -## ✨ Features - -- Easy integration with pre-built UI -- BarcodeScanner instance created in a Vue component -- Scans one barcode at a time from video - -## 🚀 Quick Start - -### 1. Install Dependencies - -```bash -npm install -``` - -### 2. Run the App - -```bash -npm run dev -``` - -Then open http://localhost:5173/ to view the sample app. - -## 📌 Customization - -Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). - -## 📄 Support - -If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/vue/scan-using-rtu-api/index.html b/frameworks/vue/scan-using-rtu-api/index.html deleted file mode 100644 index 6f337734..00000000 --- a/frameworks/vue/scan-using-rtu-api/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera) - - -
- - - diff --git a/frameworks/vue/scan-using-rtu-api/package.json b/frameworks/vue/scan-using-rtu-api/package.json deleted file mode 100644 index 3c209647..00000000 --- a/frameworks/vue/scan-using-rtu-api/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "dbr-vue", - "private": true, - "version": "0.0.0", - "type": "module", - "scripts": { - "dev": "vite", - "build": "vue-tsc -b && vite build", - "preview": "vite preview" - }, - "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.2.4000", - "vue": "^3.5.18" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^6.0.1", - "@vue/tsconfig": "^0.7.0", - "typescript": "~5.8.3", - "vite": "^7.1.2", - "vue-tsc": "^3.0.5" - } -} diff --git a/frameworks/vue/scan-using-rtu-api/src/App.vue b/frameworks/vue/scan-using-rtu-api/src/App.vue deleted file mode 100644 index 4842b0fd..00000000 --- a/frameworks/vue/scan-using-rtu-api/src/App.vue +++ /dev/null @@ -1,61 +0,0 @@ - - - diff --git a/frameworks/vue/scan-using-rtu-api/src/main.ts b/frameworks/vue/scan-using-rtu-api/src/main.ts deleted file mode 100644 index 01433bca..00000000 --- a/frameworks/vue/scan-using-rtu-api/src/main.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') diff --git a/frameworks/vue/scan-using-rtu-api/src/vite-env.d.ts b/frameworks/vue/scan-using-rtu-api/src/vite-env.d.ts deleted file mode 100644 index 11f02fe2..00000000 --- a/frameworks/vue/scan-using-rtu-api/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/frameworks/vue/scan-using-rtu-api/tsconfig.app.json b/frameworks/vue/scan-using-rtu-api/tsconfig.app.json deleted file mode 100644 index 3dbbc453..00000000 --- a/frameworks/vue/scan-using-rtu-api/tsconfig.app.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "extends": "@vue/tsconfig/tsconfig.dom.json", - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "erasableSyntaxOnly": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] -} diff --git a/frameworks/vue/scan-using-rtu-api/tsconfig.json b/frameworks/vue/scan-using-rtu-api/tsconfig.json deleted file mode 100644 index 1ffef600..00000000 --- a/frameworks/vue/scan-using-rtu-api/tsconfig.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "files": [], - "references": [ - { "path": "./tsconfig.app.json" }, - { "path": "./tsconfig.node.json" } - ] -} diff --git a/frameworks/vue/scan-using-rtu-api/tsconfig.node.json b/frameworks/vue/scan-using-rtu-api/tsconfig.node.json deleted file mode 100644 index f85a3990..00000000 --- a/frameworks/vue/scan-using-rtu-api/tsconfig.node.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "compilerOptions": { - "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", - "target": "ES2023", - "lib": ["ES2023"], - "module": "ESNext", - "skipLibCheck": true, - - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "verbatimModuleSyntax": true, - "moduleDetection": "force", - "noEmit": true, - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "erasableSyntaxOnly": true, - "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true - }, - "include": ["vite.config.ts"] -} diff --git a/frameworks/vue/scan-using-rtu-api/vite.config.ts b/frameworks/vue/scan-using-rtu-api/vite.config.ts deleted file mode 100644 index bbcf80cc..00000000 --- a/frameworks/vue/scan-using-rtu-api/vite.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' - -// https://vite.dev/config/ -export default defineConfig({ - plugins: [vue()], -}) diff --git a/frameworks/vue/scan-using-foundational-api/src/App.vue b/frameworks/vue/src/App.vue similarity index 98% rename from frameworks/vue/scan-using-foundational-api/src/App.vue rename to frameworks/vue/src/App.vue index d51c0d57..752b1e44 100644 --- a/frameworks/vue/scan-using-foundational-api/src/App.vue +++ b/frameworks/vue/src/App.vue @@ -42,6 +42,7 @@ const mode: Ref = ref("video"); .buttons-container { width: 30%; margin: 20px auto; + text-align: center; } .buttons-container button { diff --git a/frameworks/vue/scan-using-foundational-api/src/assets/logo.svg b/frameworks/vue/src/assets/logo.svg similarity index 100% rename from frameworks/vue/scan-using-foundational-api/src/assets/logo.svg rename to frameworks/vue/src/assets/logo.svg diff --git a/frameworks/vue/scan-using-foundational-api/src/assets/main.css b/frameworks/vue/src/assets/main.css similarity index 72% rename from frameworks/vue/scan-using-foundational-api/src/assets/main.css rename to frameworks/vue/src/assets/main.css index 77f7db1b..cca57b36 100644 --- a/frameworks/vue/scan-using-foundational-api/src/assets/main.css +++ b/frameworks/vue/src/assets/main.css @@ -2,5 +2,4 @@ margin: 0; padding: 0; box-sizing: border-box; - text-align: center; } diff --git a/frameworks/vue/scan-using-foundational-api/src/components/ImageCapture.vue b/frameworks/vue/src/components/ImageCapture.vue similarity index 99% rename from frameworks/vue/scan-using-foundational-api/src/components/ImageCapture.vue rename to frameworks/vue/src/components/ImageCapture.vue index f0b9fe23..e01c672e 100644 --- a/frameworks/vue/scan-using-foundational-api/src/components/ImageCapture.vue +++ b/frameworks/vue/src/components/ImageCapture.vue @@ -83,5 +83,6 @@ onBeforeUnmount(async () => { margin-top: 20px; height: 100%; white-space: pre-wrap; + text-align: center; } \ No newline at end of file diff --git a/frameworks/vue/scan-using-foundational-api/src/components/VideoCapture.vue b/frameworks/vue/src/components/VideoCapture.vue similarity index 96% rename from frameworks/vue/scan-using-foundational-api/src/components/VideoCapture.vue rename to frameworks/vue/src/components/VideoCapture.vue index cab91598..c0804d0f 100644 --- a/frameworks/vue/scan-using-foundational-api/src/components/VideoCapture.vue +++ b/frameworks/vue/src/components/VideoCapture.vue @@ -37,7 +37,7 @@ onMounted(async () => { cvRouter.setInput(cameraEnhancer); // Define a callback for results. - cvRouter.addResultReceiver({ + await cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; @@ -95,7 +95,7 @@ onBeforeUnmount(async () => {

- Results: +
Results:
{{ resultText }}
@@ -106,5 +106,6 @@ onBeforeUnmount(async () => { height: 10vh; overflow: auto; white-space: pre-wrap; + text-align: center; } \ No newline at end of file diff --git a/frameworks/vue/scan-using-foundational-api/src/dynamsoft.config.ts b/frameworks/vue/src/dynamsoft.config.ts similarity index 94% rename from frameworks/vue/scan-using-foundational-api/src/dynamsoft.config.ts rename to frameworks/vue/src/dynamsoft.config.ts index b25d65cb..e54a421d 100644 --- a/frameworks/vue/scan-using-foundational-api/src/dynamsoft.config.ts +++ b/frameworks/vue/src/dynamsoft.config.ts @@ -12,7 +12,7 @@ LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", { execute /** * 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. + * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.4.2000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. * LICENSE ALERT - THE END */ diff --git a/frameworks/vue/scan-using-foundational-api/src/main.ts b/frameworks/vue/src/main.ts similarity index 100% rename from frameworks/vue/scan-using-foundational-api/src/main.ts rename to frameworks/vue/src/main.ts diff --git a/frameworks/vue/scan-using-foundational-api/tsconfig.config.json b/frameworks/vue/tsconfig.config.json similarity index 100% rename from frameworks/vue/scan-using-foundational-api/tsconfig.config.json rename to frameworks/vue/tsconfig.config.json diff --git a/frameworks/vue/scan-using-foundational-api/tsconfig.json b/frameworks/vue/tsconfig.json similarity index 100% rename from frameworks/vue/scan-using-foundational-api/tsconfig.json rename to frameworks/vue/tsconfig.json diff --git a/frameworks/vue/scan-using-foundational-api/vite.config.ts b/frameworks/vue/vite.config.ts similarity index 100% rename from frameworks/vue/scan-using-foundational-api/vite.config.ts rename to frameworks/vue/vite.config.ts diff --git a/frameworks/webview/README.md b/frameworks/webview/README.md deleted file mode 100644 index 5a761c48..00000000 --- a/frameworks/webview/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# WebView samples - -This directory contains WebView examples demonstrating how to use the Dynamsoft Barcode Reader inside native WebView-based apps (Android/iOS). - -**Included examples** - -- scan-using-foundational-api/ — WebView project with native wrappers and HTML demo. -- scan-using-rtu-api/ — WebView RTU example. - -## Quick start - -1. Change to a subexample directory, e.g.: - - ```bash - cd scan-using-foundational-api - ``` - -2. Follow the subexample README for platform-specific setup (open Android Studio/Xcode or run provided scripts). - -## Notes - -- Native build environments are required for mobile platform testing. See subexample README for details. -- See the repository root README.md for general usage and license \ No newline at end of file diff --git a/frameworks/webview/scan-using-foundational-api/android/.gitignore b/frameworks/webview/android/.gitignore similarity index 100% rename from frameworks/webview/scan-using-foundational-api/android/.gitignore rename to frameworks/webview/android/.gitignore diff --git a/frameworks/webview/scan-using-foundational-api/android/README.md b/frameworks/webview/android/README.md similarity index 100% rename from frameworks/webview/scan-using-foundational-api/android/README.md rename to frameworks/webview/android/README.md diff --git a/frameworks/webview/scan-using-foundational-api/android/app/.gitignore b/frameworks/webview/android/app/.gitignore similarity index 100% rename from frameworks/webview/scan-using-foundational-api/android/app/.gitignore rename to frameworks/webview/android/app/.gitignore diff --git a/frameworks/webview/scan-using-foundational-api/android/app/build.gradle b/frameworks/webview/android/app/build.gradle similarity index 100% rename from frameworks/webview/scan-using-foundational-api/android/app/build.gradle rename to frameworks/webview/android/app/build.gradle diff --git a/frameworks/webview/scan-using-foundational-api/android/app/proguard-rules.pro b/frameworks/webview/android/app/proguard-rules.pro similarity index 100% rename from frameworks/webview/scan-using-foundational-api/android/app/proguard-rules.pro rename to frameworks/webview/android/app/proguard-rules.pro diff --git a/frameworks/webview/scan-using-foundational-api/android/app/src/main/AndroidManifest.xml b/frameworks/webview/android/app/src/main/AndroidManifest.xml similarity index 100% rename from frameworks/webview/scan-using-foundational-api/android/app/src/main/AndroidManifest.xml rename to frameworks/webview/android/app/src/main/AndroidManifest.xml diff --git a/frameworks/webview/scan-using-foundational-api/android/app/src/main/assets/decodeBarcodeInVideo.html b/frameworks/webview/android/app/src/main/assets/decodeBarcodeInVideo.html similarity index 91% rename from frameworks/webview/scan-using-foundational-api/android/app/src/main/assets/decodeBarcodeInVideo.html rename to frameworks/webview/android/app/src/main/assets/decodeBarcodeInVideo.html index b5bb53d7..a0a527bc 100644 --- a/frameworks/webview/scan-using-foundational-api/android/app/src/main/assets/decodeBarcodeInVideo.html +++ b/frameworks/webview/android/app/src/main/assets/decodeBarcodeInVideo.html @@ -5,7 +5,6 @@ - Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera) @@ -14,7 +13,7 @@

Hello World (Decode via Camera)

Results:
- + + - - - - - - - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt b/frameworks/webview/scan-using-rtu-api/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt deleted file mode 100644 index 8ecaf703..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/java/com/dynamsoft/dbrjswebview/MainActivity.kt +++ /dev/null @@ -1,105 +0,0 @@ -package com.dynamsoft.dbrjswebview - -import android.Manifest -import android.annotation.SuppressLint -import android.content.pm.PackageManager -import android.net.Uri -import androidx.appcompat.app.AppCompatActivity -import android.os.Bundle -import android.webkit.* -import androidx.activity.result.contract.ActivityResultContracts -import androidx.annotation.RequiresApi -import androidx.core.content.ContextCompat -import androidx.webkit.WebViewAssetLoader -import androidx.webkit.WebViewClientCompat - -class MainActivity : AppCompatActivity() { - @SuppressLint("SetJavaScriptEnabled") - override fun onCreate(savedInstanceState: Bundle?) { - super.onCreate(savedInstanceState) - setContentView(R.layout.activity_main) - - val myWebView: WebView = findViewById(R.id.webview) - myWebView.settings.javaScriptEnabled = true - myWebView.settings.mediaPlaybackRequiresUserGesture = false - myWebView.settings.domStorageEnabled = true - - myWebView.webViewClient = MyWebViewClient() - myWebView.webChromeClient = MyWebChromeClient() - - myWebView.loadUrl("https://appassets.androidplatform.net/assets/decodeBarcodeInVideo.html") - } - - // Warning: If you use online url, you don't need `LocalContentWebViewClient` - // Refer: https://developer.android.com/develop/ui/views/layout/webapps/load-local-content?hl=en - private inner class MyWebViewClient : WebViewClientCompat() { - - private val assetLoader = WebViewAssetLoader.Builder() - .addPathHandler("/assets/", WebViewAssetLoader.AssetsPathHandler(this@MainActivity)) - .build() - - @RequiresApi(21) - override fun shouldInterceptRequest( - view: WebView, - request: WebResourceRequest - ): WebResourceResponse? { - return assetLoader.shouldInterceptRequest(request.url) - } - - // to support API < 21 - @Deprecated("Deprecated in Java") - override fun shouldInterceptRequest( - view: WebView, - url: String - ): WebResourceResponse? { - return assetLoader.shouldInterceptRequest(Uri.parse(url)) - } - } - - var cameraPermissionReq: PermissionRequest? = null - private inner class MyWebChromeClient : WebChromeClient() { - @RequiresApi(21) - override fun onPermissionRequest(request: PermissionRequest) { - if(request.resources.contains(PermissionRequest.RESOURCE_VIDEO_CAPTURE)){ - // Refer: https://developer.android.com/training/permissions/requesting - if(ContextCompat.checkSelfPermission( - this@MainActivity, - Manifest.permission.CAMERA - ) == PackageManager.PERMISSION_GRANTED){ - // You can use the API that requires the permission. - request.grant(arrayOf(PermissionRequest.RESOURCE_VIDEO_CAPTURE)) - }else{ - // You can directly ask for the permission. - // The registered ActivityResultCallback gets the result of this request. - this@MainActivity.cameraPermissionReq = request - requestCameraPermissionLauncher.launch(Manifest.permission.CAMERA) - } - }else{ - request.deny() - } - } - } - - // Refer: https://developer.android.com/training/permissions/requesting - @RequiresApi(21) - val requestCameraPermissionLauncher = registerForActivityResult( - ActivityResultContracts.RequestPermission() - ) { isGranted: Boolean -> - // Refer: https://www.dynamsoft.com/codepool/use-barcode-scanner-in-android-webview.html#set-up-webview - this@MainActivity.runOnUiThread { - if (isGranted) { - // Permission is granted. Continue the action or workflow in your - // app. - cameraPermissionReq?.grant(arrayOf(PermissionRequest.RESOURCE_VIDEO_CAPTURE)) - } else { - // Explain to the user that the feature is unavailable because the - // feature requires a permission that the user has denied. At the - // same time, respect the user's decision. Don't link to system - // settings in an effort to convince the user to change their - // decision. - cameraPermissionReq?.deny() - } - cameraPermissionReq = null - } - } -} \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml deleted file mode 100644 index 2b068d11..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/drawable/ic_launcher_background.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/drawable/ic_launcher_background.xml deleted file mode 100644 index 07d5da9c..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/drawable/ic_launcher_background.xml +++ /dev/null @@ -1,170 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/layout/activity_main.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/layout/activity_main.xml deleted file mode 100644 index 7b58479b..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/layout/activity_main.xml +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml deleted file mode 100644 index eca70cfe..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml deleted file mode 100644 index eca70cfe..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml deleted file mode 100644 index 6f3b755b..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-anydpi-v33/ic_launcher.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp deleted file mode 100644 index c209e78e..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp deleted file mode 100644 index b2dfe3d1..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp deleted file mode 100644 index 4f0f1d64..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp deleted file mode 100644 index 62b611da..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp deleted file mode 100644 index 948a3070..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp deleted file mode 100644 index 1b9a6956..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp deleted file mode 100644 index 28d4b77f..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp deleted file mode 100644 index 9287f508..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp deleted file mode 100644 index aa7d6427..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp deleted file mode 100644 index 9126ae37..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values-night/themes.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values-night/themes.xml deleted file mode 100644 index 77300351..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values-night/themes.xml +++ /dev/null @@ -1,16 +0,0 @@ - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/colors.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/colors.xml deleted file mode 100644 index f8c6127d..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/colors.xml +++ /dev/null @@ -1,10 +0,0 @@ - - - #FFBB86FC - #FF6200EE - #FF3700B3 - #FF03DAC5 - #FF018786 - #FF000000 - #FFFFFFFF - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/strings.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/strings.xml deleted file mode 100644 index 5d77158e..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/strings.xml +++ /dev/null @@ -1,3 +0,0 @@ - - Dynamsoft Barcode - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/themes.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/themes.xml deleted file mode 100644 index e2ed77aa..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/values/themes.xml +++ /dev/null @@ -1,16 +0,0 @@ - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/xml/backup_rules.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/xml/backup_rules.xml deleted file mode 100644 index fa0f996d..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/xml/backup_rules.xml +++ /dev/null @@ -1,13 +0,0 @@ - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/xml/data_extraction_rules.xml b/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/xml/data_extraction_rules.xml deleted file mode 100644 index 9ee9997b..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/app/src/main/res/xml/data_extraction_rules.xml +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/build.gradle b/frameworks/webview/scan-using-rtu-api/android/build.gradle deleted file mode 100644 index ab2b874f..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/build.gradle +++ /dev/null @@ -1,6 +0,0 @@ -// Top-level build file where you can add configuration options common to all sub-projects/modules. -plugins { - id 'com.android.application' version '7.4.2' apply false - id 'com.android.library' version '7.4.2' apply false - id 'org.jetbrains.kotlin.android' version '1.8.0' apply false -} \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/gradle.properties b/frameworks/webview/scan-using-rtu-api/android/gradle.properties deleted file mode 100644 index 3c5031eb..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/gradle.properties +++ /dev/null @@ -1,23 +0,0 @@ -# Project-wide Gradle settings. -# IDE (e.g. Android Studio) users: -# Gradle settings configured through the IDE *will override* -# any settings specified in this file. -# For more details on how to configure your build environment visit -# http://www.gradle.org/docs/current/userguide/build_environment.html -# Specifies the JVM arguments used for the daemon process. -# The setting is particularly useful for tweaking memory settings. -org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8 -# When configured, Gradle will run in incubating parallel mode. -# This option should only be used with decoupled projects. More details, visit -# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects -# org.gradle.parallel=true -# AndroidX package structure to make it clearer which packages are bundled with the -# Android operating system, and which are packaged with your app's APK -# https://developer.android.com/topic/libraries/support-library/androidx-rn -android.useAndroidX=true -# Kotlin code style for this project: "official" or "obsolete": -kotlin.code.style=official -# Enables namespacing of each library's R class so that its R class includes only the -# resources declared in the library itself and none from the library's dependencies, -# thereby reducing the size of the R class for that library -android.nonTransitiveRClass=true \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.jar b/frameworks/webview/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.jar deleted file mode 100644 index e708b1c0..00000000 Binary files a/frameworks/webview/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.jar and /dev/null differ diff --git a/frameworks/webview/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.properties b/frameworks/webview/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.properties deleted file mode 100644 index dea1f353..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/gradle/wrapper/gradle-wrapper.properties +++ /dev/null @@ -1,6 +0,0 @@ -#Thu Apr 13 17:46:19 CST 2023 -distributionBase=GRADLE_USER_HOME -distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-bin.zip -distributionPath=wrapper/dists -zipStorePath=wrapper/dists -zipStoreBase=GRADLE_USER_HOME diff --git a/frameworks/webview/scan-using-rtu-api/android/gradlew b/frameworks/webview/scan-using-rtu-api/android/gradlew deleted file mode 100644 index 4f906e0c..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/gradlew +++ /dev/null @@ -1,185 +0,0 @@ -#!/usr/bin/env sh - -# -# Copyright 2015 the original author or authors. -# -# Licensed under the Apache License, Version 2.0 (the "License"); -# you may not use this file except in compliance with the License. -# You may obtain a copy of the License at -# -# https://www.apache.org/licenses/LICENSE-2.0 -# -# Unless required by applicable law or agreed to in writing, software -# distributed under the License is distributed on an "AS IS" BASIS, -# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -# See the License for the specific language governing permissions and -# limitations under the License. -# - -############################################################################## -## -## Gradle start up script for UN*X -## -############################################################################## - -# Attempt to set APP_HOME -# Resolve links: $0 may be a link -PRG="$0" -# Need this for relative symlinks. -while [ -h "$PRG" ] ; do - ls=`ls -ld "$PRG"` - link=`expr "$ls" : '.*-> \(.*\)$'` - if expr "$link" : '/.*' > /dev/null; then - PRG="$link" - else - PRG=`dirname "$PRG"`"/$link" - fi -done -SAVED="`pwd`" -cd "`dirname \"$PRG\"`/" >/dev/null -APP_HOME="`pwd -P`" -cd "$SAVED" >/dev/null - -APP_NAME="Gradle" -APP_BASE_NAME=`basename "$0"` - -# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. -DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' - -# Use the maximum available, or set MAX_FD != -1 to use that value. -MAX_FD="maximum" - -warn () { - echo "$*" -} - -die () { - echo - echo "$*" - echo - exit 1 -} - -# OS specific support (must be 'true' or 'false'). -cygwin=false -msys=false -darwin=false -nonstop=false -case "`uname`" in - CYGWIN* ) - cygwin=true - ;; - Darwin* ) - darwin=true - ;; - MINGW* ) - msys=true - ;; - NONSTOP* ) - nonstop=true - ;; -esac - -CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar - - -# Determine the Java command to use to start the JVM. -if [ -n "$JAVA_HOME" ] ; then - if [ -x "$JAVA_HOME/jre/sh/java" ] ; then - # IBM's JDK on AIX uses strange locations for the executables - JAVACMD="$JAVA_HOME/jre/sh/java" - else - JAVACMD="$JAVA_HOME/bin/java" - fi - if [ ! -x "$JAVACMD" ] ; then - die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME - -Please set the JAVA_HOME variable in your environment to match the -location of your Java installation." - fi -else - JAVACMD="java" - which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. - -Please set the JAVA_HOME variable in your environment to match the -location of your Java installation." -fi - -# Increase the maximum file descriptors if we can. -if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then - MAX_FD_LIMIT=`ulimit -H -n` - if [ $? -eq 0 ] ; then - if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then - MAX_FD="$MAX_FD_LIMIT" - fi - ulimit -n $MAX_FD - if [ $? -ne 0 ] ; then - warn "Could not set maximum file descriptor limit: $MAX_FD" - fi - else - warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" - fi -fi - -# For Darwin, add options to specify how the application appears in the dock -if $darwin; then - GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" -fi - -# For Cygwin or MSYS, switch paths to Windows format before running java -if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then - APP_HOME=`cygpath --path --mixed "$APP_HOME"` - CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` - - JAVACMD=`cygpath --unix "$JAVACMD"` - - # We build the pattern for arguments to be converted via cygpath - ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` - SEP="" - for dir in $ROOTDIRSRAW ; do - ROOTDIRS="$ROOTDIRS$SEP$dir" - SEP="|" - done - OURCYGPATTERN="(^($ROOTDIRS))" - # Add a user-defined pattern to the cygpath arguments - if [ "$GRADLE_CYGPATTERN" != "" ] ; then - OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" - fi - # Now convert the arguments - kludge to limit ourselves to /bin/sh - i=0 - for arg in "$@" ; do - CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` - CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option - - if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition - eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` - else - eval `echo args$i`="\"$arg\"" - fi - i=`expr $i + 1` - done - case $i in - 0) set -- ;; - 1) set -- "$args0" ;; - 2) set -- "$args0" "$args1" ;; - 3) set -- "$args0" "$args1" "$args2" ;; - 4) set -- "$args0" "$args1" "$args2" "$args3" ;; - 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; - 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; - 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; - 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; - 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; - esac -fi - -# Escape application args -save () { - for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done - echo " " -} -APP_ARGS=`save "$@"` - -# Collect all arguments for the java command, following the shell quoting and substitution rules -eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" - -exec "$JAVACMD" "$@" diff --git a/frameworks/webview/scan-using-rtu-api/android/gradlew.bat b/frameworks/webview/scan-using-rtu-api/android/gradlew.bat deleted file mode 100644 index 107acd32..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/gradlew.bat +++ /dev/null @@ -1,89 +0,0 @@ -@rem -@rem Copyright 2015 the original author or authors. -@rem -@rem Licensed under the Apache License, Version 2.0 (the "License"); -@rem you may not use this file except in compliance with the License. -@rem You may obtain a copy of the License at -@rem -@rem https://www.apache.org/licenses/LICENSE-2.0 -@rem -@rem Unless required by applicable law or agreed to in writing, software -@rem distributed under the License is distributed on an "AS IS" BASIS, -@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -@rem See the License for the specific language governing permissions and -@rem limitations under the License. -@rem - -@if "%DEBUG%" == "" @echo off -@rem ########################################################################## -@rem -@rem Gradle startup script for Windows -@rem -@rem ########################################################################## - -@rem Set local scope for the variables with windows NT shell -if "%OS%"=="Windows_NT" setlocal - -set DIRNAME=%~dp0 -if "%DIRNAME%" == "" set DIRNAME=. -set APP_BASE_NAME=%~n0 -set APP_HOME=%DIRNAME% - -@rem Resolve any "." and ".." in APP_HOME to make it shorter. -for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi - -@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. -set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" - -@rem Find java.exe -if defined JAVA_HOME goto findJavaFromJavaHome - -set JAVA_EXE=java.exe -%JAVA_EXE% -version >NUL 2>&1 -if "%ERRORLEVEL%" == "0" goto execute - -echo. -echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. -echo. -echo Please set the JAVA_HOME variable in your environment to match the -echo location of your Java installation. - -goto fail - -:findJavaFromJavaHome -set JAVA_HOME=%JAVA_HOME:"=% -set JAVA_EXE=%JAVA_HOME%/bin/java.exe - -if exist "%JAVA_EXE%" goto execute - -echo. -echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% -echo. -echo Please set the JAVA_HOME variable in your environment to match the -echo location of your Java installation. - -goto fail - -:execute -@rem Setup the command line - -set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar - - -@rem Execute Gradle -"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* - -:end -@rem End local scope for the variables with windows NT shell -if "%ERRORLEVEL%"=="0" goto mainEnd - -:fail -rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of -rem the _cmd.exe /c_ return code! -if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 -exit /b 1 - -:mainEnd -if "%OS%"=="Windows_NT" endlocal - -:omega diff --git a/frameworks/webview/scan-using-rtu-api/android/settings.gradle b/frameworks/webview/scan-using-rtu-api/android/settings.gradle deleted file mode 100644 index e5f9d85d..00000000 --- a/frameworks/webview/scan-using-rtu-api/android/settings.gradle +++ /dev/null @@ -1,16 +0,0 @@ -pluginManagement { - repositories { - google() - mavenCentral() - gradlePluginPortal() - } -} -dependencyResolutionManagement { - repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) - repositories { - google() - mavenCentral() - } -} -rootProject.name = "Dynamsoft Barcode" -include ':app' diff --git a/frameworks/webview/scan-using-rtu-api/ios/.gitignore b/frameworks/webview/scan-using-rtu-api/ios/.gitignore deleted file mode 100644 index ba1ff083..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/.gitignore +++ /dev/null @@ -1,90 +0,0 @@ -# Xcode -# -# gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore - -## User settings -xcuserdata/ - -## compatibility with Xcode 8 and earlier (ignoring not required starting Xcode 9) -*.xcscmblueprint -*.xccheckout - -## compatibility with Xcode 3 and earlier (ignoring not required starting Xcode 4) -build/ -DerivedData/ -*.moved-aside -*.pbxuser -!default.pbxuser -*.mode1v3 -!default.mode1v3 -*.mode2v3 -!default.mode2v3 -*.perspectivev3 -!default.perspectivev3 - -## Obj-C/Swift specific -*.hmap - -## App packaging -*.ipa -*.dSYM.zip -*.dSYM - -## Playgrounds -timeline.xctimeline -playground.xcworkspace - -# Swift Package Manager -# -# Add this line if you want to avoid checking in source code from Swift Package Manager dependencies. -# Packages/ -# Package.pins -# Package.resolved -# *.xcodeproj -# -# Xcode automatically generates this directory with a .xcworkspacedata file and xcuserdata -# hence it is not needed unless you have added a package configuration file to your project -# .swiftpm - -.build/ - -# CocoaPods -# -# We recommend against adding the Pods directory to your .gitignore. However -# you should judge for yourself, the pros and cons are mentioned at: -# https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control -# -# Pods/ -# -# Add this line if you want to avoid checking in source code from the Xcode workspace -# *.xcworkspace - -# Carthage -# -# Add this line if you want to avoid checking in source code from Carthage dependencies. -# Carthage/Checkouts - -Carthage/Build/ - -# Accio dependency management -Dependencies/ -.accio/ - -# fastlane -# -# It is recommended to not store the screenshots in the git repo. -# Instead, use fastlane to re-generate the screenshots whenever they are needed. -# For more information about the recommended setup visit: -# https://docs.fastlane.tools/best-practices/source-control/#source-control - -fastlane/report.xml -fastlane/Preview.html -fastlane/screenshots/**/*.png -fastlane/test_output - -# Code Injection -# -# After new code Injection tools there's a generated folder /iOSInjectionProject -# https://github.com/johnno1962/injectionforxcode - -iOSInjectionProject/ \ No newline at end of file diff --git a/frameworks/webview/scan-using-rtu-api/ios/README.md b/frameworks/webview/scan-using-rtu-api/ios/README.md deleted file mode 100644 index 392f84cb..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/README.md +++ /dev/null @@ -1,141 +0,0 @@ -# iOS WKWebView - Scan Using RTU API (BarcodeScanner) - -This sample demonstrates how to integrate **Dynamsoft Barcode Reader JavaScript SDK** into an iOS WKWebView application using the **RTU (Ready-To-Use) API** for rapid, one-line integration. - -## Overview - -The RTU API (`BarcodeScanner`) provides the fastest way to add barcode scanning to your app: -- ✅ **One-line integration** - Launch a full scanner with a single API call -- ✅ **Built-in UI** - Pre-designed camera view with scan region highlighting -- ✅ **Simple configuration** - Customize behavior through intuitive config objects -- ✅ **Production-ready** - Optimized for common scanning scenarios - -This sample uses: -- **WKWebView** for rendering the JavaScript-based barcode scanner -- **Dynamsoft Barcode Reader v11.2.4000** RTU API (BarcodeScanner) -- Native iOS permissions handling for camera access -- Swift for iOS implementation - -## Key Features - -### 1. Camera Permission Handling - -Camera permission is declared in `Info.plist`: - -```xml -NSCameraUsageDescription -Decoding barcodes from video needs to access your camera. -``` - -### 2. One-Line RTU API Integration - -The HTML file (`decodeBarcodeInVideo.html`) demonstrates the simplest integration possible: - -```javascript -// Configure the scanner -const config = { - license: "YOUR-LICENSE-KEY", - container: document.querySelector(".barcode-scanner-view"), - // Optional: Add custom configuration - // showUploadImageButton: true, - // scannerViewConfig: { showFlashButton: true } -}; - -// Create and launch the scanner in one call -const barcodeScanner = new Dynamsoft.BarcodeScanner(config); -barcodeScanner.launch().then((result) => { - // Handle the scanned barcode - alert(result.barcodeResults[0].text); -}); -``` - -That's it! The SDK handles: -- Camera initialization and permissions -- UI rendering with scan region overlay -- Barcode detection and decoding -- Result presentation - -## How to Run - -1. **Open the Project** - ```bash - cd ios - open dbrjswebview.xcodeproj - ``` - -2. **Configure Signing** - - Select your project in Xcode - - Go to **Signing & Capabilities** - - Select your development team - -3. **Build and Run** - - Connect an iOS device (camera doesn't work in simulator for WebView) - - Select your device as the run destination - - Click **Run** (⌘R) - - Grant camera permission when prompted - -4. **Test the Scanner** - - Point the camera at a barcode - - The scanner will automatically detect and decode it - - Result will be displayed in an alert - -## API Reference - -- [BarcodeScanner API Reference](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html) -- [BarcodeScanner User Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html) - -## When to Use RTU vs Foundational API - -**Use RTU API (BarcodeScanner) when:** -- ✅ You need a quick, working solution -- ✅ Default UI and behavior meet your needs -- ✅ You're building a standard scanning application - -**Use [Foundational API](../../scan-using-foundational-api/ios/) when:** -- 🔧 You're building complex, custom workflows -- 🔧 You need to integrate with custom camera systems - -## License - -This sample uses a Dynamsoft trial license. To use in production: -1. Visit the [Customer Portal](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=sampleReadme) to obtain a license -2. Replace the license key in `decodeBarcodeInVideo.html`: - ```javascript - const config = { - license: "YOUR-LICENSE-KEY", // Replace here - // ... - }; - ``` - -## Troubleshooting - -**Camera not opening:** -- Ensure camera permission is granted in device settings -- Check iOS version (14.5+ required for camera in WKWebView) -- Verify you're testing on a physical device (not simulator) - -**WKWebView blank screen:** -- Enable JavaScript in WKWebView configuration -- Check Safari Developer Console for JavaScript errors -- Enable Web Inspector: Settings → Safari → Advanced → Web Inspector - -**Permission denied:** -- Verify `NSCameraUsageDescription` is set in `Info.plist` -- Reset app permissions: Settings → Privacy → Camera - -**Scanner not responding:** -- Verify license key is valid and not expired -- Check network connectivity (for license validation) - -## Support - -Need help? Contact Dynamsoft support: -- 📧 Email: [support@dynamsoft.com](mailto:support@dynamsoft.com) -- 💬 Online: [Contact Form](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme) -- 📚 Documentation: [Dynamsoft Barcode Reader Docs](https://www.dynamsoft.com/barcode-reader/docs/web/) - -## Related Samples - -- [Android WebView (RTU API)](../android/) - Android version of this sample -- [iOS WKWebView (Foundational API)](../../scan-using-foundational-api/ios/) - Full control version -- [Capacitor Sample](../../../capacitor/) - Cross-platform hybrid framework approach diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.pbxproj b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.pbxproj deleted file mode 100644 index 7f7ce301..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.pbxproj +++ /dev/null @@ -1,373 +0,0 @@ -// !$*UTF8*$! -{ - archiveVersion = 1; - classes = { - }; - objectVersion = 56; - objects = { - -/* Begin PBXBuildFile section */ - 68309E9F29F28D950016A358 /* html in Resources */ = {isa = PBXBuildFile; fileRef = 68309E9E29F28D950016A358 /* html */; }; - 68A0A94529EE855E00DC7D57 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68A0A94429EE855E00DC7D57 /* AppDelegate.swift */; }; - 68A0A94729EE855E00DC7D57 /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68A0A94629EE855E00DC7D57 /* SceneDelegate.swift */; }; - 68A0A94929EE855E00DC7D57 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68A0A94829EE855E00DC7D57 /* ViewController.swift */; }; - 68A0A94C29EE855E00DC7D57 /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 68A0A94A29EE855E00DC7D57 /* Main.storyboard */; }; - 68A0A94E29EE856100DC7D57 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 68A0A94D29EE856100DC7D57 /* Assets.xcassets */; }; - 68A0A95129EE856100DC7D57 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 68A0A94F29EE856100DC7D57 /* LaunchScreen.storyboard */; }; -/* End PBXBuildFile section */ - -/* Begin PBXFileReference section */ - 68309E9E29F28D950016A358 /* html */ = {isa = PBXFileReference; lastKnownFileType = folder; path = html; sourceTree = ""; }; - 68A0A94129EE855E00DC7D57 /* dbrjswebview.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = dbrjswebview.app; sourceTree = BUILT_PRODUCTS_DIR; }; - 68A0A94429EE855E00DC7D57 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; - 68A0A94629EE855E00DC7D57 /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = ""; }; - 68A0A94829EE855E00DC7D57 /* ViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewController.swift; sourceTree = ""; }; - 68A0A94B29EE855E00DC7D57 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = ""; }; - 68A0A94D29EE856100DC7D57 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; - 68A0A95029EE856100DC7D57 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = ""; }; - 68A0A95229EE856100DC7D57 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; -/* End PBXFileReference section */ - -/* Begin PBXFrameworksBuildPhase section */ - 68A0A93E29EE855E00DC7D57 /* Frameworks */ = { - isa = PBXFrameworksBuildPhase; - buildActionMask = 2147483647; - files = ( - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXFrameworksBuildPhase section */ - -/* Begin PBXGroup section */ - 68A0A93829EE855E00DC7D57 = { - isa = PBXGroup; - children = ( - 68A0A94329EE855E00DC7D57 /* dbrjswebview */, - 68A0A94229EE855E00DC7D57 /* Products */, - ); - sourceTree = ""; - }; - 68A0A94229EE855E00DC7D57 /* Products */ = { - isa = PBXGroup; - children = ( - 68A0A94129EE855E00DC7D57 /* dbrjswebview.app */, - ); - name = Products; - sourceTree = ""; - }; - 68A0A94329EE855E00DC7D57 /* dbrjswebview */ = { - isa = PBXGroup; - children = ( - 68309E9E29F28D950016A358 /* html */, - 68A0A94429EE855E00DC7D57 /* AppDelegate.swift */, - 68A0A94629EE855E00DC7D57 /* SceneDelegate.swift */, - 68A0A94829EE855E00DC7D57 /* ViewController.swift */, - 68A0A94A29EE855E00DC7D57 /* Main.storyboard */, - 68A0A94D29EE856100DC7D57 /* Assets.xcassets */, - 68A0A94F29EE856100DC7D57 /* LaunchScreen.storyboard */, - 68A0A95229EE856100DC7D57 /* Info.plist */, - ); - path = dbrjswebview; - sourceTree = ""; - }; -/* End PBXGroup section */ - -/* Begin PBXNativeTarget section */ - 68A0A94029EE855E00DC7D57 /* dbrjswebview */ = { - isa = PBXNativeTarget; - buildConfigurationList = 68A0A95529EE856100DC7D57 /* Build configuration list for PBXNativeTarget "dbrjswebview" */; - buildPhases = ( - 68A0A93D29EE855E00DC7D57 /* Sources */, - 68A0A93E29EE855E00DC7D57 /* Frameworks */, - 68A0A93F29EE855E00DC7D57 /* Resources */, - ); - buildRules = ( - ); - dependencies = ( - ); - name = dbrjswebview; - productName = dbrjswebview; - productReference = 68A0A94129EE855E00DC7D57 /* dbrjswebview.app */; - productType = "com.apple.product-type.application"; - }; -/* End PBXNativeTarget section */ - -/* Begin PBXProject section */ - 68A0A93929EE855E00DC7D57 /* Project object */ = { - isa = PBXProject; - attributes = { - BuildIndependentTargetsInParallel = 1; - LastSwiftUpdateCheck = 1400; - LastUpgradeCheck = 1400; - TargetAttributes = { - 68A0A94029EE855E00DC7D57 = { - CreatedOnToolsVersion = 14.0.1; - }; - }; - }; - buildConfigurationList = 68A0A93C29EE855E00DC7D57 /* Build configuration list for PBXProject "dbrjswebview" */; - compatibilityVersion = "Xcode 14.0"; - developmentRegion = en; - hasScannedForEncodings = 0; - knownRegions = ( - en, - Base, - ); - mainGroup = 68A0A93829EE855E00DC7D57; - productRefGroup = 68A0A94229EE855E00DC7D57 /* Products */; - projectDirPath = ""; - projectRoot = ""; - targets = ( - 68A0A94029EE855E00DC7D57 /* dbrjswebview */, - ); - }; -/* End PBXProject section */ - -/* Begin PBXResourcesBuildPhase section */ - 68A0A93F29EE855E00DC7D57 /* Resources */ = { - isa = PBXResourcesBuildPhase; - buildActionMask = 2147483647; - files = ( - 68A0A95129EE856100DC7D57 /* LaunchScreen.storyboard in Resources */, - 68309E9F29F28D950016A358 /* html in Resources */, - 68A0A94E29EE856100DC7D57 /* Assets.xcassets in Resources */, - 68A0A94C29EE855E00DC7D57 /* Main.storyboard in Resources */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXResourcesBuildPhase section */ - -/* Begin PBXSourcesBuildPhase section */ - 68A0A93D29EE855E00DC7D57 /* Sources */ = { - isa = PBXSourcesBuildPhase; - buildActionMask = 2147483647; - files = ( - 68A0A94929EE855E00DC7D57 /* ViewController.swift in Sources */, - 68A0A94529EE855E00DC7D57 /* AppDelegate.swift in Sources */, - 68A0A94729EE855E00DC7D57 /* SceneDelegate.swift in Sources */, - ); - runOnlyForDeploymentPostprocessing = 0; - }; -/* End PBXSourcesBuildPhase section */ - -/* Begin PBXVariantGroup section */ - 68A0A94A29EE855E00DC7D57 /* Main.storyboard */ = { - isa = PBXVariantGroup; - children = ( - 68A0A94B29EE855E00DC7D57 /* Base */, - ); - name = Main.storyboard; - sourceTree = ""; - }; - 68A0A94F29EE856100DC7D57 /* LaunchScreen.storyboard */ = { - isa = PBXVariantGroup; - children = ( - 68A0A95029EE856100DC7D57 /* Base */, - ); - name = LaunchScreen.storyboard; - sourceTree = ""; - }; -/* End PBXVariantGroup section */ - -/* Begin XCBuildConfiguration section */ - 68A0A95329EE856100DC7D57 /* Debug */ = { - isa = XCBuildConfiguration; - buildSettings = { - ALWAYS_SEARCH_USER_PATHS = NO; - CLANG_ANALYZER_NONNULL = YES; - CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; - CLANG_CXX_LANGUAGE_STANDARD = "gnu++20"; - CLANG_ENABLE_MODULES = YES; - CLANG_ENABLE_OBJC_ARC = YES; - CLANG_ENABLE_OBJC_WEAK = YES; - CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; - CLANG_WARN_BOOL_CONVERSION = YES; - CLANG_WARN_COMMA = YES; - CLANG_WARN_CONSTANT_CONVERSION = YES; - CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; - CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; - CLANG_WARN_DOCUMENTATION_COMMENTS = YES; - CLANG_WARN_EMPTY_BODY = YES; - CLANG_WARN_ENUM_CONVERSION = YES; - CLANG_WARN_INFINITE_RECURSION = YES; - CLANG_WARN_INT_CONVERSION = YES; - CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; - CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; - CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; - CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; - CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; - CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; - CLANG_WARN_STRICT_PROTOTYPES = YES; - CLANG_WARN_SUSPICIOUS_MOVE = YES; - CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE; - CLANG_WARN_UNREACHABLE_CODE = YES; - CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; - COPY_PHASE_STRIP = NO; - DEBUG_INFORMATION_FORMAT = dwarf; - ENABLE_STRICT_OBJC_MSGSEND = YES; - ENABLE_TESTABILITY = YES; - GCC_C_LANGUAGE_STANDARD = gnu11; - GCC_DYNAMIC_NO_PIC = NO; - GCC_NO_COMMON_BLOCKS = YES; - GCC_OPTIMIZATION_LEVEL = 0; - GCC_PREPROCESSOR_DEFINITIONS = ( - "DEBUG=1", - "$(inherited)", - ); - GCC_WARN_64_TO_32_BIT_CONVERSION = YES; - GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; - GCC_WARN_UNDECLARED_SELECTOR = YES; - GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; - GCC_WARN_UNUSED_FUNCTION = YES; - GCC_WARN_UNUSED_VARIABLE = YES; - IPHONEOS_DEPLOYMENT_TARGET = 16.0; - MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE; - MTL_FAST_MATH = YES; - ONLY_ACTIVE_ARCH = YES; - SDKROOT = iphoneos; - SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG; - SWIFT_OPTIMIZATION_LEVEL = "-Onone"; - }; - name = Debug; - }; - 68A0A95429EE856100DC7D57 /* Release */ = { - isa = XCBuildConfiguration; - buildSettings = { - ALWAYS_SEARCH_USER_PATHS = NO; - CLANG_ANALYZER_NONNULL = YES; - CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; - CLANG_CXX_LANGUAGE_STANDARD = "gnu++20"; - CLANG_ENABLE_MODULES = YES; - CLANG_ENABLE_OBJC_ARC = YES; - CLANG_ENABLE_OBJC_WEAK = YES; - CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; - CLANG_WARN_BOOL_CONVERSION = YES; - CLANG_WARN_COMMA = YES; - CLANG_WARN_CONSTANT_CONVERSION = YES; - CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; - CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; - CLANG_WARN_DOCUMENTATION_COMMENTS = YES; - CLANG_WARN_EMPTY_BODY = YES; - CLANG_WARN_ENUM_CONVERSION = YES; - CLANG_WARN_INFINITE_RECURSION = YES; - CLANG_WARN_INT_CONVERSION = YES; - CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; - CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; - CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; - CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; - CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; - CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; - CLANG_WARN_STRICT_PROTOTYPES = YES; - CLANG_WARN_SUSPICIOUS_MOVE = YES; - CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE; - CLANG_WARN_UNREACHABLE_CODE = YES; - CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; - COPY_PHASE_STRIP = NO; - DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; - ENABLE_NS_ASSERTIONS = NO; - ENABLE_STRICT_OBJC_MSGSEND = YES; - GCC_C_LANGUAGE_STANDARD = gnu11; - GCC_NO_COMMON_BLOCKS = YES; - GCC_WARN_64_TO_32_BIT_CONVERSION = YES; - GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; - GCC_WARN_UNDECLARED_SELECTOR = YES; - GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; - GCC_WARN_UNUSED_FUNCTION = YES; - GCC_WARN_UNUSED_VARIABLE = YES; - IPHONEOS_DEPLOYMENT_TARGET = 16.0; - MTL_ENABLE_DEBUG_INFO = NO; - MTL_FAST_MATH = YES; - SDKROOT = iphoneos; - SWIFT_COMPILATION_MODE = wholemodule; - SWIFT_OPTIMIZATION_LEVEL = "-O"; - VALIDATE_PRODUCT = YES; - }; - name = Release; - }; - 68A0A95629EE856100DC7D57 /* Debug */ = { - isa = XCBuildConfiguration; - buildSettings = { - ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; - ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor; - CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 1; - DEVELOPMENT_TEAM = KK22Q4GV82; - GENERATE_INFOPLIST_FILE = YES; - INFOPLIST_FILE = dbrjswebview/Info.plist; - INFOPLIST_KEY_CFBundleDisplayName = DyBarcode; - INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES; - INFOPLIST_KEY_UILaunchStoryboardName = LaunchScreen; - INFOPLIST_KEY_UIMainStoryboardFile = Main; - INFOPLIST_KEY_UIStatusBarStyle = ""; - INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; - INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; - IPHONEOS_DEPLOYMENT_TARGET = 14.3; - LD_RUNPATH_SEARCH_PATHS = ( - "$(inherited)", - "@executable_path/Frameworks", - ); - MARKETING_VERSION = 1.0; - PRODUCT_BUNDLE_IDENTIFIER = com.dynamsoft.dbrjswebview; - PRODUCT_NAME = "$(TARGET_NAME)"; - SWIFT_EMIT_LOC_STRINGS = YES; - SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = "1,2"; - }; - name = Debug; - }; - 68A0A95729EE856100DC7D57 /* Release */ = { - isa = XCBuildConfiguration; - buildSettings = { - ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; - ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor; - CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 1; - DEVELOPMENT_TEAM = KK22Q4GV82; - GENERATE_INFOPLIST_FILE = YES; - INFOPLIST_FILE = dbrjswebview/Info.plist; - INFOPLIST_KEY_CFBundleDisplayName = DyBarcode; - INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES; - INFOPLIST_KEY_UILaunchStoryboardName = LaunchScreen; - INFOPLIST_KEY_UIMainStoryboardFile = Main; - INFOPLIST_KEY_UIStatusBarStyle = ""; - INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; - INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; - IPHONEOS_DEPLOYMENT_TARGET = 14.3; - LD_RUNPATH_SEARCH_PATHS = ( - "$(inherited)", - "@executable_path/Frameworks", - ); - MARKETING_VERSION = 1.0; - PRODUCT_BUNDLE_IDENTIFIER = com.dynamsoft.dbrjswebview; - PRODUCT_NAME = "$(TARGET_NAME)"; - SWIFT_EMIT_LOC_STRINGS = YES; - SWIFT_VERSION = 5.0; - TARGETED_DEVICE_FAMILY = "1,2"; - }; - name = Release; - }; -/* End XCBuildConfiguration section */ - -/* Begin XCConfigurationList section */ - 68A0A93C29EE855E00DC7D57 /* Build configuration list for PBXProject "dbrjswebview" */ = { - isa = XCConfigurationList; - buildConfigurations = ( - 68A0A95329EE856100DC7D57 /* Debug */, - 68A0A95429EE856100DC7D57 /* Release */, - ); - defaultConfigurationIsVisible = 0; - defaultConfigurationName = Release; - }; - 68A0A95529EE856100DC7D57 /* Build configuration list for PBXNativeTarget "dbrjswebview" */ = { - isa = XCConfigurationList; - buildConfigurations = ( - 68A0A95629EE856100DC7D57 /* Debug */, - 68A0A95729EE856100DC7D57 /* Release */, - ); - defaultConfigurationIsVisible = 0; - defaultConfigurationName = Release; - }; -/* End XCConfigurationList section */ - }; - rootObject = 68A0A93929EE855E00DC7D57 /* Project object */; -} diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata deleted file mode 100644 index 919434a6..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.xcworkspace/contents.xcworkspacedata +++ /dev/null @@ -1,7 +0,0 @@ - - - - - diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist deleted file mode 100644 index 18d98100..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +++ /dev/null @@ -1,8 +0,0 @@ - - - - - IDEDidComputeMac32BitWarning - - - diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/AppDelegate.swift b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/AppDelegate.swift deleted file mode 100644 index ad05d455..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/AppDelegate.swift +++ /dev/null @@ -1,36 +0,0 @@ -// -// AppDelegate.swift -// dbrjswebview -// -// Created by Dynamsoft on 2023/4/18. -// - -import UIKit - -@main -class AppDelegate: UIResponder, UIApplicationDelegate { - - - - func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { - // Override point for customization after application launch. - return true - } - - // MARK: UISceneSession Lifecycle - - func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration { - // Called when a new scene session is being created. - // Use this method to select a configuration to create the new scene with. - return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role) - } - - func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set) { - // Called when the user discards a scene session. - // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions. - // Use this method to release any resources that were specific to the discarded scenes, as they will not return. - } - - -} - diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json deleted file mode 100644 index eb878970..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/AccentColor.colorset/Contents.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "colors" : [ - { - "idiom" : "universal" - } - ], - "info" : { - "author" : "xcode", - "version" : 1 - } -} diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json deleted file mode 100644 index 13613e3e..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/AppIcon.appiconset/Contents.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "images" : [ - { - "idiom" : "universal", - "platform" : "ios", - "size" : "1024x1024" - } - ], - "info" : { - "author" : "xcode", - "version" : 1 - } -} diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/Contents.json b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/Contents.json deleted file mode 100644 index 73c00596..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Assets.xcassets/Contents.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "info" : { - "author" : "xcode", - "version" : 1 - } -} diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard deleted file mode 100644 index 865e9329..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Base.lproj/LaunchScreen.storyboard +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Base.lproj/Main.storyboard b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Base.lproj/Main.storyboard deleted file mode 100644 index 85dc8abf..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Base.lproj/Main.storyboard +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Info.plist b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Info.plist deleted file mode 100644 index 93bb4788..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/Info.plist +++ /dev/null @@ -1,27 +0,0 @@ - - - - - NSCameraUsageDescription - Decoding barcodes from video needs to access your camera. - UIApplicationSceneManifest - - UIApplicationSupportsMultipleScenes - - UISceneConfigurations - - UIWindowSceneSessionRoleApplication - - - UISceneConfigurationName - Default Configuration - UISceneDelegateClassName - $(PRODUCT_MODULE_NAME).SceneDelegate - UISceneStoryboardFile - Main - - - - - - diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/SceneDelegate.swift b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/SceneDelegate.swift deleted file mode 100644 index 0860c7e6..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/SceneDelegate.swift +++ /dev/null @@ -1,52 +0,0 @@ -// -// SceneDelegate.swift -// dbrjswebview -// -// Created by Dynamsoft on 2023/4/18. -// - -import UIKit - -class SceneDelegate: UIResponder, UIWindowSceneDelegate { - - var window: UIWindow? - - - func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { - // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`. - // If using a storyboard, the `window` property will automatically be initialized and attached to the scene. - // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead). - guard let _ = (scene as? UIWindowScene) else { return } - } - - func sceneDidDisconnect(_ scene: UIScene) { - // Called as the scene is being released by the system. - // This occurs shortly after the scene enters the background, or when its session is discarded. - // Release any resources associated with this scene that can be re-created the next time the scene connects. - // The scene may re-connect later, as its session was not necessarily discarded (see `application:didDiscardSceneSessions` instead). - } - - func sceneDidBecomeActive(_ scene: UIScene) { - // Called when the scene has moved from an inactive state to an active state. - // Use this method to restart any tasks that were paused (or not yet started) when the scene was inactive. - } - - func sceneWillResignActive(_ scene: UIScene) { - // Called when the scene will move from an active state to an inactive state. - // This may occur due to temporary interruptions (ex. an incoming phone call). - } - - func sceneWillEnterForeground(_ scene: UIScene) { - // Called as the scene transitions from the background to the foreground. - // Use this method to undo the changes made on entering the background. - } - - func sceneDidEnterBackground(_ scene: UIScene) { - // Called as the scene transitions from the foreground to the background. - // Use this method to save data, release shared resources, and store enough scene-specific state information - // to restore the scene back to its current state. - } - - -} - diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/ViewController.swift b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/ViewController.swift deleted file mode 100644 index 4e787292..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/ViewController.swift +++ /dev/null @@ -1,116 +0,0 @@ -// -// ViewController.swift -// dbrjswebview -// -// Created by Dynamsoft on 2023/4/18. -// - -import UIKit -import WebKit - -// Refer: https://developer.apple.com/documentation/webkit/viewing_desktop_or_mobile_web_content_using_a_web_view -class ViewController: UIViewController, WKUIDelegate { - - let webView: WKWebView - - required init?(coder: NSCoder) { - print("entered init") - let configuration = WKWebViewConfiguration() - configuration.allowsInlineMediaPlayback = true - configuration.mediaTypesRequiringUserActionForPlayback = [] - // Refer: https://stackoverflow.com/a/51736967 - configuration.websiteDataStore = WKWebsiteDataStore.default() - webView = WKWebView(frame: .init(), configuration: configuration) - - super.init(coder: coder) - } - - // Refer: https://www.hackingwithswift.com/articles/112/the-ultimate-guide-to-wkwebview - override func loadView() { - self.view = webView - } - - override func viewDidLoad() { - super.viewDidLoad() - print("entered viewDidLoad") - // Do any additional setup after loading the view. - - // Refer: https://stackoverflow.com/a/40316507 - webView.uiDelegate = self - - //let url = URL(string: "https://your.online.website/target/page.html")! - //webView.load(URLRequest(url: url)) - - // load local html - let fileUrl = Bundle.main.url(forResource: "html/decodeFileInVideo", withExtension: "html")! - webView.loadFileURL(fileUrl, allowingReadAccessTo: fileUrl) - print("finish viewDidLoad") - } - - // Refer: https://stackoverflow.com/a/40316507 - - func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, - completionHandler: @escaping () -> Void) { - - let alertController = UIAlertController(title: nil, message: message, preferredStyle: .actionSheet) - alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in - completionHandler() - })) - - present(alertController, animated: true, completion: nil) - } - - - func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, - completionHandler: @escaping (Bool) -> Void) { - - let alertController = UIAlertController(title: nil, message: message, preferredStyle: .actionSheet) - - alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in - completionHandler(true) - })) - - alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in - completionHandler(false) - })) - - present(alertController, animated: true, completion: nil) - } - - - func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, - completionHandler: @escaping (String?) -> Void) { - - let alertController = UIAlertController(title: nil, message: prompt, preferredStyle: .actionSheet) - - alertController.addTextField { (textField) in - textField.text = defaultText - } - - alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in - if let text = alertController.textFields?.first?.text { - completionHandler(text) - } else { - completionHandler(defaultText) - } - })) - - alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in - completionHandler(nil) - })) - - present(alertController, animated: true, completion: nil) - } - - // Auto grant camera access - // Refer: https://stackoverflow.com/a/72729381/6414094 - func webView(_ webView: WKWebView, - requestMediaCapturePermissionFor - origin: WKSecurityOrigin,initiatedByFrame - frame: WKFrameInfo,type: WKMediaCaptureType, - decisionHandler: @escaping (WKPermissionDecision) -> Void){ - decisionHandler(.grant) - } - -} - diff --git a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/html/decodeFileInVideo.html b/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/html/decodeFileInVideo.html deleted file mode 100644 index a7b6b8f2..00000000 --- a/frameworks/webview/scan-using-rtu-api/ios/dbrjswebview/html/decodeFileInVideo.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera) - - - - -

- Hello World (Scan One Single Barcode via Camera) -

- -
- - - - - - - - - - - - - \ No newline at end of file diff --git a/hello-world.html b/hello-world.html index 6a14633e..b78fb99b 100644 --- a/hello-world.html +++ b/hello-world.html @@ -4,9 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera) - + Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera) + + + + + @@ -14,57 +17,45 @@

Hello World (Scan Barcode via Camera)

-
- - - - - - +
+
@@ -1071,7 +1071,7 @@

Workflow Examples
- Cart Builder + Cart Builder >
- Scan and Search + Scan and Search >
- Show Result Texts on Video >
- Read and Parse GS1-AI Dynamsoft Barcode Reader Sample - Hello World (Read an Image) + + + +

Hello World (Read an Image)

- +
Results:
- - - - + +

Hello World (Scan One Single Barcode via Camera)

- +
+ - - + cvRouter.setInput(cameraEnhancer); - - + -
+
+
+
+ + Loading... +
+
+
+
+
+
Clear
+
Done
+
+
+
@@ -45,43 +59,87 @@
  • @@ -150,6 +208,27 @@ } backBtn.addEventListener("click", launchBarcodeScanner); + + clearBtn.addEventListener("click", () => { + currentSessionResult = []; + renderCurrentSessionScanResult(); + }); + + doneBtn.addEventListener("click", async () => { + const { cameraEnhancer, cvRouter } = await pInit; + await cameraEnhancer.close(); + await cvRouter.stopCapturing(); + barcodeScannerView.style.display = "none"; + summaryView.style.display = "flex"; + totalUniqueBarcodesCount += currentSessionResult.length; + document.querySelector(".total-unique-barcodes-count .count").innerText = totalUniqueBarcodesCount; + document.querySelector(".total-count-in-this-session .count").innerText = currentSessionResult.length; + document.querySelector(".time").innerText = getDurationTime(startTime); + readerResultList(); + currentSessionResult = []; + renderCurrentSessionScanResult(); + console.log("Current Scan Session Result: ", currentSessionResult); + }); diff --git a/scenarios/cart-builder/README.md b/scenarios/cart-builder/README.md index ebd5c5be..a2c8f539 100644 --- a/scenarios/cart-builder/README.md +++ b/scenarios/cart-builder/README.md @@ -4,7 +4,8 @@ A lightweight demo that simulates a shopping experience: scan a barcode and add ## Included files -- `cart-builder.html` — single‑file sample. +- `index.html` — the demo page (simple UI and prototype flows). +- `index.css` — styles for the demo. ## ✨ Features @@ -24,7 +25,7 @@ A lightweight demo that simulates a shopping experience: scan a barcode and add ## Quick start -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/): +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. diff --git a/scenarios/cart-builder/index.css b/scenarios/cart-builder/index.css new file mode 100644 index 00000000..847e1fb2 --- /dev/null +++ b/scenarios/cart-builder/index.css @@ -0,0 +1,85 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + background: #f0f0f0; +} + +header { + text-align: center; + margin-bottom: 30px; +} + +.scan-btn { + display: flex; + align-items: center; + justify-content: center; + padding: 8px 16px; + margin: 0 auto 20px; + font-size: 14px; + background: #4caf50; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.scan-btn:hover { + background: #45a049; +} + +.barcode-icon { + height: 12px; + margin-left: 8px; +} + +.cart { + max-width: 600px; + margin: 0 auto; + background: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.cart-item { + display: flex; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid #ddd; +} + +.cart-item:last-child { + border-bottom: none; +} + +.floatingDiv { + position: fixed; + 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: 999; + padding: 3px; + box-sizing: border-box; + touch-action: none; +} + +.floatingDiv .btn-close { + position: absolute; + top: 10px; + right: 10px; + width: 20px; + height: 20px; + z-index: 1; + cursor: pointer; +} \ No newline at end of file diff --git a/scenarios/cart-builder/cart-builder.html b/scenarios/cart-builder/index.html similarity index 57% rename from scenarios/cart-builder/cart-builder.html rename to scenarios/cart-builder/index.html index ee1f46c5..4c80f8ea 100644 --- a/scenarios/cart-builder/cart-builder.html +++ b/scenarios/cart-builder/index.html @@ -5,89 +5,12 @@ List-Builder - Scan to Cart Simulation + - + - - - @@ -96,7 +19,7 @@

    🛒 Scan Barcode to Add Items to Cart

    • - - +

    Simulated Shopping Cart

    -
    +

    No items in cart. Start scanning!

    - + + + @@ -306,19 +82,16 @@
    - - - diff --git a/scenarios/pick-one-to-fill/README.md b/scenarios/pick-one-to-fill/README.md index b280b595..42733240 100644 --- a/scenarios/pick-one-to-fill/README.md +++ b/scenarios/pick-one-to-fill/README.md @@ -19,11 +19,11 @@ A compact demo that helps pick the correct item from several candidates by scann 1. Click the "Open Camera" button to activate the camera. 2. Aim at the sample image shown below. 3. Click the "Decode" button to start barcode recognition. -4. If only one barcode is detected, its value will be automatically filled into the corresponding field. If multiple barcodes are detected, the video stream will freeze, and you’ll need to manually select one from the decoded results to fill in. +4. If only one barcode is detected, its value will be automatically filled into the corresponding field. If multiple barcodes are detected, the video stream will freeze, and you'll need to manually select one from the decoded results to fill in. ## Quick start -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/): +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. diff --git a/scenarios/pick-one-to-fill/index.html b/scenarios/pick-one-to-fill/index.html index 6bc36616..f9117d74 100644 --- a/scenarios/pick-one-to-fill/index.html +++ b/scenarios/pick-one-to-fill/index.html @@ -7,7 +7,7 @@ Pick One To Fill with BarcodeScanner - + @@ -57,57 +57,62 @@ const barcodeScannerView = document.querySelector(".barcode-scanner-view"); const scanBtns = document.querySelectorAll(".open-btn"); const decodeBtns = document.querySelectorAll(".decode-btn"); - let barcodeScanner = null; - let cvRouter = null; + + Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); + const pInit = (async () => { + const cameraView = await Dynamsoft.DCE.CameraView.createInstance(); + const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); + const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + + cvRouter.setInput(cameraEnhancer); + barcodeScannerView.append(cameraView.getUIElement()); + + return { + cameraView, + cameraEnhancer, + cvRouter + } + })(); for (let i = 0; i < scanBtns.length; i++) { const scanBtn = scanBtns[i]; const decodeBtn = decodeBtns[i]; - scanBtn.addEventListener("click", (e) => { - if (barcodeScanner) return; - // Configuration object for initializing the BarcodeScanner instance. Refer to https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig - let config = { - license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key - container: barcodeScannerView, // Specify where to render the scanner UI - autoStartCapturing: false, - onInitReady: (components) => { - components.cameraView.setVideoFit("contain"); - cvRouter = components.cvRouter; - }, - // The watermark can be removed via showPoweredByDynamsoft configuration option. - // showPoweredByDynamsoft: false, - }; + scanBtn.addEventListener("click", async (e) => { + const { cameraView, cameraEnhancer, cvRouter } = await pInit; + if (cameraEnhancer.isOpen()) return; + await cameraEnhancer.open(); + + const target = e.target.classList[1].split("-")[1]; + const targetInput = document.querySelector(`.${target} input`); - // Create a new instance of the Dynamsoft Barcode Scanner - barcodeScanner = new Dynamsoft.BarcodeScanner(config); + const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); + resultReceiver.onDecodedBarcodesReceived = (result) => { + if (result.barcodeResultItems.length > 0) { + // Display the first detected barcode's text in an alert + targetInput.value = result.barcodeResultItems[0].text; + guideView.style.display = "flex"; + barcodeScannerView.style.display = "none"; + scanBtn.style.display = "inline-block"; + decodeBtn.style.display = "none"; + decodeBtn.innerText = "Decode to Auto-Fill"; + cameraEnhancer.close(); + cvRouter.stopCapturing(); + cvRouter.removeResultReceiver(resultReceiver); + } + } + await cvRouter.addResultReceiver(resultReceiver); guideView.style.display = "none"; barcodeScannerView.style.display = "block"; scanBtn.style.display = "none"; decodeBtn.style.display = "inline-block"; - - const target = e.target.classList[1].split("-")[1]; - const targetInput = document.querySelector(`.${target} input`) - - // Launch the scanner and handle the scanned result - barcodeScanner.launch().then((result) => { - // Display the first detected barcode's text in an alert - if (result.barcodeResults.length) { - targetInput.value = result.barcodeResults[0].text; - } - guideView.style.display = "flex"; - barcodeScannerView.style.display = "none"; - scanBtn.style.display = "inline-block"; - decodeBtn.style.display = "none"; - decodeBtn.innerText = "Decode to Auto-Fill"; - barcodeScanner = null; - }); }) - decodeBtn.addEventListener("click", () => { + decodeBtn.addEventListener("click", async () => { decodeBtn.innerText = "Scanning..."; - cvRouter.startCapturing("ReadBarcodes_SpeedFirst"); + const { cameraView, cameraEnhancer, cvRouter } = await pInit; + await cvRouter.startCapturing("ReadSingleBarcode"); }) } diff --git a/scenarios/read-a-drivers-license/README.md b/scenarios/read-a-drivers-license/README.md index d571efa5..50600724 100644 --- a/scenarios/read-a-drivers-license/README.md +++ b/scenarios/read-a-drivers-license/README.md @@ -21,7 +21,7 @@ A focused demo that decodes and parses barcode data from driver's license images ## Quick start -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/): +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. diff --git a/scenarios/read-a-drivers-license/index.html b/scenarios/read-a-drivers-license/index.html index 99f97c95..fff14556 100644 --- a/scenarios/read-a-drivers-license/index.html +++ b/scenarios/read-a-drivers-license/index.html @@ -21,14 +21,15 @@

    Read a Driver's License

    logo-dynamsoft
    +
      Back to Scan
      - No PDF417 detected. Please try again.
      - - + + + diff --git a/scenarios/read-a-drivers-license/style.css b/scenarios/read-a-drivers-license/style.css index 61855c1e..a6a21546 100644 --- a/scenarios/read-a-drivers-license/style.css +++ b/scenarios/read-a-drivers-license/style.css @@ -81,6 +81,11 @@ body { height: 32px; } +.barcode-scanner-view { + width: 100%; + height: 100%; +} + .parsed-result-view { position: absolute; width: 100%; diff --git a/scenarios/read-and-parse-GS1-AI/README.md b/scenarios/read-and-parse-GS1-AI/README.md index 1c699c4e..82ced8a1 100644 --- a/scenarios/read-and-parse-GS1-AI/README.md +++ b/scenarios/read-and-parse-GS1-AI/README.md @@ -9,13 +9,6 @@ A focused demo that decodes GS1-formatted barcodes and parses Application Identi - `index.css` — styles used by the foundational demo. - `read_and_parse_gs1.json` — GS1 template file used by this implementation. -- scan-using-rtu-api/ — RTU implementation: - - `rtu.html` — RTU demo page. - - `rtu_gs1.json` — GS1 template file used by this implementation. - - `convert-GS1AI-title.js` — helper to convert or format AI titles for display. - - `style.css` — RTU demo styles. - - `info.svg`, `logo-dynamsoft-blackBg-190x47-DZ66W3xz.png` — visual assets used by the RTU demo. - ## ✨ Features - Decode GS1 barcodes (GS1-128 / EAN / GS1 Databar variants) from live camera or static image inputs. @@ -23,14 +16,12 @@ A focused demo that decodes GS1-formatted barcodes and parses Application Identi ## 🔧 How it works -- Both demos initialize the barcode scanner to decode GS1 payloads from camera frames or image files. +- The demos initialize the barcode scanner to decode GS1 payloads from camera frames or image files. - Decoded GS1 strings are parsed according to the provided JSON template (mapping AIs to labels and formats). -- The foundational demo is a compact single-page example that loads `read_and_parse_gs1.json` and renders parsed fields alongside the raw payload. -- The RTU demo demonstrates a more integrated UI flow (uses `rtu_gs1.json`, helper script `convert-GS1AI-title.js`, and additional assets/styles) suitable for embedding into larger apps. ## Quick start -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/): +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. @@ -40,7 +31,6 @@ Opening HTML files directly may not work as expected. Instead, run a local devel - Use high-resolution images or increase camera resolution for small or dense GS1 fields. - Validate AI date/number formats (some AIs imply decimal places or YY/MM/YY formats). -- Use the RTU implementation as a reference if you need a richer runtime UI integration. ## 📌 Notes diff --git a/scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.css b/scenarios/read-and-parse-GS1-AI/index.css similarity index 100% rename from scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.css rename to scenarios/read-and-parse-GS1-AI/index.css diff --git a/scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.html b/scenarios/read-and-parse-GS1-AI/index.html similarity index 97% rename from scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.html rename to scenarios/read-and-parse-GS1-AI/index.html index 65d418fe..e93e3f7b 100644 --- a/scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.html +++ b/scenarios/read-and-parse-GS1-AI/index.html @@ -50,19 +50,19 @@

      Read a GS1-AI

      - + - + - - - - - \ No newline at end of file diff --git a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/info.svg b/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/info.svg deleted file mode 100644 index f0dab9d4..00000000 --- a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/info.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/logo-dynamsoft-blackBg-190x47-DZ66W3xz.png b/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/logo-dynamsoft-blackBg-190x47-DZ66W3xz.png deleted file mode 100644 index 7967e8ed..00000000 Binary files a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/logo-dynamsoft-blackBg-190x47-DZ66W3xz.png and /dev/null differ diff --git a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/rtu_gs1.json b/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/rtu_gs1.json deleted file mode 100644 index 67497355..00000000 --- a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/rtu_gs1.json +++ /dev/null @@ -1,163 +0,0 @@ -{ - "BarcodeReaderTaskSettingOptions": [ - { - "Name": "task_gs1_ai_barcode", - "ExpectedBarcodesCount": 1, - "BarcodeFormatIds": [ - "BF_GS1_DATABAR", - "BF_CODE_128", - "BF_GS1_COMPOSITE", - "BF_DATAMATRIX", - "BF_QR_CODE" - ], - "BarcodeFormatSpecificationNameArray": [ - "bfs_gs1_ai" - ], - "SectionArray": [ - { - "Section": "ST_REGION_PREDETECTION", - "ImageParameterName": "ip_localize_barcode", - "StageArray": [ - { - "Stage": "SST_PREDETECT_REGIONS" - } - ] - }, - { - "Section": "ST_BARCODE_LOCALIZATION", - "ImageParameterName": "ip_localize_barcode", - "StageArray": [ - { - "LocalizationModes": [ - { - "Mode": "LM_SCAN_DIRECTLY", - "ScanDirection": 2 - }, - { - "Mode": "LM_CONNECTED_BLOCKS", - "ModelNameArray": [] - }, - { - "Mode": "LM_CONNECTED_BLOCKS", - "ModelNameArray": [ - "OneDLocalization" - ] - } - ], - "Stage": "SST_LOCALIZE_CANDIDATE_BARCODES" - }, - { - "Stage": "SST_LOCALIZE_BARCODES" - } - ] - }, - { - "Section": "ST_BARCODE_DECODING", - "ImageParameterName": "ip_localize_barcode", - "StageArray": [ - { - "Stage": "SST_RESIST_DEFORMATION" - }, - { - "Stage": "SST_COMPLEMENT_BARCODE" - }, - { - "Stage": "SST_SCALE_BARCODE_IMAGE" - }, - { - "DeblurModes": [ - { - "Mode": "DM_BASED_ON_LOC_BIN" - }, - { - "Mode": "DM_THRESHOLD_BINARIZATION" - }, - { - "Mode": "DM_DIRECT_BINARIZATION" - }, - { - "Mode": "DM_NEURAL_NETWORK", - "ModelNameArray": [ - "Code128Decoder" - ] - }, - { - "Mode": "DM_DEEP_ANALYSIS" - } - ], - "Stage": "SST_DECODE_BARCODES" - } - ] - } - ] - } - ], - "BarcodeFormatSpecificationOptions": [ - { - "Name": "bfs_gs1_ai", - "BarcodeFormatIds": [ - "BF_GS1_DATABAR", - "BF_CODE_128", - "BF_GS1_COMPOSITE", - "BF_DATAMATRIX", - "BF_QR_CODE" - ], - "IncludeTrailingCheckDigit": 0, - "IncludeImpliedAI01": 1 - } - ], - "CaptureVisionTemplates": [ - { - "Name": "ReadBarcodes_SpeedFirst", - "ImageROIProcessingNameArray": [ - "roi_gs1_ai_barcode" - ] - }, - { - "Name": "ReadBarcodes_ReadRateFirst", - "ImageROIProcessingNameArray": [ - "roi_gs1_ai_barcode" - ] - } - ], - "ImageParameterOptions": [ - { - "Name": "ip_localize_barcode", - "ApplicableStages": [ - { - "Stage": "SST_BINARIZE_IMAGE", - "BinarizationModes": [ - { - "Mode": "BM_LOCAL_BLOCK" - } - ] - }, - { - "Stage": "SST_BINARIZE_TEXTURE_REMOVED_GRAYSCALE" - }, - { - "Stage": "SST_TRANSFORM_GRAYSCALE", - "GrayscaleTransformationModes": [ - { - "Mode": "GTM_ORIGINAL" - }, - { - "Mode": "GTM_INVERTED" - } - ] - } - ] - } - ], - "TargetROIDefOptions": [ - { - "Name": "roi_gs1_ai_barcode", - "TaskSettingNameArray": [ - "task_gs1_ai_barcode" - ] - } - ], - "GlobalParameter": { - "IntraOpNumThreads": 1 - } -} diff --git a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/style.css b/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/style.css deleted file mode 100644 index 0cd02c7c..00000000 --- a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/style.css +++ /dev/null @@ -1,200 +0,0 @@ - -* { - box-sizing: border-box; -} -html, -body { - margin: 0; - padding: 0; - height: 100%; - font-family: Arial, Helvetica, sans-serif; - font-size: 20px; -} -html { - width: 100%; - background: rgb(50, 50, 50); -} -body { - max-width: 720px; - margin: 0 auto; -} - -.barcode-scanner-view{ - width:100%; - height:100%; -} - -.landing-page { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; -} - -.landing-title { - color: white; - font-size: 28px; - text-align: center; - padding: 0 24px; - position: absolute; - width: 100%; - bottom: max(60%, calc(50% + 70px)); -} - -.play-button { - width: 80px; - height: 80px; - background: white; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); - transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; - position: relative; -} -.play-button:hover { - transform: scale(1.1); - box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); -} -.play-button:active { - transform: scale(0.95); -} -.play-button.disabled { - opacity: 0.8; - cursor: not-allowed; - pointer-events: none; -} -.play-button.disabled .play-icon { - display: none; -} -.play-button.disabled::before { - content: ""; - position: absolute; - width: 70px; - height: 70px; - border: 3px solid rgba(254, 142, 20, 0.3); - border-top-color: #fe8e14; - border-radius: 50%; - animation: spin 1s linear infinite; -} -.play-button.disabled::after { - content: "Loading"; - position: absolute; - color: #fe8e14; - font-size: 12px; - font-weight: bold; - letter-spacing: 0.5px; -} -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} -.play-icon { - width: 0; - height: 0; - border-left: 24px solid #fe8e14; - border-top: 16px solid transparent; - border-bottom: 16px solid transparent; - margin-left: 6px; -} - -.landing-page .logo { - position: absolute; - bottom: 8%; - left: 50%; - transform: translateX(-50%); -} -.landing-page .logo img { - width: 95px; - height: 23.5px; -} - -.result-page { - background: rgb(222, 223, 225); - width: 100%; - min-height: 100%; - padding: 1px; - position: relative; -} - -.barcode-text { - background: rgb(245, 245, 245); - font-size: 18px; - line-height: 32px; - margin: 1px 0 10px; - padding: 14px 30px; - word-break: break-all; - color: rgb(50, 50, 50); - font-weight: bold; -} - -.gs1AI-info > div { - background: rgb(245, 245, 245); - font-size: 18px; - line-height: 32px; - margin: 1px 0; - padding: 14px 30px; - color: rgb(102, 102, 102); -} -.gs1AI-info > div > span:first-child{ - color: rgb(50, 50, 50); -} -.has-info::after{ - content: url("info.svg"); - margin-left: 2px; - position: relative; - top: 1px; - cursor: pointer; -} - -.goods-name { - font-weight: bolder; -} - -.back-to-scan { - width: calc(100% - 52px); - margin: 26px; - padding: 14px; - font-family: Arial, Helvetica, sans-serif; - font-size: 24px; - line-height: 32px; - background: #fe8e14; - text-align: center; - color: white; - border-radius: 6px; - display: block; - border: 0; - cursor: pointer; -} -.back-to-scan:hover{ - transform: scale(1.05); -} -.back-to-scan:active { - transform: scale(0.95); -} - -.result-page .powered-by-dynamsoft{ - height:74px; -} -.result-page .powered-by-dynamsoft:after{ - content: "Powered by Dynamsoft"; - position: absolute; - bottom: 0; - height: 74px; - font-size: 16px; - line-height: 74px; - color: rgb(119, 119, 119); - width: 100%; - text-align: center; -} - -.dm-camera-mn-toast{position:absolute;font-size:max(1.25vmin,16px);line-height:max(3vmin,32px);padding:0 max(0.5vmin,4px);left:50%;bottom:max(12.5vmin,100px);transform:translateX(-50%);color:#fff;border-radius:max(0.5vmin,4px);background:rgba(100,100,100,0.5);} diff --git a/scenarios/read-vin/README.md b/scenarios/read-vin/README.md index 8d5e220f..5368c4b2 100644 --- a/scenarios/read-vin/README.md +++ b/scenarios/read-vin/README.md @@ -21,7 +21,7 @@ This focused demo decodes and parses VIN barcodes from vehicle images or live ca ## Quick start -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/): +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. diff --git a/scenarios/read-vin/index.html b/scenarios/read-vin/index.html index 4e508611..b66fbb6e 100644 --- a/scenarios/read-vin/index.html +++ b/scenarios/read-vin/index.html @@ -9,7 +9,7 @@ Dynamsoft Barcode Reader Sample - Read a VIN - + @@ -21,13 +21,12 @@

      Read VIN

      logo-dynamsoft +
        Back to Scan
        - No VIN Barcode detected. Please try again.
        - diff --git a/scenarios/read-vin/style.css b/scenarios/read-vin/style.css index 2326cc25..cf0eb2a4 100644 --- a/scenarios/read-vin/style.css +++ b/scenarios/read-vin/style.css @@ -81,6 +81,11 @@ body { height: 32px; } +.barcode-scanner-view { + width: 100%; + height: 100%; +} + .parsed-result-view { position: absolute; width: 100%; @@ -100,7 +105,7 @@ body { background-color: #fff; margin-bottom: 10px; color: #323234; - padding: 10px 27px; + padding: 0 27px; font-weight: 600; overflow: auto; word-break: break-all; diff --git a/scenarios/scan-1D-Industrial/README.md b/scenarios/scan-1D-Industrial/README.md index 46471497..337c4604 100644 --- a/scenarios/scan-1D-Industrial/README.md +++ b/scenarios/scan-1D-Industrial/README.md @@ -21,7 +21,7 @@ A focused demo for decoding industrial-strength 1D barcodes (high-density, damag ## Quick start -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/): +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. diff --git a/scenarios/scan-1D-Industrial/ReadOneDIndustrial.json b/scenarios/scan-1D-Industrial/ReadOneDIndustrial.json index c414b31a..9d954ecd 100644 --- a/scenarios/scan-1D-Industrial/ReadOneDIndustrial.json +++ b/scenarios/scan-1D-Industrial/ReadOneDIndustrial.json @@ -72,7 +72,7 @@ }, { "Mode": "DM_NEURAL_NETWORK", - "ModelNameArray": ["Code128Decoder", "OneDDeblur"] + "ModelNameArray": ["Code128Decoder", "Code39ITFDecoder"] }, { "Mode": "DM_DEEP_ANALYSIS" diff --git a/scenarios/scan-1D-Industrial/index.html b/scenarios/scan-1D-Industrial/index.html index a86e089d..1197e38a 100644 --- a/scenarios/scan-1D-Industrial/index.html +++ b/scenarios/scan-1D-Industrial/index.html @@ -4,69 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Scan oneD Industrial codes - - - - -

        - Scan oneD Industrial codes -

        - -
        - + Dynamsoft Barcode Scanner Sample - Scan oneD Industrial codes - + - - +
        +
        + + \ No newline at end of file diff --git a/scenarios/scan-1D-Retail/README.md b/scenarios/scan-1D-Retail/README.md index 277b2778..dc4e054c 100644 --- a/scenarios/scan-1D-Retail/README.md +++ b/scenarios/scan-1D-Retail/README.md @@ -20,7 +20,7 @@ A demo tuned for retail 1D barcodes (UPC/EAN etc.) demonstrating speed and accur ## Quick start -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/): +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. diff --git a/scenarios/scan-1D-Retail/ReadOneDRetail.json b/scenarios/scan-1D-Retail/ReadOneDRetail.json index bde1f746..9a363333 100644 --- a/scenarios/scan-1D-Retail/ReadOneDRetail.json +++ b/scenarios/scan-1D-Retail/ReadOneDRetail.json @@ -72,7 +72,7 @@ }, { "Mode": "DM_NEURAL_NETWORK", - "ModelNameArray": ["EAN13Decoder", "OneDDeblur"] + "ModelNameArray": ["EAN13Decoder"] }, { "Mode": "DM_DEEP_ANALYSIS" diff --git a/scenarios/scan-1D-Retail/index.html b/scenarios/scan-1D-Retail/index.html index 486345a5..a9114576 100644 --- a/scenarios/scan-1D-Retail/index.html +++ b/scenarios/scan-1D-Retail/index.html @@ -4,69 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Scan oneD Retail codes - - - - -

        - Scan oneD Retail codes -

        - -
        - + Dynamsoft Barcode Scanner Sample - Scan oneD Retail codes - + - - +
        +
        + + \ No newline at end of file diff --git a/scenarios/scan-and-search/README.md b/scenarios/scan-and-search/README.md index e4908b8a..3d93a2bb 100644 --- a/scenarios/scan-and-search/README.md +++ b/scenarios/scan-and-search/README.md @@ -4,7 +4,7 @@ A demo that scans a barcode and performs a lookup/search operation (product or i ## Included files -- `scan-and-search.html` — single‑file demo (scan UI + search/lookup flow). +- `index.html` — single‑file demo (scan UI + search/lookup flow). ## ✨ Features @@ -22,7 +22,7 @@ A demo that scans a barcode and performs a lookup/search operation (product or i ## Quick start -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/): +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. diff --git a/scenarios/scan-and-search/index.css b/scenarios/scan-and-search/index.css new file mode 100644 index 00000000..cbbce166 --- /dev/null +++ b/scenarios/scan-and-search/index.css @@ -0,0 +1,194 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background: #fff; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + min-height: 100vh; + padding: 10px; + margin: 0; +} + +#container { + display: flex; + align-items: center; + width: 100%; + max-width: 400px; +} + +#scan-btn { + width: 48px; + height: 48px; + background-color: #ff5000; + border: none; + border-radius: 6px 0 0 6px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#scan-btn:hover { + background-color: #e54c00; +} + +#text-input { + flex: 1; + height: 48px; + padding: 0 12px; + font-size: 16px; + border: 1px solid #ccc; + border-left: none; + border-right: none; + box-sizing: border-box; +} + +#search-btn { + width: 48px; + height: 48px; + background-color: #ff5000; + border: none; + border-radius: 0 6px 6px 0; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#search-btn:hover { + background-color: #e54c00; +} + +.search-icon { + position: relative; + width: 20px; + height: 20px; + border: 3px solid white; + border-radius: 50%; + box-sizing: border-box; +} + +.search-icon::after { + content: ""; + position: absolute; + width: 10px; + height: 3px; + background: white; + transform: rotate(45deg); + right: -6px; + bottom: -3px; + transform-origin: center; +} + +.scan-icon { + position: relative; + width: 20px; + height: 20px; +} + +.scan-icon::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 50%; + height: 2px; + background-color: white; + transform: translateY(-50%); +} + +.corner { + position: absolute; + width: 5px; + height: 5px; + border: 2px solid white; +} + +.tl { + top: 0; + left: 0; + border-right: none; + border-bottom: none; +} + +.tr { + top: 0; + right: 0; + border-left: none; + border-bottom: none; +} + +.bl { + bottom: 0; + left: 0; + border-right: none; + border-top: none; +} + +.br { + bottom: 0; + right: 0; + border-left: none; + border-top: none; +} + +h2 { + margin: 20px 0; +} + +#barcode-scanner-view { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100vh; + display: none; + background-color: rgba(0, 0, 0, 0.8); + z-index: 9999; +} + +textarea { + width: 100%; + max-width: 380px; + height: 300px; + margin-top: 20px; + padding: 10px; + font-size: 1em; + border: 1px solid #ccc; + border-radius: 5px; + resize: vertical; + transition: border-color 0.3s; +} + +textarea:focus { + border-color: #007bff; + outline: none; +} + +@media (max-width: 480px) { + + #scan-btn, + #search-btn { + width: 40px; + height: 40px; + } + + #text-input { + height: 40px; + font-size: 14px; + } + + textarea { + height: 200px; + font-size: 14px; + } +} \ No newline at end of file diff --git a/scenarios/scan-and-search/index.html b/scenarios/scan-and-search/index.html new file mode 100644 index 00000000..7e99ac3f --- /dev/null +++ b/scenarios/scan-and-search/index.html @@ -0,0 +1,91 @@ + + + + + + + Scan & Search with BarcodeScanner + + + + + + + + +

        📦 Instant Product Information Lookup

        +

        Enter a UPC, EAN, or ISBN number to retrieve accurate product data from a specific database

        +
        + + + +
        + + +
        + + + + + \ No newline at end of file diff --git a/scenarios/scan-and-search/scan-and-search.html b/scenarios/scan-and-search/scan-and-search.html deleted file mode 100644 index f19ec448..00000000 --- a/scenarios/scan-and-search/scan-and-search.html +++ /dev/null @@ -1,268 +0,0 @@ - - - - - - - Scan & Search with BarcodeScanner - - - - - - - - -

        📦 Instant Product Information Lookup

        -

        Enter a UPC, EAN, or ISBN number to retrieve accurate product data from a specific database

        -

        -
        - - - -
        - - -
        - - - - - - \ No newline at end of file diff --git a/scenarios/scan-common-1D-and-2D/README.md b/scenarios/scan-common-1D-and-2D/README.md index f344f7e6..98e43031 100644 --- a/scenarios/scan-common-1D-and-2D/README.md +++ b/scenarios/scan-common-1D-and-2D/README.md @@ -14,7 +14,7 @@ A demo configured to detect a wide range of barcode formats (1D and 2D). Useful ## Quick start -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/): +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. diff --git a/scenarios/scan-common-1D-and-2D/index.html b/scenarios/scan-common-1D-and-2D/index.html index d45b483f..2aec0d30 100644 --- a/scenarios/scan-common-1D-and-2D/index.html +++ b/scenarios/scan-common-1D-and-2D/index.html @@ -4,69 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Scan Common 1D And 2D - - - - -

        - Scan Common 1D And 2D -

        - -
        - + Dynamsoft Barcode Scanner Sample - Scan Common 1D And 2D - + - - +
        +
        + + \ No newline at end of file diff --git a/scenarios/scan-common-2D-codes/README.md b/scenarios/scan-common-2D-codes/README.md index 0aa7c011..f5c8ad2a 100644 --- a/scenarios/scan-common-2D-codes/README.md +++ b/scenarios/scan-common-2D-codes/README.md @@ -20,7 +20,7 @@ A demo focused on decoding common 2D barcode formats (QR, DataMatrix, PDF417, et ## Quick start -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/): +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. diff --git a/scenarios/scan-common-2D-codes/index.html b/scenarios/scan-common-2D-codes/index.html index 5b4bb7c1..1a2a8b02 100644 --- a/scenarios/scan-common-2D-codes/index.html +++ b/scenarios/scan-common-2D-codes/index.html @@ -4,69 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Scan Common 2D codes - - - - -

        - Scan Common 2D codes -

        - -
        - + Dynamsoft Barcode Scanner Sample - Scan Common 2D codes - + - - +
        +
        + + \ No newline at end of file diff --git a/scenarios/scan-datamatrix-code/README.md b/scenarios/scan-datamatrix-code/README.md index 75092622..df346ccf 100644 --- a/scenarios/scan-datamatrix-code/README.md +++ b/scenarios/scan-datamatrix-code/README.md @@ -9,7 +9,7 @@ This sample demonstrates decoding DataMatrix barcodes from camera or image input ## Quick start -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/): +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. diff --git a/scenarios/scan-datamatrix-code/index.html b/scenarios/scan-datamatrix-code/index.html index 8ce924c7..44b9e5d3 100644 --- a/scenarios/scan-datamatrix-code/index.html +++ b/scenarios/scan-datamatrix-code/index.html @@ -4,69 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Scan DataMatrix codes - - - - -

        - Scan DataMatrix codes -

        - -
        - + Dynamsoft Barcode Scanner Sample - Scan DataMatrix codes - + - - +
        +
        + + \ No newline at end of file diff --git a/scenarios/scan-dpm-codes/index.html b/scenarios/scan-dpm-codes/index.html index 1cbdead2..16be754d 100644 --- a/scenarios/scan-dpm-codes/index.html +++ b/scenarios/scan-dpm-codes/index.html @@ -4,69 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Scan DPM codes - - - - -

        - Scan DPM codes -

        - -
        - + Dynamsoft Barcode Scanner Sample - Scan DPM codes - + - - +
        +
        + + \ No newline at end of file diff --git a/scenarios/scan-from-distance/README.md b/scenarios/scan-from-distance/README.md index 02b79095..f6af1d77 100644 --- a/scenarios/scan-from-distance/README.md +++ b/scenarios/scan-from-distance/README.md @@ -19,7 +19,7 @@ A demo that demonstrates techniques for scanning barcodes from a distance (ROI, ## Quick start -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/): +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. diff --git a/scenarios/scan-from-distance/index.html b/scenarios/scan-from-distance/index.html index fd9734b9..548fbd4f 100644 --- a/scenarios/scan-from-distance/index.html +++ b/scenarios/scan-from-distance/index.html @@ -4,69 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Scan From Distance - - - - -

        - Scan From Distance -

        - -
        - + Dynamsoft Barcode Scanner Sample - Scan From Distance - + - - +
        +
        + + \ No newline at end of file diff --git a/scenarios/scan-qr-code/README.md b/scenarios/scan-qr-code/README.md index 2b52cd4b..1ae770fe 100644 --- a/scenarios/scan-qr-code/README.md +++ b/scenarios/scan-qr-code/README.md @@ -20,7 +20,7 @@ A focused demo for scanning QR codes from camera video or static images using th ## Quick start -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/): +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. diff --git a/scenarios/scan-qr-code/index.html b/scenarios/scan-qr-code/index.html index dd845a47..07d27803 100644 --- a/scenarios/scan-qr-code/index.html +++ b/scenarios/scan-qr-code/index.html @@ -4,69 +4,12 @@ - - Dynamsoft Barcode Scanner Sample - Scan QR codes - - - - -

        - Scan QR codes -

        - -
        - + Dynamsoft Barcode Scanner Sample - Scan QR codes - + - - +
        +
        + + \ No newline at end of file diff --git a/scenarios/show-result-texts-on-the-video/README.md b/scenarios/show-result-texts-on-the-video/README.md index a72116e8..a4be5d80 100644 --- a/scenarios/show-result-texts-on-the-video/README.md +++ b/scenarios/show-result-texts-on-the-video/README.md @@ -4,7 +4,7 @@ A demo that overlays decoded barcode text directly onto the live camera video. U ## Included files -- `show-result-texts-on-the-video.html` — demo page that overlays decoded text on video. +- `index.html` — demo page that overlays decoded text on video. ## ✨ Features @@ -20,7 +20,7 @@ A demo that overlays decoded barcode text directly onto the live camera video. U ## Quick start -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/): +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. diff --git a/scenarios/show-result-texts-on-the-video/show-result-texts-on-the-video.html b/scenarios/show-result-texts-on-the-video/index.html similarity index 90% rename from scenarios/show-result-texts-on-the-video/show-result-texts-on-the-video.html rename to scenarios/show-result-texts-on-the-video/index.html index 6ed221a3..ab1e5358 100644 --- a/scenarios/show-result-texts-on-the-video/show-result-texts-on-the-video.html +++ b/scenarios/show-result-texts-on-the-video/index.html @@ -6,9 +6,35 @@ - + Dynamsoft Barcode Reader Sample - Display Barcode Results as Video Overlays + + + + +