From 1519bcfab032a5524b18eeed2c94156be28ff917 Mon Sep 17 00:00:00 2001 From: Keillion Date: Thu, 23 May 2024 11:26:27 +0800 Subject: [PATCH] dbrjs bundle 10.2.1000 (#169) * rename dynamic component * dbr bundle * dbr bundle * review half * review, vue has done * review done * v * reset value so works in React.StrictMode * 10.2.1000 official --------- Co-authored-by: Cube <877211593@qq.com> --- README.md | 2 +- hello-world/README.md | 18 +- hello-world/angular/.gitignore | 4 +- hello-world/angular/README.md | 410 +-------------- hello-world/angular/angular.json | 22 +- hello-world/angular/package.json | 37 +- hello-world/angular/src/app/app.component.css | 27 +- .../angular/src/app/app.component.html | 8 +- .../angular/src/app/app.component.spec.ts | 27 - hello-world/angular/src/app/app.component.ts | 10 +- hello-world/angular/src/app/app.module.ts | 20 - .../src/app/dynamsoft.config.ts} | 25 +- .../image-capture.component.html | 4 +- .../image-capture.component.spec.ts | 21 - .../image-capture/image-capture.component.ts | 57 +- .../video-capture.component.spec.ts | 21 - .../video-capture/video-capture.component.ts | 125 +++-- hello-world/angular/src/assets/logo.svg | 1 - hello-world/angular/src/favicon.ico | Bin 948 -> 15086 bytes hello-world/angular/src/index.html | 6 +- hello-world/angular/src/main.ts | 10 +- hello-world/angular/src/styles.css | 6 +- hello-world/angular/tsconfig.json | 5 +- hello-world/electron/README.md | 10 +- hello-world/electron/action.js | 36 +- hello-world/electron/package.json | 11 +- hello-world/es6.html | 84 +-- hello-world/hello-world.html | 65 +-- hello-world/next/.eslintrc.json | 3 + hello-world/next/.gitignore | 3 + hello-world/next/README.md | 492 +----------------- hello-world/next/app/globals.css | 109 +--- hello-world/next/app/layout.tsx | 23 +- hello-world/next/app/page.css | 47 ++ hello-world/next/app/page.tsx | 27 +- .../ImageCapture.css | 0 hello-world/next/component/ImageCapture.tsx | 70 +++ hello-world/next/component/VideoCapture.css | 11 + hello-world/next/component/VideoCapture.tsx | 103 ++++ .../next/components/HelloWorld/HelloWorld.css | 52 -- .../next/components/HelloWorld/HelloWorld.tsx | 27 - .../components/ImageCapture/ImageCapture.tsx | 46 -- .../components/VideoCapture/VideoCapture.css | 10 - .../components/VideoCapture/VideoCapture.tsx | 128 ----- hello-world/next/cvr.ts | 31 -- .../src/cvr.ts => next/dynamsoft.config.ts} | 27 +- hello-world/next/next.config.js | 4 - hello-world/next/next.config.mjs | 4 + hello-world/next/package.json | 17 +- hello-world/next/tsconfig.json | 3 +- hello-world/nuxt/README.md | 40 +- .../nuxt/components/HelloWorld.client.vue | 1 - .../nuxt/components/ImageCapture.client.vue | 66 ++- .../nuxt/components/VideoCapture.client.vue | 109 ++-- .../nuxt/{cvr.ts => dynamsoft.config.ts} | 26 +- hello-world/nuxt/package.json | 7 +- hello-world/pwa/README.md | 18 +- hello-world/pwa/helloworld-pwa.html | 200 +++---- hello-world/pwa/service-worker.js | 55 +- hello-world/react-hooks/README.md | 44 +- hello-world/react-hooks/package.json | 7 +- hello-world/react-hooks/src/App.css | 3 - .../components/ImageCapture/ImageCapture.tsx | 93 ++-- .../components/VideoCapture/VideoCapture.tsx | 149 +++--- .../react-hooks/src/dynamsoft.config.ts | 29 ++ hello-world/react-hooks/src/index.tsx | 7 +- hello-world/react/README.md | 44 +- hello-world/react/package.json | 7 +- hello-world/react/src/App.css | 5 - hello-world/react/src/App.tsx | 20 +- .../components/ImageCapture/ImageCapture.tsx | 70 ++- .../components/VideoCapture/VideoCapture.tsx | 140 +++-- hello-world/react/src/cvr.ts | 31 -- hello-world/react/src/dynamsoft.config.ts | 29 ++ hello-world/react/src/index.tsx | 1 - hello-world/read-an-image.html | 66 ++- hello-world/requirejs.html | 97 +--- hello-world/svelte/package.json | 7 +- hello-world/svelte/src/App.svelte | 1 - .../svelte/src/components/ImageCapture.svelte | 87 ++-- .../svelte/src/components/VideoCapture.svelte | 186 +++---- .../cvr.ts => svelte/src/dynamsoft.config.ts} | 18 +- hello-world/svelte/src/lib/cvr.ts | 32 -- hello-world/vue/README.md | 40 +- hello-world/vue/package.json | 7 +- .../vue/src/components/ImageCapture.vue | 98 ++-- .../vue/src/components/VideoCapture.vue | 175 ++++--- hello-world/vue/src/dynamsoft.config.ts | 29 ++ hello-world/vue/src/main.ts | 1 - hello-world/webview/android/README.md | 2 +- .../src/main/assets/decodeBarcodeInVideo.html | 129 ++--- hello-world/webview/ios/README.md | 2 +- .../dbrjswebview/html/decodeFileInVideo.html | 126 ++--- index.html | 2 +- others/debug/public/index.html | 69 +-- .../fill-a-form-with-barcode-reading.html | 257 +++------ .../SampleDriversLicense.jpg | Bin .../index.html} | 368 +++---------- use-case/read-a-drivers-license/style.css | 174 +++++++ use-case/show-result-texts-on-the-video.html | 111 ++-- 100 files changed, 2091 insertions(+), 3503 deletions(-) delete mode 100644 hello-world/angular/src/app/app.component.spec.ts delete mode 100644 hello-world/angular/src/app/app.module.ts rename hello-world/{vue/src/cvr.ts => angular/src/app/dynamsoft.config.ts} (70%) delete mode 100644 hello-world/angular/src/app/image-capture/image-capture.component.spec.ts delete mode 100644 hello-world/angular/src/app/video-capture/video-capture.component.spec.ts delete mode 100644 hello-world/angular/src/assets/logo.svg create mode 100644 hello-world/next/.eslintrc.json create mode 100644 hello-world/next/app/page.css rename hello-world/next/{components/ImageCapture => component}/ImageCapture.css (100%) create mode 100644 hello-world/next/component/ImageCapture.tsx create mode 100644 hello-world/next/component/VideoCapture.css create mode 100644 hello-world/next/component/VideoCapture.tsx delete mode 100644 hello-world/next/components/HelloWorld/HelloWorld.css delete mode 100644 hello-world/next/components/HelloWorld/HelloWorld.tsx delete mode 100644 hello-world/next/components/ImageCapture/ImageCapture.tsx delete mode 100644 hello-world/next/components/VideoCapture/VideoCapture.css delete mode 100644 hello-world/next/components/VideoCapture/VideoCapture.tsx delete mode 100644 hello-world/next/cvr.ts rename hello-world/{react-hooks/src/cvr.ts => next/dynamsoft.config.ts} (64%) delete mode 100644 hello-world/next/next.config.js create mode 100644 hello-world/next/next.config.mjs rename hello-world/nuxt/{cvr.ts => dynamsoft.config.ts} (64%) create mode 100644 hello-world/react-hooks/src/dynamsoft.config.ts delete mode 100644 hello-world/react/src/cvr.ts create mode 100644 hello-world/react/src/dynamsoft.config.ts rename hello-world/{angular/src/cvr.ts => svelte/src/dynamsoft.config.ts} (74%) delete mode 100644 hello-world/svelte/src/lib/cvr.ts create mode 100644 hello-world/vue/src/dynamsoft.config.ts rename use-case/{ => read-a-drivers-license}/SampleDriversLicense.jpg (100%) rename use-case/{read-a-drivers-license.html => read-a-drivers-license/index.html} (56%) create mode 100644 use-case/read-a-drivers-license/style.css diff --git a/README.md b/README.md index 16d9c131..924ecd85 100644 --- a/README.md +++ b/README.md @@ -42,4 +42,4 @@ Get the basic features of the library working with plain/native JavaScript or wi ### Others -* [**Debug**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/other/debug#readme): Collect the actual image frames for debugging purposes. +* [**Debug**](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/others/debug#readme): Collect the actual image frames for debugging purposes. diff --git a/hello-world/README.md b/hello-world/README.md index 0891286c..53de83b6 100644 --- a/hello-world/README.md +++ b/hello-world/README.md @@ -13,26 +13,26 @@ In this example, you will learn the minimum codes required to initialize and set Let's quickly break down the methods used in order: - `Dynamsoft.License.LicenseManager.initLicense()`: This method initializes the license for using the SDK in the application. -- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `router` which controls the entire process in three steps: +- `Dynamsoft.CVR.CaptureVisionRouter.createInstance()`: This method creates a `CaptureVisionRouter` object `cvRouter` which controls the entire process in three steps: - **Retrieve Images from the Image Source** - - `router` connects to the image source through the [`Image Source Adapter`](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`. + - `cvRouter` connects to the image source through the [`Image Source Adapter`](https://www.dynamsoft.com/capture-vision/docs/core/architecture/input.html#image-source-adapter?lang=js) interface with the method `setInput()`. ```js - router.setInput(cameraEnhancer); + cvRouter.setInput(cameraEnhancer); ``` > The image source in our case is a CameraEnhancer object created with `Dynamsoft.DCE.CameraEnhancer.createInstance(view)` - **Coordinate Image-Processing Tasks** - - The coordination happens behind the scenes. `router` starts the process by specifying a preset template "ReadSingleBarcode" with the method `startCapturing()`. + - The coordination happens behind the scenes. `cvRouter` starts the process by specifying a preset template "ReadSingleBarcode" with the method `startCapturing()`. ```js - router.startCapturing("ReadSingleBarcode"); + cvRouter.startCapturing("ReadSingleBarcode"); ``` - **Dispatch Results to Listening Objects** - - The processing results are returned through the [`CapturedResultReceiver`](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object `resultReceiver` is registered to `router` via the method `addResultReceiver()`. + - The processing results are returned through the [`CapturedResultReceiver`](https://www.dynamsoft.com/capture-vision/docs/core/architecture/output.html#captured-result-receiver?lang=js) interface. The `CapturedResultReceiver` object `resultReceiver` is registered to `cvRouter` via the method `addResultReceiver()`. ```js - router.addResultReceiver(resultReceiver); + cvRouter.addResultReceiver(resultReceiver); ``` - - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a `MultiFrameResultCrossFilter` object with result deduplication enabled to filter out the duplicate results. The object is registered to `router` via the method `addResultFilter()`. + - Also note that reading from video is extremely fast and there could be many duplicate results. We can use a `MultiFrameResultCrossFilter` object with result deduplication enabled to filter out the duplicate results. The object is registered to `cvRouter` via the method `addResultFilter()`. ```js - router.addResultFilter(filter); + cvRouter.addResultFilter(filter); ``` > Read more on [Capture Vision Router](https://www.dynamsoft.com/capture-vision/docs/core/architecture/#capture-vision-router). diff --git a/hello-world/angular/.gitignore b/hello-world/angular/.gitignore index 0711527e..4ff8f4e9 100644 --- a/hello-world/angular/.gitignore +++ b/hello-world/angular/.gitignore @@ -1,4 +1,4 @@ -# See http://help.github.com/ignore-files/ for more about ignoring files. +# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. # Compiled output /dist @@ -40,3 +40,5 @@ testem.log # System files .DS_Store Thumbs.db + +package-lock.json diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md index 6d43bb2f..8dd455f1 100644 --- a/hello-world/angular/README.md +++ b/hello-world/angular/README.md @@ -1,409 +1,27 @@ -# Hello World Sample for Angular +# DbrjsSampleAngular -[Angular](https://angular.io/) is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called "the library") into an Angular application. +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.3.7. -## Official Sample - -* Hello World in Angular - Demo -* Hello World in Angular - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) and [Angular CLI](https://cli.angular.io/) installed. `node 16.20.1` and `Angular CLI 16.2.7` are used in the example below. - -## Create the sample project - -### Create an out-of-the-box raw Angular application - -```cmd -ng new my-app -``` - -### **CD** to the root directory of the application and install necessary libraries - -```cmd -cd my-app -npm install dynamsoft-core -npm install dynamsoft-license -npm install dynamsoft-utility -npm install dynamsoft-barcode-reader -npm install dynamsoft-capture-vision-router -npm install dynamsoft-camera-enhancer -``` - -## Start to implement - -### Add file "cvr.ts" under "/src/" to configure libraries - -```typescript -import { CoreModule } from 'dynamsoft-core'; -import { LicenseManager } from 'dynamsoft-license'; -import 'dynamsoft-barcode-reader'; - -/** 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' -); - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -CoreModule.engineResourcePaths = { - std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/", - dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/", - core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/", - license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/", - cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/", - dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", - dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/" -}; - -// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. -CoreModule.loadWasm(['DBR']); -``` - -> 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 three components -* `video-capture` component helps read barcode from camera. -```cmd -ng generate component video-capture -``` -* `image-capture` component helps read barcode from still images. -```cmd -ng generate component image-capture -``` -* `hello-world` component offers buttons to switch components above. -```cmd -ng generate component hello-world -``` - -### Edit the video-capture component - -* Replace the original code in `video-capture.component.html` with code below. - -```html -
-Results: -
-
-``` - -* Add CSS style in `video-capture.component.css`. - -```css -.div-ui-container { - width: 100%; - height: 70vh; -} - -.div-results-container { - width: 100%; - height: 10vh; - overflow: auto; -} -``` - -* In `video-capture.component.ts`, add code for initializing and destroying some instances. - -```typescript -import { Component, ElementRef, ViewChild } from '@angular/core'; -import { EnumCapturedResultItemType } from 'dynamsoft-core' -import { DecodedBarcodesResult } from 'dynamsoft-barcode-reader'; -import { - CameraEnhancer, - CameraView, -} from 'dynamsoft-camera-enhancer'; -import { - CapturedResultReceiver, - CaptureVisionRouter, -} from 'dynamsoft-capture-vision-router'; -import { MultiFrameResultCrossFilter } from 'dynamsoft-utility'; -import '../../cvr'; // import side effects. The license, engineResourcePath, so on. - -@Component({ - selector: 'app-video-capture', - templateUrl: './video-capture.component.html', - styleUrls: ['./video-capture.component.css'], -}) -export class VideoCaptureComponent { - pInit: Promise<{ - cameraView: CameraView; - cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; - }> | null = null; - - @ViewChild('uiContainer') uiContainer: ElementRef | null = - null; - @ViewChild('resultsContainer') resultsContainer: ElementRef | null = - null; - - async init(): Promise<{ - cameraView: CameraView; - cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; - }> { - try { - // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. - const cameraView = await CameraView.createInstance(); - const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); - this.uiContainer!.nativeElement.append(cameraView.getUIElement()); // Get default UI and append it to DOM. - - // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = await CaptureVisionRouter.createInstance(); - router.setInput(cameraEnhancer); - - // Define a callback for results. - const resultReceiver = new CapturedResultReceiver(); - resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => { - if (!result.barcodeResultItems.length) return; - - this.resultsContainer!.nativeElement.textContent = ''; - console.log(result); - for (let item of result.barcodeResultItems) { - this.resultsContainer!.nativeElement.append( - `${item.formatString}: ${item.text}`, - document.createElement('br'), - document.createElement('hr'), - ); - } - }; - router.addResultReceiver(resultReceiver); - - // Filter out unchecked and duplicate results. - const filter = new MultiFrameResultCrossFilter(); - filter.enableResultCrossVerification( - "barcode", - true - ); // Filter out unchecked barcodes. - // Filter out duplicate barcodes within 3 seconds. - filter.enableResultDeduplication( - "barcode", - true - ); - filter.setDuplicateForgetTime( - "barcode", - 3000 - ); - await router.addResultFilter(filter); - - // Open camera and start scanning single barcode. - await cameraEnhancer.open(); - await router.startCapturing('ReadSingleBarcode'); - return { - cameraView, - cameraEnhancer, - router, - }; - } catch (ex: any) { - let errMsg = ex.message || ex; - console.error(errMsg); - alert(errMsg); - throw ex; - } - } - - async ngOnInit(): Promise { - this.pInit = this.init(); - } - - async ngOnDestroy() { - if (this.pInit) { - const { cameraView, cameraEnhancer, router } = await this.pInit; - router.dispose(); - cameraEnhancer.dispose(); - cameraView.dispose(); - } - this.uiContainer!.nativeElement.innerText = ""; - console.log('VideoCapture Component Unmount'); - } -} -``` - -### Edit the image-capture component - -* Replace the original code in `image-capture.component.html` with code below to select a local image via `input` element. - -```html -
-``` - -* Add CSS style in `image-capture.component.css`. - -```css -.div-image-capture { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - border: 1px solid black; -} -``` - -* In `image-capture.component.ts`, add code for initializing and destroying the `CaptureVisionRouter` instance. - -```typescript -import { Component } from '@angular/core'; -import { BarcodeResultItem } from 'dynamsoft-barcode-reader'; -import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router'; -import '../../cvr'; // import side effects. The license, engineResourcePath, so on. - -@Component({ - selector: 'app-image-capture', - templateUrl: './image-capture.component.html', - styleUrls: ['./image-capture.component.css'], -}) -export class ImageCaptureComponent { - pInit: Promise | null = null; - - decodeImg = async (e: any) => { - try { - const router = await this.pInit; - // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await router!.capture( - e.target.files[0], - 'ReadBarcodes_SpeedFirst' - ); - let texts = ''; - for (let item of result.items) { - console.log((item as BarcodeResultItem).text); - texts += (item as BarcodeResultItem).text + '\n'; - } - if (texts != '') alert(texts); - if (!result.items.length) alert('No barcode found'); - } catch (ex: any) { - let errMsg = ex.message || ex; - console.error(errMsg); - alert(errMsg); - } - e.target.value = ''; - }; - - async ngOnInit(): Promise { - this.pInit = CaptureVisionRouter.createInstance(); - } - - async ngOnDestroy() { - if (this.pInit) { - const router = await this.pInit; - router.dispose(); - } - console.log('ImageCapture Component Unmount'); - } -} - -``` - -### Edit the hello-world component - -* Use the components in `hello-world.component.html`. - -```html -
-

Hello World for Angular

-
- - -
-
- - -
-
-``` - -* Define the style of the element in `hello-world.component.css`. - -```css -.div-hello-world { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - color: #455A64; -} - -button { - font-size: 1.5rem; - margin: 1.5vh 0; - border: 1px solid black; - background-color: white; - color: black; -} - -.container { - margin: 2vmin auto; - height: 70vh; - width: 80vw; -} - -h1 { - font-size: 1.5em; -} -``` - -* Add following code to `hello-world.component.ts`. - -```typescript -import { Component } from '@angular/core'; -import '../../cvr'; // import side effects. The license, engineResourcePath, so on. - -@Component({ - selector: 'app-hello-world', - templateUrl: './hello-world.component.html', - styleUrls: ['./hello-world.component.css'] -}) -export class HelloWorldComponent { - bShowVideoCapture = true; - bShowImageCapture = false; - - showVideoCapture(): void { - this.bShowVideoCapture = true; - this.bShowImageCapture = false; - } - showImageCapture(): void { - this.bShowVideoCapture = false; - this.bShowImageCapture = true; - } -} -``` - -### Add the hello-world component to `app.component.html` +## Development server -Edit the file `app.component.html` to contain nothing but the following +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. -```html - -``` +## Code scaffolding -* Try running the project. +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`. -```cmd -ng serve -``` +## Build -If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the `Decode Image` button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog. +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. -## Development server +## Running unit tests -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). -## Build +## Running end-to-end tests -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. +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. -## Support +## Further help -If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). +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. diff --git a/hello-world/angular/angular.json b/hello-world/angular/angular.json index 38485846..5b45adf1 100644 --- a/hello-world/angular/angular.json +++ b/hello-world/angular/angular.json @@ -3,7 +3,7 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "angular": { + "dbrjs-sample-angular": { "projectType": "application", "schematics": {}, "root": "", @@ -11,11 +11,11 @@ "prefix": "app", "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-devkit/build-angular:application", "options": { - "outputPath": "dist/angular", + "outputPath": "dist/dbrjs-sample-angular", "index": "src/index.html", - "main": "src/main.ts", + "browser": "src/main.ts", "polyfills": [ "zone.js" ], @@ -46,12 +46,9 @@ "outputHashing": "all" }, "development": { - "buildOptimizer": false, "optimization": false, - "vendorChunk": true, "extractLicenses": false, - "sourceMap": true, - "namedChunks": true + "sourceMap": true } }, "defaultConfiguration": "production" @@ -60,10 +57,10 @@ "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "angular:build:production" + "buildTarget": "dbrjs-sample-angular:build:production" }, "development": { - "browserTarget": "angular:build:development" + "buildTarget": "dbrjs-sample-angular:build:development" } }, "defaultConfiguration": "development" @@ -71,7 +68,7 @@ "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "angular:build" + "buildTarget": "dbrjs-sample-angular:build" } }, "test": { @@ -94,8 +91,5 @@ } } } - }, - "cli": { - "analytics": false } } diff --git a/hello-world/angular/package.json b/hello-world/angular/package.json index c0fb156b..18bb9825 100644 --- a/hello-world/angular/package.json +++ b/hello-world/angular/package.json @@ -10,35 +10,30 @@ }, "private": true, "dependencies": { - "@angular/animations": "^16.2.0", - "@angular/common": "^16.2.0", - "@angular/compiler": "^16.2.0", - "@angular/core": "^16.2.0", - "@angular/forms": "^16.2.0", - "@angular/platform-browser": "^16.2.0", - "@angular/platform-browser-dynamic": "^16.2.0", - "@angular/router": "^16.2.0", - "dynamsoft-barcode-reader": "10.2.10", - "dynamsoft-utility": "1.2.10", - "dynamsoft-camera-enhancer": "4.0.2", - "dynamsoft-capture-vision-router": "2.2.10", - "dynamsoft-core": "3.2.10", - "dynamsoft-license": "3.2.10", + "@angular/animations": "^17.3.0", + "@angular/common": "^17.3.0", + "@angular/compiler": "^17.3.0", + "@angular/core": "^17.3.0", + "@angular/forms": "^17.3.0", + "@angular/platform-browser": "^17.3.0", + "@angular/platform-browser-dynamic": "^17.3.0", + "@angular/router": "^17.3.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", - "zone.js": "~0.13.0" + "zone.js": "~0.14.3", + "dynamsoft-barcode-reader-bundle": "10.2.1000" }, "devDependencies": { - "@angular-devkit/build-angular": "^16.2.7", - "@angular/cli": "^16.2.7", - "@angular/compiler-cli": "^16.2.0", - "@types/jasmine": "~4.3.0", - "jasmine-core": "~4.6.0", + "@angular-devkit/build-angular": "^17.3.7", + "@angular/cli": "^17.3.7", + "@angular/compiler-cli": "^17.3.0", + "@types/jasmine": "~5.1.0", + "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", - "typescript": "~5.1.3" + "typescript": "~5.4.2" } } diff --git a/hello-world/angular/src/app/app.component.css b/hello-world/angular/src/app/app.component.css index c2574111..cfebba64 100644 --- a/hello-world/angular/src/app/app.component.css +++ b/hello-world/angular/src/app/app.component.css @@ -1,20 +1,23 @@ + + .title { display: flex; justify-content: center; align-items: center; - margin-top: 50px; + margin-top: 20px; } +/* .title .title-text { + +} */ .title .title-logo { - width: 30px; - height: 30px; - margin-left: 10px; + width: 60px; + height: 60px; + animation: retate 5s infinite linear; } - .top-btns { width: 30%; margin: 20px auto; } - .top-btns button { display: inline-block; border: 1px solid black; @@ -22,7 +25,6 @@ background-color: transparent; cursor: pointer; } - .top-btns button:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; @@ -36,6 +38,15 @@ @media screen and (max-width: 500px) { .top-btns { - width: 70%; + width: 70%; } } + +@keyframes retate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/hello-world/angular/src/app/app.component.html b/hello-world/angular/src/app/app.component.html index 8934c54e..d02a949c 100644 --- a/hello-world/angular/src/app/app.component.html +++ b/hello-world/angular/src/app/app.component.html @@ -1,12 +1,14 @@

Hello World for Angular

-
- - + @if (mode === 'video') { + + } @else { + + }
diff --git a/hello-world/angular/src/app/app.component.spec.ts b/hello-world/angular/src/app/app.component.spec.ts deleted file mode 100644 index 16b0b0c1..00000000 --- a/hello-world/angular/src/app/app.component.spec.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(() => TestBed.configureTestingModule({ - declarations: [AppComponent] - })); - - it('should create the app', () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app).toBeTruthy(); - }); - - it(`should have as title 'angular'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('angular'); - }); - - it('should render title', () => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.nativeElement as HTMLElement; - expect(compiled.querySelector('.content span')?.textContent).toContain('angular app is running!'); - }); -}); diff --git a/hello-world/angular/src/app/app.component.ts b/hello-world/angular/src/app/app.component.ts index 2c1e1246..e9d3f6c7 100644 --- a/hello-world/angular/src/app/app.component.ts +++ b/hello-world/angular/src/app/app.component.ts @@ -1,12 +1,18 @@ 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', - styleUrls: ['./app.component.css'] + styleUrl: './app.component.css', + imports: [NgStyle, ImageCaptureComponent, VideoCaptureComponent] }) export class AppComponent { - title = 'my-app'; + title = 'dbrjs-sample-angular'; mode: string = "video"; diff --git a/hello-world/angular/src/app/app.module.ts b/hello-world/angular/src/app/app.module.ts deleted file mode 100644 index 9bc0274c..00000000 --- a/hello-world/angular/src/app/app.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { NgModule } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; - -import { AppComponent } from './app.component'; -import { ImageCaptureComponent } from './image-capture/image-capture.component'; -import { VideoCaptureComponent } from './video-capture/video-capture.component'; - -@NgModule({ - declarations: [ - AppComponent, - ImageCaptureComponent, - VideoCaptureComponent - ], - imports: [ - BrowserModule - ], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule { } diff --git a/hello-world/vue/src/cvr.ts b/hello-world/angular/src/app/dynamsoft.config.ts similarity index 70% rename from hello-world/vue/src/cvr.ts rename to hello-world/angular/src/app/dynamsoft.config.ts index e0403b72..8a0d59c1 100644 --- a/hello-world/vue/src/cvr.ts +++ b/hello-world/angular/src/app/dynamsoft.config.ts @@ -1,9 +1,6 @@ -import "dynamsoft-license"; -import "dynamsoft-capture-vision-router"; -import "dynamsoft-barcode-reader"; - import { CoreModule } from "dynamsoft-core"; import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. @@ -19,18 +16,14 @@ LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); */ CoreModule.engineResourcePaths = { - std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/", - dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/", - core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/", - license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/", - cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/", + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", - dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/" + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/" }; -// Preload "LabelRecogznier" module for recognizing text. It will save time on the initial recognizing by skipping the module loading. -CoreModule.loadWasm(["DBR"]).catch((ex) => { - let errMsg = ex.message || ex; - console.error(errMsg); - alert(errMsg); -}); \ No newline at end of file +// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(["DBR"]); diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.html b/hello-world/angular/src/app/image-capture/image-capture.component.html index ed64dd42..dad2d033 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.html +++ b/hello-world/angular/src/app/image-capture/image-capture.component.html @@ -1,4 +1,4 @@
-
-
+
+
diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.spec.ts b/hello-world/angular/src/app/image-capture/image-capture.component.spec.ts deleted file mode 100644 index 4c58d74d..00000000 --- a/hello-world/angular/src/app/image-capture/image-capture.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ImageCaptureComponent } from './image-capture.component'; - -describe('ImageCaptureComponent', () => { - let component: ImageCaptureComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [ImageCaptureComponent] - }); - fixture = TestBed.createComponent(ImageCaptureComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.ts b/hello-world/angular/src/app/image-capture/image-capture.component.ts index 9090096b..5a0d07ec 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.ts +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -1,33 +1,46 @@ -import { Component, ViewChild } from '@angular/core'; -import { BarcodeResultItem } from 'dynamsoft-barcode-reader'; +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'] + styleUrls: ['./image-capture.component.css'], + standalone: true, }) export class ImageCaptureComponent { - pRouter: Promise | null = null; - @ViewChild('iptRef') iptRef: any; - @ViewChild('resRef') resRef: any; + @ViewChild('resDiv') resDiv?: ElementRef; - ngOnInit(): void { - this.pRouter = CaptureVisionRouter.createInstance(); - } + pCvRouter?: Promise; + bDestoried = false; - captureImage = async (e: any) => { + captureImage = async (e: Event) => { + let files = [...(e.target! as HTMLInputElement).files as any as File[]]; + (e.target! as HTMLInputElement).value = ''; + this.resDiv!.nativeElement.innerText = ""; try { - this.resRef!.innerText = ""; - const router = await this.pRouter; - const result = await router!.capture(e.target.files[0]); - for (let item of result.items) { - let _item = item as BarcodeResultItem; - console.log(_item.text); - this.resRef.nativeElement!.innerText += `${_item.formatString} : ${_item.text}\n`; + const cvRouter = await (this.pCvRouter = this.pCvRouter || CaptureVisionRouter.createInstance()); + if (this.bDestoried) return; + + for(let file of files){ + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + if (this.bDestoried) return; + + if(files.length > 1){ + this.resDiv!.nativeElement.innerText += `\n${file.name}:\n`; + } + for (let _item of result.items) { + if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; } + let item = _item as BarcodeResultItem; + this.resDiv!.nativeElement.innerText += item.text + "\n"; + console.log(item.text); + } + if (!result.items.length) this.resDiv!.nativeElement.innerText += 'No barcode found\n'; } - this.iptRef.nativeElement!.value = ''; } catch (ex: any) { let errMsg = ex.message || ex; console.error(errMsg); @@ -36,7 +49,11 @@ export class ImageCaptureComponent { } async ngOnDestroy() { - (await this.pRouter)!.dispose(); - console.log('ImageCapture Component Unmount'); + this.bDestoried = true; + if(this.pCvRouter){ + try{ + (await this.pCvRouter).dispose(); + }catch(_){} + } } } diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.spec.ts b/hello-world/angular/src/app/video-capture/video-capture.component.spec.ts deleted file mode 100644 index 23808a8b..00000000 --- a/hello-world/angular/src/app/video-capture/video-capture.component.spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { VideoCaptureComponent } from './video-capture.component'; - -describe('VideoCaptureComponent', () => { - let component: VideoCaptureComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - declarations: [VideoCaptureComponent] - }); - fixture = TestBed.createComponent(VideoCaptureComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.ts b/hello-world/angular/src/app/video-capture/video-capture.component.ts index d860678e..017070b3 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.ts +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -1,53 +1,50 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; -import { DecodedBarcodesResult } from 'dynamsoft-barcode-reader'; -import { - CameraEnhancer, - CameraView, -} from 'dynamsoft-camera-enhancer'; -import { - CapturedResultReceiver, - CaptureVisionRouter, -} from 'dynamsoft-capture-vision-router'; -import { MultiFrameResultCrossFilter } from 'dynamsoft-utility'; -import '../../cvr'; // import side effects. The license, engineResourcePath, so on. +import "../dynamsoft.config"; +import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; +import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; + +const strErrorDistoryed = 'videoCapture component destoryed'; @Component({ selector: 'app-video-capture', templateUrl: './video-capture.component.html', styleUrls: ['./video-capture.component.css'], + standalone: true, }) export class VideoCaptureComponent { - pInit: Promise<{ - cameraView: CameraView; - cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; - }> | null = null; - @ViewChild('uiContainer') uiContainer: ElementRef | null = - null; - @ViewChild('resultsContainer') resultsContainer: ElementRef | null = - null; + @ViewChild('uiContainer') uiContainer?: ElementRef; + @ViewChild('resultsContainer') resultsContainer?: ElementRef; + + resolveInit?: ()=>void; + pInit:Promise = new Promise(r=>{this.resolveInit=r}); + bDestoryed = false; + + cvRouter?:CaptureVisionRouter; + cameraEnhancer?:CameraEnhancer; + + async ngAfterViewInit(): Promise { - async init(): Promise<{ - cameraView: CameraView; - cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; - }> { - try { + try{ // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. const cameraView = await CameraView.createInstance(); - const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); - this.uiContainer!.nativeElement.append(cameraView.getUIElement()); // Get default UI and append it to DOM. - + if(this.bDestoryed){ throw Error(strErrorDistoryed); } // Check if component is destroyed after every async + this.cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + + // Get default UI and append it to DOM. + this.uiContainer!.nativeElement.append(cameraView.getUIElement()); + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = await CaptureVisionRouter.createInstance(); - router.setInput(cameraEnhancer); - + this.cvRouter = await CaptureVisionRouter.createInstance(); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + this.cvRouter.setInput(this.cameraEnhancer); + // Define a callback for results. - const resultReceiver = new CapturedResultReceiver(); - resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => { + this.cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - + this.resultsContainer!.nativeElement.textContent = ''; console.log(result); for (let item of result.barcodeResultItems) { @@ -57,46 +54,44 @@ export class VideoCaptureComponent { document.createElement('hr'), ); } - }; - router.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); - filter.setDuplicateForgetTime("barcode", 3000); - await router.addResultFilter(filter); - + await this.cvRouter.addResultFilter(filter); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + // Open camera and start scanning single barcode. - await cameraEnhancer.open(); - await router.startCapturing('ReadSingleBarcode'); - return { - cameraView, - cameraEnhancer, - router, - }; - } catch (ex: any) { - let errMsg = ex.message || ex; - console.error(errMsg); - alert(errMsg); - throw ex; + await this.cameraEnhancer.open(); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + await this.cvRouter.startCapturing("ReadSingleBarcode"); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + + }catch(ex:any){ + + if((ex as Error)?.message === strErrorDistoryed){ + console.log(strErrorDistoryed); + }else{ + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } } - } - - async ngOnInit(): Promise { - this.pInit = this.init(); + + // distroy function will wait pInit + this.resolveInit!(); } async ngOnDestroy() { - if (this.pInit) { - const { cameraView, cameraEnhancer, router } = await this.pInit; - router.dispose(); - cameraEnhancer.dispose(); - cameraView.dispose(); - } - this.uiContainer!.nativeElement.innerText = ""; - console.log('VideoCapture Component Unmount'); + this.bDestoryed = true; + try{ + await this.pInit; + this.cvRouter?.dispose(); + this.cameraEnhancer?.dispose(); + }catch(_){} } } diff --git a/hello-world/angular/src/assets/logo.svg b/hello-world/angular/src/assets/logo.svg deleted file mode 100644 index 7f7d73a9..00000000 --- a/hello-world/angular/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/hello-world/angular/src/favicon.ico b/hello-world/angular/src/favicon.ico index 997406ad22c29aae95893fb3d666c30258a09537..57614f9c967596fad0a3989bec2b1deff33034f6 100644 GIT binary patch literal 15086 zcmd^G33O9Omi+`8$@{|M-I6TH3wzF-p5CV8o}7f~KxR60LK+ApEFB<$bcciv%@SmA zV{n>g85YMFFeU*Uvl=i4v)C*qgnb;$GQ=3XTe9{Y%c`mO%su)noNCCQ*@t1WXn|B(hQ7i~ zrUK8|pUkD6#lNo!bt$6)jR!&C?`P5G(`e((P($RaLeq+o0Vd~f11;qB05kdbAOm?r zXv~GYr_sibQO9NGTCdT;+G(!{4Xs@4fPak8#L8PjgJwcs-Mm#nR_Z0s&u?nDX5^~@ z+A6?}g0|=4e_LoE69pPFO`yCD@BCjgKpzMH0O4Xs{Ahc?K3HC5;l=f zg>}alhBXX&);z$E-wai+9TTRtBX-bWYY@cl$@YN#gMd~tM_5lj6W%8ah4;uZ;jP@Q zVbuel1rPA?2@x9Y+u?e`l{Z4ngfG5q5BLH5QsEu4GVpt{KIp1?U)=3+KQ;%7ec8l* zdV=zZgN5>O3G(3L2fqj3;oBbZZw$Ij@`Juz@?+yy#OPw)>#wsTewVgTK9BGt5AbZ&?K&B3GVF&yu?@(Xj3fR3n+ZP0%+wo)D9_xp>Z$`A4 zfV>}NWjO#3lqumR0`gvnffd9Ka}JJMuHS&|55-*mCD#8e^anA<+sFZVaJe7{=p*oX zE_Uv?1>e~ga=seYzh{9P+n5<+7&9}&(kwqSaz;1aD|YM3HBiy<))4~QJSIryyqp| z8nGc(8>3(_nEI4n)n7j(&d4idW1tVLjZ7QbNLXg;LB ziHsS5pXHEjGJZb59KcvS~wv;uZR-+4qEqow`;JCfB*+b^UL^3!?;-^F%yt=VjU|v z39SSqKcRu_NVvz!zJzL0CceJaS6%!(eMshPv_0U5G`~!a#I$qI5Ic(>IONej@aH=f z)($TAT#1I{iCS4f{D2+ApS=$3E7}5=+y(rA9mM#;Cky%b*Gi0KfFA`ofKTzu`AV-9 znW|y@19rrZ*!N2AvDi<_ZeR3O2R{#dh1#3-d%$k${Rx42h+i&GZo5!C^dSL34*AKp z27mTd>k>?V&X;Nl%GZ(>0s`1UN~Hfyj>KPjtnc|)xM@{H_B9rNr~LuH`Gr5_am&Ep zTjZA8hljNj5H1Ipm-uD9rC}U{-vR!eay5&6x6FkfupdpT*84MVwGpdd(}ib)zZ3Ky z7C$pnjc82(W_y_F{PhYj?o!@3__UUvpX)v69aBSzYj3 zdi}YQkKs^SyXyFG2LTRz9{(w}y~!`{EuAaUr6G1M{*%c+kP1olW9z23dSH!G4_HSK zzae-DF$OGR{ofP*!$a(r^5Go>I3SObVI6FLY)N@o<*gl0&kLo-OT{Tl*7nCz>Iq=? zcigIDHtj|H;6sR?or8Wd_a4996GI*CXGU}o;D9`^FM!AT1pBY~?|4h^61BY#_yIfO zKO?E0 zJ{Pc`9rVEI&$xxXu`<5E)&+m(7zX^v0rqofLs&bnQT(1baQkAr^kEsk)15vlzAZ-l z@OO9RF<+IiJ*O@HE256gCt!bF=NM*vh|WVWmjVawcNoksRTMvR03H{p@cjwKh(CL4 z7_PB(dM=kO)!s4fW!1p0f93YN@?ZSG` z$B!JaAJCtW$B97}HNO9(x-t30&E}Mo1UPi@Av%uHj~?T|!4JLwV;KCx8xO#b9IlUW zI6+{a@Wj|<2Y=U;a@vXbxqZNngH8^}LleE_4*0&O7#3iGxfJ%Id>+sb;7{L=aIic8 z|EW|{{S)J-wr@;3PmlxRXU8!e2gm_%s|ReH!reFcY8%$Hl4M5>;6^UDUUae?kOy#h zk~6Ee_@ZAn48Bab__^bNmQ~+k=02jz)e0d9Z3>G?RGG!65?d1>9}7iG17?P*=GUV-#SbLRw)Hu{zx*azHxWkGNTWl@HeWjA?39Ia|sCi{e;!^`1Oec zb>Z|b65OM*;eC=ZLSy?_fg$&^2xI>qSLA2G*$nA3GEnp3$N-)46`|36m*sc#4%C|h zBN<2U;7k>&G_wL4=Ve5z`ubVD&*Hxi)r@{4RCDw7U_D`lbC(9&pG5C*z#W>8>HU)h z!h3g?2UL&sS!oY5$3?VlA0Me9W5e~V;2jds*fz^updz#AJ%G8w2V}AEE?E^=MK%Xt z__Bx1cr7+DQmuHmzn*|hh%~eEc9@m05@clWfpEFcr+06%0&dZJH&@8^&@*$qR@}o3 z@Tuuh2FsLz^zH+dN&T&?0G3I?MpmYJ;GP$J!EzjeM#YLJ!W$}MVNb0^HfOA>5Fe~UNn%Zk(PT@~9}1dt)1UQ zU*B5K?Dl#G74qmg|2>^>0WtLX#Jz{lO4NT`NYB*(L#D|5IpXr9v&7a@YsGp3vLR7L zHYGHZg7{ie6n~2p$6Yz>=^cEg7tEgk-1YRl%-s7^cbqFb(U7&Dp78+&ut5!Tn(hER z|Gp4Ed@CnOPeAe|N>U(dB;SZ?NU^AzoD^UAH_vamp6Ws}{|mSq`^+VP1g~2B{%N-!mWz<`)G)>V-<`9`L4?3dM%Qh6<@kba+m`JS{Ya@9Fq*m6$$ zA1%Ogc~VRH33|S9l%CNb4zM%k^EIpqY}@h{w(aBcJ9c05oiZx#SK9t->5lSI`=&l~ z+-Ic)a{FbBhXV$Xt!WRd`R#Jk-$+_Z52rS>?Vpt2IK<84|E-SBEoIw>cs=a{BlQ7O z-?{Fy_M&84&9|KM5wt~)*!~i~E=(6m8(uCO)I=)M?)&sRbzH$9Rovzd?ZEY}GqX+~ zFbEbLz`BZ49=2Yh-|<`waK-_4!7`ro@zlC|r&I4fc4oyb+m=|c8)8%tZ-z5FwhzDt zL5kB@u53`d@%nHl0Sp)Dw`(QU&>vujEn?GPEXUW!Wi<+4e%BORl&BIH+SwRcbS}X@ z01Pk|vA%OdJKAs17zSXtO55k!;%m9>1eW9LnyAX4uj7@${O6cfii`49qTNItzny5J zH&Gj`e}o}?xjQ}r?LrI%FjUd@xflT3|7LA|ka%Q3i}a8gVm<`HIWoJGH=$EGClX^C0lysQJ>UO(q&;`T#8txuoQ_{l^kEV9CAdXuU1Ghg8 zN_6hHFuy&1x24q5-(Z7;!poYdt*`UTdrQOIQ!2O7_+AHV2hgXaEz7)>$LEdG z<8vE^Tw$|YwZHZDPM!SNOAWG$?J)MdmEk{U!!$M#fp7*Wo}jJ$Q(=8>R`Ats?e|VU?Zt7Cdh%AdnfyN3MBWw{ z$OnREvPf7%z6`#2##_7id|H%Y{vV^vWXb?5d5?a_y&t3@p9t$ncHj-NBdo&X{wrfJ zamN)VMYROYh_SvjJ=Xd!Ga?PY_$;*L=SxFte!4O6%0HEh%iZ4=gvns7IWIyJHa|hT z2;1+e)`TvbNb3-0z&DD_)Jomsg-7p_Uh`wjGnU1urmv1_oVqRg#=C?e?!7DgtqojU zWoAB($&53;TsXu^@2;8M`#z{=rPy?JqgYM0CDf4v@z=ZD|ItJ&8%_7A#K?S{wjxgd z?xA6JdJojrWpB7fr2p_MSsU4(R7=XGS0+Eg#xR=j>`H@R9{XjwBmqAiOxOL` zt?XK-iTEOWV}f>Pz3H-s*>W z4~8C&Xq25UQ^xH6H9kY_RM1$ch+%YLF72AA7^b{~VNTG}Tj#qZltz5Q=qxR`&oIlW Nr__JTFzvMr^FKp4S3v*( literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 - Hello World for Angular - Dynamsoft Barcode Reader Sample - + DbrjsSampleAngular + + - diff --git a/hello-world/angular/src/main.ts b/hello-world/angular/src/main.ts index c58dc05c..2086591f 100644 --- a/hello-world/angular/src/main.ts +++ b/hello-world/angular/src/main.ts @@ -1,7 +1,5 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { AppComponent } from './app/app.component'; -import { AppModule } from './app/app.module'; - - -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); +bootstrapApplication(AppComponent) + .catch((err) => console.error(err)); diff --git a/hello-world/angular/src/styles.css b/hello-world/angular/src/styles.css index d9295888..cd26b68e 100644 --- a/hello-world/angular/src/styles.css +++ b/hello-world/angular/src/styles.css @@ -3,5 +3,9 @@ margin: 0; padding: 0; box-sizing: border-box; - text-align: center; } + +html, body { + text-align: center; + min-width: 350px; +} \ No newline at end of file diff --git a/hello-world/angular/tsconfig.json b/hello-world/angular/tsconfig.json index ed966d43..eb49734a 100644 --- a/hello-world/angular/tsconfig.json +++ b/hello-world/angular/tsconfig.json @@ -2,17 +2,16 @@ { "compileOnSave": false, "compilerOptions": { - "baseUrl": "./", "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, + "skipLibCheck": true, + "esModuleInterop": true, "sourceMap": true, "declaration": false, - "downlevelIteration": true, "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, diff --git a/hello-world/electron/README.md b/hello-world/electron/README.md index 5c071b34..6743889c 100644 --- a/hello-world/electron/README.md +++ b/hello-world/electron/README.md @@ -150,8 +150,8 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = { .append(cameraView.getUIElement()); // Get default UI and append it to DOM. // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); - router.setInput(cameraEnhancer); + const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + cvRouter.setInput(cameraEnhancer); // Define a callback for results. const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); @@ -169,7 +169,7 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = { ); } }; - router.addResultReceiver(resultReceiver); + cvRouter.addResultReceiver(resultReceiver); // Filter out unchecked and duplicate results. const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter(); @@ -186,11 +186,11 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = { "barcode", 3000 ); - await router.addResultFilter(filter); + await cvRouter.addResultFilter(filter); // Open camera and start scanning single barcode. await cameraEnhancer.open(); - await router.startCapturing("ReadSingleBarcode"); + await cvRouter.startCapturing("ReadSingleBarcode"); } catch (ex) { let errMsg = ex.message || ex; console.error(errMsg); diff --git a/hello-world/electron/action.js b/hello-world/electron/action.js index 516d041b..caa09040 100644 --- a/hello-world/electron/action.js +++ b/hello-world/electron/action.js @@ -2,9 +2,7 @@ * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. */ -Dynamsoft.License.LicenseManager.initLicense( - "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9" -); +Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. @@ -22,24 +20,26 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = { dbr: "./node_modules/dynamsoft-barcode-reader/dist/", dce: "./node_modules/dynamsoft-camera-enhancer/dist/", }; -(async function () { + +// Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding. +Dynamsoft.Core.CoreModule.loadWasm(["DBR"]); +// Defined globally for easy debugging. +let cameraEnhancer, cvRouter; + +(async () => { try { // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. const cameraView = await Dynamsoft.DCE.CameraView.createInstance(); - const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance( - cameraView - ); - document - .querySelector("#div-ui-container") - .append(cameraView.getUIElement()); // Get default UI and append it to DOM. + cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); + // Get default UI and append it to DOM. + document.querySelector("#div-ui-container").append(cameraView.getUIElement()); // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); - router.setInput(cameraEnhancer); + cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + cvRouter.setInput(cameraEnhancer); // Define a callback for results. - const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); - resultReceiver.onDecodedBarcodesReceived = (result) => { + cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; const resultsContainer = document.querySelector("#div-results-container"); @@ -52,8 +52,7 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = { document.createElement('hr'), ); } - }; - router.addResultReceiver(resultReceiver); + }}); // Filter out unchecked and duplicate results. const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter(); @@ -61,12 +60,11 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = { filter.enableResultCrossVerification("barcode", true); // Filter out duplicate barcodes within 3 seconds. filter.enableResultDeduplication("barcode", true); - filter.setDuplicateForgetTime("barcode", 3000); - await router.addResultFilter(filter); + await cvRouter.addResultFilter(filter); // Open camera and start scanning single barcode. await cameraEnhancer.open(); - await router.startCapturing("ReadSingleBarcode"); + await cvRouter.startCapturing("ReadSingleBarcode"); } catch (ex) { let errMsg = ex.message || ex; console.error(errMsg); diff --git a/hello-world/electron/package.json b/hello-world/electron/package.json index 99b97134..0e561b5a 100644 --- a/hello-world/electron/package.json +++ b/hello-world/electron/package.json @@ -21,13 +21,8 @@ "electron": "^26.4.1" }, "dependencies": { - "dynamsoft-barcode-reader": "10.2.10", - "dynamsoft-camera-enhancer": "4.0.2", - "dynamsoft-capture-vision-router": "2.2.10", - "dynamsoft-capture-vision-std": "1.2.0", - "dynamsoft-core": "3.2.10", - "dynamsoft-image-processing": "2.2.10", - "dynamsoft-license": "3.2.10", - "dynamsoft-utility": "1.2.10" + "dynamsoft-barcode-reader-bundle": "10.2.1000", + "dynamsoft-capture-vision-std": "1.2.10", + "dynamsoft-image-processing": "2.2.30" } } diff --git a/hello-world/es6.html b/hello-world/es6.html index 8394c2d7..01317f0c 100644 --- a/hello-world/es6.html +++ b/hello-world/es6.html @@ -7,57 +7,23 @@ - - Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera) - + Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera)

Hello World for ES6 (Decode via Camera)

- Results: -
+ Results:
- - - - - - - + + Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera)

Hello World (Decode via Camera)

- Results: -
+ Results:
- + diff --git a/hello-world/nuxt/components/VideoCapture.client.vue b/hello-world/nuxt/components/VideoCapture.client.vue index 0d9673ea..f67d6f34 100644 --- a/hello-world/nuxt/components/VideoCapture.client.vue +++ b/hello-world/nuxt/components/VideoCapture.client.vue @@ -1,47 +1,41 @@ @@ -118,3 +110,4 @@ onBeforeUnmount(async () => { overflow: auto; } +../dynamsoft.config \ No newline at end of file diff --git a/hello-world/nuxt/cvr.ts b/hello-world/nuxt/dynamsoft.config.ts similarity index 64% rename from hello-world/nuxt/cvr.ts rename to hello-world/nuxt/dynamsoft.config.ts index 1385011e..8a0d59c1 100644 --- a/hello-world/nuxt/cvr.ts +++ b/hello-world/nuxt/dynamsoft.config.ts @@ -1,14 +1,12 @@ -import { CoreModule } from 'dynamsoft-core'; -import { LicenseManager } from 'dynamsoft-license'; -import 'dynamsoft-barcode-reader'; +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; /** 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' -); +LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. @@ -18,14 +16,14 @@ LicenseManager.initLicense( */ CoreModule.engineResourcePaths = { - std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/", - dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/", - core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/", - license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/", - cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/", + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", - dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/" + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/" }; -// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. -CoreModule.loadWasm(['DBR']); \ No newline at end of file +// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(["DBR"]); diff --git a/hello-world/nuxt/package.json b/hello-world/nuxt/package.json index 6bcf68b4..3be20540 100644 --- a/hello-world/nuxt/package.json +++ b/hello-world/nuxt/package.json @@ -13,11 +13,6 @@ "nuxt": "3.2.3" }, "dependencies": { - "dynamsoft-barcode-reader": "10.2.10", - "dynamsoft-camera-enhancer": "4.0.2", - "dynamsoft-capture-vision-router": "2.2.10", - "dynamsoft-core": "3.2.10", - "dynamsoft-license": "3.2.10", - "dynamsoft-utility": "1.2.10" + "dynamsoft-barcode-reader-bundle": "10.2.1000" } } diff --git a/hello-world/pwa/README.md b/hello-world/pwa/README.md index d40a021e..1ab0d32d 100644 --- a/hello-world/pwa/README.md +++ b/hello-world/pwa/README.md @@ -63,9 +63,9 @@ Results: .append(cameraView.getUIElement()); // Get default UI and append it to DOM. // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = + const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); - router.setInput(cameraEnhancer); + cvRouter.setInput(cameraEnhancer); // Define a callback for results. const resultReceiver = new Dynamsoft.CVR.CapturedResultReceiver(); @@ -85,7 +85,7 @@ Results: } } }; - router.addResultReceiver(resultReceiver); + cvRouter.addResultReceiver(resultReceiver); // Filter out unchecked and duplicate results. const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter(); @@ -102,11 +102,11 @@ Results: "barcode", 3000 ); - await router.addResultFilter(filter); + await cvRouter.addResultFilter(filter); // Open camera and start scanning single barcode. await cameraEnhancer.open(); - await router.startCapturing("ReadSingleBarcode"); + await cvRouter.startCapturing("ReadSingleBarcode"); } catch (ex) { let errMsg = ex.message || ex; console.error(errMsg); @@ -244,15 +244,15 @@ For offline use, you need to cache more files. service-worker.js ```javascript const coreResourcesDir = - "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/", + "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", utilityResourcesDir = - "https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.2.10/dist/", + "https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.2.20/dist/", dbrResourcesDir = "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", cvrResourcesDir = - "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/", + "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", dceResourcesDir = - "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/"; + "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"; // Files to cache const cacheName = "helloworld-pwa"; diff --git a/hello-world/pwa/helloworld-pwa.html b/hello-world/pwa/helloworld-pwa.html index f8c444ca..dfa281ce 100644 --- a/hello-world/pwa/helloworld-pwa.html +++ b/hello-world/pwa/helloworld-pwa.html @@ -1,128 +1,98 @@ - - - - - - - Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) - - - - - - - - - - - - - - - - - + + + + + + Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) + + + + + + + + + + - -

Hello World for PWA

-
- Results: -
-
- - + - - + })(); + + + diff --git a/hello-world/pwa/service-worker.js b/hello-world/pwa/service-worker.js index 0e9751ce..a46f93ba 100644 --- a/hello-world/pwa/service-worker.js +++ b/hello-world/pwa/service-worker.js @@ -1,13 +1,12 @@ -const resourcePaths = { - std: Dynamsoft.Core.engineResourcePaths.std.path || Dynamsoft.Core.engineResourcePaths.std, - dip: Dynamsoft.Core.engineResourcePaths.dip.path || Dynamsoft.Core.engineResourcePaths.dip, - core: Dynamsoft.Core.engineResourcePaths.core.path || Dynamsoft.Core.engineResourcePaths.core, - license: Dynamsoft.Core.engineResourcePaths.license.path || Dynamsoft.Core.engineResourcePaths.license, - utility: "https://cdn.jsdelivr.net/npm/dynamsoft-utility@1.2.10/dist/", - dbr: Dynamsoft.Core.engineResourcePaths.dbr.path || Dynamsoft.Core.engineResourcePaths.dbr, - cvr: Dynamsoft.Core.engineResourcePaths.cvr.path || Dynamsoft.Core.engineResourcePaths.cvr, - dce: Dynamsoft.Core.engineResourcePaths.dce.path || Dynamsoft.Core.engineResourcePaths.dce, -} +const engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/" +}; // Files to cache const cacheName = "helloworld-pwa"; @@ -16,24 +15,24 @@ const appShellFiles = [ "./dynamsoft-192x192.png", "./dynamsoft-512x512.png", "./helloworld-pwa.json", - `${resourcePaths.std}std.js`, - `${resourcePaths.std}std.wasm`, - `${resourcePaths.dip}dip.wasm`, - `${resourcePaths.core}core.js`, - `${resourcePaths.core}core.worker.js`, - `${resourcePaths.core}core.wasm`, - `${resourcePaths.license}license.js`, - `${resourcePaths.license}dls.license.dialog.html`, - `${resourcePaths.license}license.wasm`, - `${resourcePaths.utility}utility.js`, - `${resourcePaths.dbr}dbr.js`, - `${resourcePaths.dbr}dbr.wasm`, - `${resourcePaths.dbr}DBR-PresetTemplates.json`, - `${resourcePaths.cvr}cvr.js`, - `${resourcePaths.cvr}cvr.wasm`, - `${resourcePaths.cvr}cvr.worker.js`, - `${resourcePaths.dce}dce.js`, - `${resourcePaths.dce}dce.ui.html`, + `${engineResourcePaths.std}std.js`, + `${engineResourcePaths.std}std.wasm`, + `${engineResourcePaths.dip}dip.wasm`, + `${engineResourcePaths.core}core.js`, + `${engineResourcePaths.core}core.worker.js`, + `${engineResourcePaths.core}core.wasm`, + `${engineResourcePaths.license}license.js`, + `${engineResourcePaths.license}dls.license.dialog.html`, + `${engineResourcePaths.license}license.wasm`, + `${engineResourcePaths.utility}utility.js`, + `${engineResourcePaths.dbr}dbr.js`, + `${engineResourcePaths.dbr}dbr.wasm`, + `${engineResourcePaths.dbr}DBR-PresetTemplates.json`, + `${engineResourcePaths.cvr}cvr.js`, + `${engineResourcePaths.cvr}cvr.wasm`, + `${engineResourcePaths.cvr}cvr.worker.js`, + `${engineResourcePaths.dce}dce.js`, + `${engineResourcePaths.dce}dce.ui.html`, ]; // Installing Service Worker diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md index 1277b8c8..86361228 100644 --- a/hello-world/react-hooks/README.md +++ b/hello-world/react-hooks/README.md @@ -56,13 +56,13 @@ LicenseManager.initLicense( */ CoreModule.engineResourcePaths = { - std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/", - dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/", - core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/", - license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/", - cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/", + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", - dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/" + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/" }; // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. @@ -107,7 +107,7 @@ function VideoCapture() { null as Promise<{ cameraView: CameraView; cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; + cvRouter: CaptureVisionRouter; }> | null ); const pDestroy = useRef(null as Promise | null); @@ -115,7 +115,7 @@ function VideoCapture() { const init = async (): Promise<{ cameraView: CameraView; cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; + cvRouter: CaptureVisionRouter; }> => { try { // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. @@ -125,8 +125,8 @@ function VideoCapture() { uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = await CaptureVisionRouter.createInstance(); - router.setInput(cameraEnhancer); + const cvRouter = await CaptureVisionRouter.createInstance(); + cvRouter.setInput(cameraEnhancer); // Define a callback for results. const resultReceiver = new CapturedResultReceiver(); @@ -145,7 +145,7 @@ function VideoCapture() { ); } }; - router.addResultReceiver(resultReceiver); + cvRouter.addResultReceiver(resultReceiver); // Filter out unchecked and duplicate results. const filter = new MultiFrameResultCrossFilter(); @@ -162,15 +162,15 @@ function VideoCapture() { "barcode", 3000 ); - await router.addResultFilter(filter); + await cvRouter.addResultFilter(filter); // Open camera and start scanning single barcode. await cameraEnhancer.open(); - await router.startCapturing("ReadSingleBarcode"); + await cvRouter.startCapturing("ReadSingleBarcode"); return { cameraView, cameraEnhancer, - router, + cvRouter, }; } catch (ex: any) { let errMsg = ex.message || ex; @@ -182,8 +182,8 @@ function VideoCapture() { const destroy = async (): Promise => { if (pInit.current) { - const { cameraView, cameraEnhancer, router } = await pInit.current; - router.dispose(); + const { cameraView, cameraEnhancer, cvRouter } = await pInit.current; + cvRouter.dispose(); cameraEnhancer.dispose(); cameraView.dispose(); } @@ -258,22 +258,22 @@ function ImageCapture() { const pDestroy = useRef(null as null | Promise); const init = async (): Promise => { - const router = await CaptureVisionRouter.createInstance(); - return router; + const cvRouter = await CaptureVisionRouter.createInstance(); + return cvRouter; }; const destroy = async (): Promise => { if (pInit.current) { - const router = (await pInit.current)!; - router.dispose(); + const cvRouter = (await pInit.current)!; + cvRouter.dispose(); } }; const decodeImg = async (e: React.ChangeEvent) => { try { - const router = (await pInit.current)!; + const cvRouter = (await pInit.current)!; // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await router.capture( + const result = await cvRouter.capture( e.target.files![0], "ReadBarcodes_SpeedFirst" ); diff --git a/hello-world/react-hooks/package.json b/hello-world/react-hooks/package.json index d98f3258..c41c8e1e 100644 --- a/hello-world/react-hooks/package.json +++ b/hello-world/react-hooks/package.json @@ -4,8 +4,6 @@ "private": true, "homepage": "./", "dependencies": { - "dynamsoft-barcode-reader": "10.2.10", - "dynamsoft-utility": "1.2.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -13,10 +11,7 @@ "@types/node": "^16.18.12", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", - "dynamsoft-camera-enhancer": "4.0.2", - "dynamsoft-capture-vision-router": "2.2.10", - "dynamsoft-core": "3.2.10", - "dynamsoft-license": "3.2.10", + "dynamsoft-barcode-reader-bundle": "10.2.1000", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/hello-world/react-hooks/src/App.css b/hello-world/react-hooks/src/App.css index b264c056..f3fee6a1 100644 --- a/hello-world/react-hooks/src/App.css +++ b/hello-world/react-hooks/src/App.css @@ -4,9 +4,6 @@ align-items: center; margin-top: 20px; } -/* .title .title-text { - -} */ .title .title-logo { width: 60px; height: 60px; diff --git a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx index 0dd09570..363cc0e3 100644 --- a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx @@ -1,46 +1,67 @@ -import { useEffect, useRef, MutableRefObject } from "react"; -import type { BarcodeResultItem } from "dynamsoft-barcode-reader" +import { useEffect, useRef, MutableRefObject, useCallback, ChangeEvent } from "react"; +import "../../dynamsoft.config"; +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import type { BarcodeResultItem } from "dynamsoft-barcode-reader"; import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; import "./ImageCapture.css"; -function ImageRecognizer() { - const iptRef: MutableRefObject = useRef(null); - const resRef: MutableRefObject = useRef(null); - const pRouter: MutableRefObject | null> = useRef(null); +export default () => { + const resDiv: MutableRefObject = useRef(null); - useEffect((): any => { - pRouter.current = CaptureVisionRouter.createInstance(); + const pCvRouter: MutableRefObject | null> = useRef(null); + const bDestoried = useRef(false); - return async () => { - (await pRouter.current)!.dispose(); - console.log('ImageCapture Component Unmount'); + const captureImage = useCallback(async(e: ChangeEvent)=>{ + let files = [...(e.target.files as any as File[])]; + e.target.value = ''; + resDiv.current!.innerText = ""; + try { + const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance()); + if (bDestoried.current) return; + + for(let file of files){ + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + if (bDestoried.current) return; + + if(files.length > 1){ + resDiv.current!.innerText += `\n${file.name}:\n`; } - }, []); - - const captureImage = async (e: any) => { - try { - resRef.current!.innerText = ""; - const router = await pRouter.current; - const result = await router!.capture(e.target.files[0]); - for (let item of result.items) { - let _item = item as BarcodeResultItem; - console.log(_item.text); - resRef.current!.innerText += `${_item.formatString} : ${_item.text}\n` - } - iptRef.current!.value = ''; - } catch (ex: any) { - let errMsg = ex.message || ex; - console.error(errMsg); - alert(errMsg); + for (let _item of result.items) { + if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; } + let item = _item as BarcodeResultItem; + resDiv.current!.innerText += item.text + "\n"; + console.log(item.text); } + if (!result.items.length) resDiv.current!.innerText += 'No barcode found\n'; + } + } catch (ex: any) { + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); } + }, []); - return ( -
-
-
-
- ) -} + useEffect((): any => { + // reset value so works in React.StrictMode + bDestoried.current = false; + // onBeforeUnmount + return async () => { + bDestoried.current = true; + if(pCvRouter.current){ + try{ + (await pCvRouter.current).dispose(); + }catch(_){} + } + } + }, []); -export default ImageRecognizer; \ No newline at end of file + return ( +
+
+ +
+
+
+ ) +}; diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx index f3bb334f..c370eca3 100644 --- a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx @@ -1,70 +1,101 @@ import { useEffect, useRef, MutableRefObject } from 'react'; -import { CameraEnhancer, CameraView } from 'dynamsoft-camera-enhancer'; -import { DecodedBarcodesResult } from 'dynamsoft-barcode-reader'; -import { CaptureVisionRouter, CapturedResultReceiver } from 'dynamsoft-capture-vision-router'; +import "../../dynamsoft.config"; +import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; import "./VideoCapture.css"; -function VideoRecognizer() { - const uiContainer: MutableRefObject = useRef(null); - const resultsContainer: MutableRefObject = useRef(null); +const strErrorDistoryed = 'videoCapture component destoryed'; - const pCameraView: MutableRefObject | null> = useRef(null); - const pCameraEnhancer: MutableRefObject | null> = useRef(null); - const pRouter: MutableRefObject | null> = useRef(null); - useEffect((): any => { - const init = async () => { - // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. - const cameraView = await (pCameraView.current = CameraView.createInstance()); - const cameraEnhancer = await (pCameraEnhancer.current = CameraEnhancer.createInstance(cameraView)); - uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. +export default () => { + const uiContainer: MutableRefObject = useRef(null); + const resultsContainer: MutableRefObject = useRef(null); - // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = await (pRouter.current = CaptureVisionRouter.createInstance()); - router.setInput(cameraEnhancer); - - // Define a callback for results. - const resultReceiver = new CapturedResultReceiver(); - resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => { - if (!result.barcodeResultItems.length) return; + useEffect((): any => { + let resolveInit:()=>void; + const pInit:Promise = new Promise(r=>{resolveInit=r}); + let bDestoryed = false; - resultsContainer.current!.innerHTML = ""; - console.log(result); - for (let item of result.barcodeResultItems) { - resultsContainer.current!.innerHTML += `${item.text}
`; - } - }; - router.addResultReceiver(resultReceiver); - - // Filter out unchecked and duplicate results. - const filter = new MultiFrameResultCrossFilter(); - filter.enableResultCrossVerification("barcode", true); // Filter out unchecked barcode. - // Filter out duplicate barcodes within 3 seconds. - filter.enableResultDeduplication("barcode", true); - filter.setDuplicateForgetTime("barcode", 3000); - await router.addResultFilter(filter); - - // Open camera and start scanning barcode. - await cameraEnhancer.open(); - await router.startCapturing("ReadSingleBarcode"); + 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(bDestoryed){ throw Error(strErrorDistoryed); } // Check if component is destroyed after every async + cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + if(bDestoryed){ throw Error(strErrorDistoryed); } + + // Get default UI and append it to DOM. + uiContainer.current!.append(cameraView.getUIElement()); + + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + cvRouter = await CaptureVisionRouter.createInstance(); + if(bDestoryed){ throw Error(strErrorDistoryed); } + cvRouter.setInput(cameraEnhancer); + + // Define a callback for results. + cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; + + resultsContainer.current!.textContent = ''; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.current!.append( + `${item.formatString}: ${item.text}`, + document.createElement('br'), + document.createElement('hr'), + ); + } + }}); + + // 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(bDestoryed){ throw Error(strErrorDistoryed); } + + // Open camera and start scanning single barcode. + await cameraEnhancer.open(); + if(bDestoryed){ throw Error(strErrorDistoryed); } + await cvRouter.startCapturing("ReadSingleBarcode"); + if(bDestoryed){ throw Error(strErrorDistoryed); } + + }catch(ex:any){ + + if((ex as Error)?.message === strErrorDistoryed){ + console.log(strErrorDistoryed); + }else{ + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); } - init(); + } + })(); - return async () => { - (await pRouter.current)!.dispose(); - (await pCameraEnhancer.current)!.dispose(); - console.log('VideoCapture Component Unmount'); - } - }, []); + // distroy function will wait pInit + resolveInit!(); - return ( -
-
- Results: -
-
-
- ); -} + // onBeforeUnmount + return async () => { + bDestoryed = true; + try{ + await pInit; + cvRouter?.dispose(); + cameraEnhancer?.dispose(); + }catch(_){} + }; + }, []); -export default VideoRecognizer; + return ( +
+
+ Results:
+
+
+ ); +} diff --git a/hello-world/react-hooks/src/dynamsoft.config.ts b/hello-world/react-hooks/src/dynamsoft.config.ts new file mode 100644 index 00000000..8a0d59c1 --- /dev/null +++ b/hello-world/react-hooks/src/dynamsoft.config.ts @@ -0,0 +1,29 @@ +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; + +/** 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"); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/" +}; + +// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(["DBR"]); diff --git a/hello-world/react-hooks/src/index.tsx b/hello-world/react-hooks/src/index.tsx index e81baa1b..652531e4 100644 --- a/hello-world/react-hooks/src/index.tsx +++ b/hello-world/react-hooks/src/index.tsx @@ -2,7 +2,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; -import "./cvr"; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); -root.render(); +root.render( + + + +); diff --git a/hello-world/react/README.md b/hello-world/react/README.md index 4aa5d4f5..d4a9e3d6 100644 --- a/hello-world/react/README.md +++ b/hello-world/react/README.md @@ -96,13 +96,13 @@ LicenseManager.initLicense( */ CoreModule.engineResourcePaths = { - std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/", - dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/", - core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/", - license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/", - cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/", + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", - dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/" + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/" }; // Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. @@ -143,7 +143,7 @@ class VideoCapture extends React.Component { pInit: Promise<{ cameraView: CameraView; cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; + cvRouter: CaptureVisionRouter; }> | null = null; pDestroy: Promise | null = null; @@ -153,7 +153,7 @@ class VideoCapture extends React.Component { async init(): Promise<{ cameraView: CameraView; cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; + cvRouter: CaptureVisionRouter; }> { try { // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. @@ -163,8 +163,8 @@ class VideoCapture extends React.Component { this.uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = await CaptureVisionRouter.createInstance(); - router.setInput(cameraEnhancer); + const cvRouter = await CaptureVisionRouter.createInstance(); + cvRouter.setInput(cameraEnhancer); // Define a callback for results. const resultReceiver = new CapturedResultReceiver(); @@ -183,7 +183,7 @@ class VideoCapture extends React.Component { ); } }; - router.addResultReceiver(resultReceiver); + cvRouter.addResultReceiver(resultReceiver); // Filter out unchecked and duplicate results. const filter = new MultiFrameResultCrossFilter(); @@ -200,15 +200,15 @@ class VideoCapture extends React.Component { "barcode", 3000 ); - await router.addResultFilter(filter); + await cvRouter.addResultFilter(filter); // Open camera and start scanning single barcode. await cameraEnhancer.open(); - await router.startCapturing("ReadSingleBarcode"); + await cvRouter.startCapturing("ReadSingleBarcode"); return { cameraView, cameraEnhancer, - router, + cvRouter, }; } catch (ex: any) { let errMsg = ex.message || ex; @@ -220,8 +220,8 @@ class VideoCapture extends React.Component { async destroy(): Promise { if (this.pInit) { - const { cameraView, cameraEnhancer, router } = await this.pInit; - router.dispose(); + const { cameraView, cameraEnhancer, cvRouter } = await this.pInit; + cvRouter.dispose(); cameraEnhancer.dispose(); cameraView.dispose(); } @@ -299,22 +299,22 @@ class ImageCapture extends React.Component { pDestroy: Promise | null = null; async init(): Promise { - const router = await CaptureVisionRouter.createInstance(); - return router; + const cvRouter = await CaptureVisionRouter.createInstance(); + return cvRouter; } async destroy(): Promise { if (this.pInit) { - const router = await this.pInit; - router.dispose(); + const cvRouter = await this.pInit; + cvRouter.dispose(); } } decodeImg = async (e: React.ChangeEvent) => { try { - const router = await this.pInit; + const cvRouter = await this.pInit; // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await router!.capture( + const result = await cvRouter!.capture( e.target.files![0], "ReadBarcodes_SpeedFirst" ); diff --git a/hello-world/react/package.json b/hello-world/react/package.json index 546f474e..102c2b0d 100644 --- a/hello-world/react/package.json +++ b/hello-world/react/package.json @@ -4,12 +4,7 @@ "private": true, "homepage": "./", "dependencies": { - "dynamsoft-barcode-reader": "10.2.10", - "dynamsoft-camera-enhancer": "4.0.2", - "dynamsoft-capture-vision-router": "2.2.10", - "dynamsoft-core": "3.2.10", - "dynamsoft-license": "3.2.10", - "dynamsoft-utility": "1.2.10", + "dynamsoft-barcode-reader-bundle": "10.2.1000", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/hello-world/react/src/App.css b/hello-world/react/src/App.css index cfebba64..f3fee6a1 100644 --- a/hello-world/react/src/App.css +++ b/hello-world/react/src/App.css @@ -1,14 +1,9 @@ - - .title { display: flex; justify-content: center; align-items: center; margin-top: 20px; } -/* .title .title-text { - -} */ .title .title-logo { width: 60px; height: 60px; diff --git a/hello-world/react/src/App.tsx b/hello-world/react/src/App.tsx index 73703932..f896563e 100644 --- a/hello-world/react/src/App.tsx +++ b/hello-world/react/src/App.tsx @@ -11,18 +11,16 @@ class App extends React.Component { render() { return ( -
-
-
-

Hello World for React

- logo -
-
- - -
- {this.state.mode === "video" ? : } +
+
+

Hello World for React

+ logo
+
+ + +
+ {this.state.mode === "video" ? : }
); } diff --git a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx index 5de25554..d312fd42 100644 --- a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx @@ -1,30 +1,44 @@ -import React from "react"; -import { BarcodeResultItem } from "dynamsoft-barcode-reader"; +import React, { ChangeEvent } from "react"; +import "../../dynamsoft.config"; +import { EnumCapturedResultItemType } from "dynamsoft-core"; +import type { BarcodeResultItem } from "dynamsoft-barcode-reader"; import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; -import "../../cvr"; // import side effects. The license, engineResourcePath, so on. import "./ImageCapture.css"; class ImageCapture extends React.Component { - pRouter: Promise | null = null; - resRef: React.RefObject = React.createRef(); - iptRef: React.RefObject = React.createRef(); + resDiv: React.RefObject = React.createRef(); - async init(): Promise { - const router = await CaptureVisionRouter.createInstance(); - return router; - } + pCvRouter: Promise | null = null; + bDestoried = false; - captureImage = async (e: any) => { + async captureImage(e: ChangeEvent) { + let files = [...(e.target.files as any as File[])]; + e.target.value = ''; + console.log(1)//debug + console.log(this)//debug + console.log(this.resDiv)//debug + this.resDiv.current!.innerText = ""; + console.log(2)//debug try { - this.resRef.current!.innerText = ""; - const router = await this.pRouter; - const result = await router!.capture(e.target.files[0]); - for (let item of result.items) { - let _item = item as BarcodeResultItem; - console.log(_item.text); - this.resRef.current!.innerText += `${_item.formatString} : ${_item.text}\n` + const cvRouter = await (this.pCvRouter = this.pCvRouter || CaptureVisionRouter.createInstance()); + if (this.bDestoried) return; + + for(let file of files){ + // Decode selected image with 'ReadBarcodes_SpeedFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + if (this.bDestoried) return; + + if(files.length > 1){ + this.resDiv.current!.innerText += `\n${file.name}:\n`; + } + for (let _item of result.items) { + if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; } + let item = _item as BarcodeResultItem; + this.resDiv.current!.innerText += item.text + "\n"; + console.log(item.text); + } + if (!result.items.length) this.resDiv.current!.innerText += 'No barcode found\n'; } - this.iptRef.current!.value = ''; } catch (ex: any) { let errMsg = ex.message || ex; console.error(errMsg); @@ -32,20 +46,22 @@ class ImageCapture extends React.Component { } } - async componentDidMount() { - this.pRouter = CaptureVisionRouter.createInstance(); - } - async componentWillUnmount() { - (await this.pRouter)!.dispose(); - console.log('ImageCapture Component Unmount'); + this.bDestoried = true; + if(this.pCvRouter){ + try{ + (await this.pCvRouter).dispose(); + }catch(_){} + } } render() { return (
-
-
+
+ +
+
); } diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx index b8f8b10e..a7a52819 100644 --- a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx @@ -1,51 +1,45 @@ import React from "react"; -import { DecodedBarcodesResult } from "dynamsoft-barcode-reader"; -import { - CameraEnhancer, - CameraView, -} from "dynamsoft-camera-enhancer"; -import { - CapturedResultReceiver, - CaptureVisionRouter, -} from "dynamsoft-capture-vision-router"; +import "../../dynamsoft.config"; +import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer"; +import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; -import "../../cvr"; // import side effects. The license, engineResourcePath, so on. import "./VideoCapture.css"; +const strErrorDistoryed = 'videoCapture component destoryed'; + class VideoCapture extends React.Component { - pInit: Promise<{ - cameraView: CameraView; - cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; - }> | null = null; - pDestroy: Promise | null = null; uiContainer: React.RefObject = React.createRef(); resultsContainer: React.RefObject = React.createRef(); + + resolveInit?: ()=>void; + pInit:Promise = new Promise(r=>{this.resolveInit=r}); + bDestoryed = false; + + cvRouter?:CaptureVisionRouter; + cameraEnhancer?:CameraEnhancer; + + async componentDidMount() { - async init(): Promise<{ - cameraView: CameraView; - cameraEnhancer: CameraEnhancer; - router: CaptureVisionRouter; - }> { - try { + try{ // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. const cameraView = await CameraView.createInstance(); - const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); - this.uiContainer.current!.innerText = ""; - this.uiContainer.current!.append(cameraView.getUIElement()); // Get default UI and append it to DOM. - + if(this.bDestoryed){ throw Error(strErrorDistoryed); } // Check if component is destroyed after every async + this.cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + + // Get default UI and append it to DOM. + this.uiContainer.current!.append(cameraView.getUIElement()); + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - const router = await CaptureVisionRouter.createInstance(); - router.setInput(cameraEnhancer); - + this.cvRouter = await CaptureVisionRouter.createInstance(); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + this.cvRouter.setInput(this.cameraEnhancer); + // Define a callback for results. - const resultReceiver = new CapturedResultReceiver(); - resultReceiver.onDecodedBarcodesReceived = ( - result: DecodedBarcodesResult - ) => { + this.cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - + this.resultsContainer.current!.textContent = ''; console.log(result); for (let item of result.barcodeResultItems) { @@ -55,68 +49,52 @@ class VideoCapture extends React.Component { document.createElement('hr'), ); } - }; - router.addResultReceiver(resultReceiver); - + }}); + // Filter out unchecked and duplicate results. const filter = new MultiFrameResultCrossFilter(); - filter.enableResultCrossVerification("barcode", true); // Filter out unchecked barcodes. + // Filter out unchecked barcodes. + filter.enableResultCrossVerification("barcode", true); // Filter out duplicate barcodes within 3 seconds. filter.enableResultDeduplication("barcode", true); - filter.setDuplicateForgetTime("barcode", 3000); - await router.addResultFilter(filter); - + await this.cvRouter.addResultFilter(filter); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + // Open camera and start scanning single barcode. - await cameraEnhancer.open(); - await router.startCapturing("ReadSingleBarcode"); - return { - cameraView, - cameraEnhancer, - router, - }; - } catch (ex: any) { - let errMsg = ex.message || ex; - console.error(errMsg); - alert(errMsg); - throw ex; - } - } - - async destroy(): Promise { - if (this.pInit) { - const { cameraView, cameraEnhancer, router } = await this.pInit; - router.dispose(); - cameraEnhancer.dispose(); - cameraView.dispose(); - } - } - - async componentDidMount() { - // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. - if (this.pDestroy) { - await this.pDestroy; - this.pInit = this.init(); - } else { - this.pInit = this.init(); + await this.cameraEnhancer.open(); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + await this.cvRouter.startCapturing("ReadSingleBarcode"); + if(this.bDestoryed){ throw Error(strErrorDistoryed); } + + }catch(ex:any){ + + if((ex as Error)?.message === strErrorDistoryed){ + console.log(strErrorDistoryed); + }else{ + let errMsg = ex.message || ex; + console.error(errMsg); + alert(errMsg); + } } + + // distroy function will wait pInit + this.resolveInit!(); } async componentWillUnmount() { - await (this.pDestroy = this.destroy()); - console.log("VideoCapture Component Unmount"); - } - - shouldComponentUpdate() { - // Never update UI after mount, sdk use native way to bind event, update will remove it. - return false; + this.bDestoryed = true; + try{ + await this.pInit; + this.cvRouter?.dispose(); + this.cameraEnhancer?.dispose(); + }catch(_){} } render() { return (
- Results: -

+ Results:
); diff --git a/hello-world/react/src/cvr.ts b/hello-world/react/src/cvr.ts deleted file mode 100644 index 1385011e..00000000 --- a/hello-world/react/src/cvr.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { CoreModule } from 'dynamsoft-core'; -import { LicenseManager } from 'dynamsoft-license'; -import 'dynamsoft-barcode-reader'; - -/** 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' -); - -/** - * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com. - * LICENSE ALERT - THE END - */ - -CoreModule.engineResourcePaths = { - std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.0/dist/", - dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.10/dist/", - core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/", - license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/", - cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/", - dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", - dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.2/dist/" -}; - -// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. -CoreModule.loadWasm(['DBR']); \ No newline at end of file diff --git a/hello-world/react/src/dynamsoft.config.ts b/hello-world/react/src/dynamsoft.config.ts new file mode 100644 index 00000000..8a0d59c1 --- /dev/null +++ b/hello-world/react/src/dynamsoft.config.ts @@ -0,0 +1,29 @@ +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; + +/** 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"); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/" +}; + +// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(["DBR"]); diff --git a/hello-world/react/src/index.tsx b/hello-world/react/src/index.tsx index 51b3d48c..599c94b6 100644 --- a/hello-world/react/src/index.tsx +++ b/hello-world/react/src/index.tsx @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import './index.css'; -import "./cvr"; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement diff --git a/hello-world/read-an-image.html b/hello-world/read-an-image.html index c087755c..9c90a1a9 100644 --- a/hello-world/read-an-image.html +++ b/hello-world/read-an-image.html @@ -3,34 +3,24 @@ - + - + Dynamsoft Barcode Reader Sample - Hello World (Read an Image) - - - -

Hello World (Read an Image)

- -
+
+ Results:
+
+ diff --git a/hello-world/requirejs.html b/hello-world/requirejs.html index 45498906..68e95224 100644 --- a/hello-world/requirejs.html +++ b/hello-world/requirejs.html @@ -7,10 +7,7 @@ - - Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via - Camera) - + Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via Camera) @@ -21,54 +18,20 @@

Hello World for RequireJS (Decode via Camera)


-
- +
-
+
\ No newline at end of file diff --git a/hello-world/vue/src/components/VideoCapture.vue b/hello-world/vue/src/components/VideoCapture.vue index 70a5d4a5..456457ef 100644 --- a/hello-world/vue/src/components/VideoCapture.vue +++ b/hello-world/vue/src/components/VideoCapture.vue @@ -1,105 +1,112 @@ \ No newline at end of file diff --git a/hello-world/vue/src/dynamsoft.config.ts b/hello-world/vue/src/dynamsoft.config.ts new file mode 100644 index 00000000..8a0d59c1 --- /dev/null +++ b/hello-world/vue/src/dynamsoft.config.ts @@ -0,0 +1,29 @@ +import { CoreModule } from "dynamsoft-core"; +import { LicenseManager } from "dynamsoft-license"; +import "dynamsoft-barcode-reader"; + +/** 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"); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&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/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +CoreModule.engineResourcePaths = { + std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/", + dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/", + core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/", + license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/", + cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/", + dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/", + dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/" +}; + +// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(["DBR"]); diff --git a/hello-world/vue/src/main.ts b/hello-world/vue/src/main.ts index 0c27b324..90e6400b 100644 --- a/hello-world/vue/src/main.ts +++ b/hello-world/vue/src/main.ts @@ -1,6 +1,5 @@ import { createApp } from 'vue' import App from './App.vue' -import "./cvr" import './assets/main.css' diff --git a/hello-world/webview/android/README.md b/hello-world/webview/android/README.md index 33766b62..f5a81f5f 100644 --- a/hello-world/webview/android/README.md +++ b/hello-world/webview/android/README.md @@ -2,4 +2,4 @@ This sample demonstrates how to use the [Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/overview/) JS Edition in Android. -If you want to learn how to use the Android Edition SDK in javascript, you can check [Android WebView Barcode Scanning](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/android/JavaScript/WebViewBarcodeScanning). + diff --git a/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html index db14f132..cebefe57 100644 --- a/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html +++ b/hello-world/webview/android/app/src/main/assets/decodeBarcodeInVideo.html @@ -13,90 +13,71 @@

Hello World (Decode via Camera)

- Results: -
+ Results:
- - - - - - + diff --git a/hello-world/webview/ios/README.md b/hello-world/webview/ios/README.md index 899d53d7..744c3b1f 100644 --- a/hello-world/webview/ios/README.md +++ b/hello-world/webview/ios/README.md @@ -2,4 +2,4 @@ This sample demonstrates how to use the [Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/overview/) JS Edition in iOS(Swift). -If you want to learn how to use the Android Edition SDK in javascript, you can check [iOS WebView Barcode Scanning](https://github.com/Dynamsoft/barcode-reader-mobile-samples/tree/main/ios/JavaScript/WebViewBarcodeScanning). + diff --git a/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html b/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html index 3a52b1a7..770a3651 100644 --- a/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html +++ b/hello-world/webview/ios/dbrjswebview/html/decodeFileInVideo.html @@ -16,87 +16,69 @@

Hello World (Decode via Camera)

Results:
- - - - - - + diff --git a/index.html b/index.html index 97d4310b..16d2de9e 100644 --- a/index.html +++ b/index.html @@ -144,7 +144,7 @@

Barcode Reader Samples

Read a + license (AAMVA compliant) and parse it." class="button title" href="use-case/read-a-drivers-license/index.html">Read a Driver's License
diff --git a/others/debug/public/index.html b/others/debug/public/index.html index 0a597f0d..d6d7a4fd 100644 --- a/others/debug/public/index.html +++ b/others/debug/public/index.html @@ -40,20 +40,8 @@

Read Barcodes from Camera - Debug

id="div-ui-container" style="width: 100%; height: calc(100vh - 150px)" >
- - - - - - - - + + - - - - - + + Dynamsoft Barcode Reader Simple Sample - Read Video - Fill Form

Read Barcodes as Input

-
- + + diff --git a/use-case/read-a-drivers-license/style.css b/use-case/read-a-drivers-license/style.css new file mode 100644 index 00000000..605adec2 --- /dev/null +++ b/use-case/read-a-drivers-license/style.css @@ -0,0 +1,174 @@ + +* { + margin: 0; + padding: 0; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; + width: 100vw; + height: 100vh; +} + +#span-tip { + position: absolute; + font-size: 1rem; + color: #fe8e14; + top: 1vh; +} + +h1 { + font-size: 1.5em; +} + +a { + color: #fe8d14; +} + +a:hover { + color: #fe8d14a1; +} + +strong { + color: rgb(254, 142, 20); +} + +#svg-start { + width: 100px; + height: 100px; + fill: #aaa; + cursor: pointer; +} + +#div-main { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 50vw; + height: 60vh; +} + +.dce-bg-camera { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + margin: auto; + width: 40%; + height: 40%; + fill: #aaa; +} + +#div-ui-container { + display: none; + width: 100%; + height: 100%; +} + +#div-result-container { + display: none; + position: fixed; + width: 50vw; + height: 70vh; + z-index: 10; + color: white; + font-size: small; + background: #222222; + margin-top: 30px; +} + +#div-result-container .div-result-header { + width: 100%; + height: 30px; + background-color: #000; + font-size: 16px; + line-height: 30px; + padding-left: 10px; + box-sizing: border-box; +} + +#div-result-container .div-result-body { + height: calc(70vh - 30px); + overflow-y: auto; + padding: 5px; + box-sizing: border-box; +} + +#div-result-container p { + padding: 5px; + margin: 0; +} + +#div-message-container { + display: none; + align-items: center; + width: 50vw; + padding: 8px 16px; + margin: -92px 0 10px 0; + box-sizing: border-box; + border-radius: 4px; + position: relative; + background-color: #f4f4f5; + color: #909399; + overflow: hidden; + transition: opacity 0.2s; +} + +#div-message-container .em-icon { + font-size: 28px; + width: 28px; + line-height: 0; +} + +#div-message-container .div-message-content { + display: table-cell; + padding: 0 8px; +} + +.div-message-content>span { + font-weight: 700; + font-size: 14px; + line-height: 18px; +} + +.div-message-content>p { + font-size: 13px; + margin: 5px 0 0; + line-height: 20px; +} + +.api_highlight { + font-weight: 700; + background-color: #ddd; + border-radius: 4px; + padding: 2px; +} + +.em-close { + position: absolute; + top: 12px; + right: 15px; + cursor: pointer; + line-height: 0; +} + +/* Small devices */ +@media only screen and (max-width: 1000px) { + #div-message-container { + width: 90vw; + } + + #div-main { + width: 80vw; + } + + #div-result-container { + width: 80vw; + } +} diff --git a/use-case/show-result-texts-on-the-video.html b/use-case/show-result-texts-on-the-video.html index 27bab034..06044abd 100644 --- a/use-case/show-result-texts-on-the-video.html +++ b/use-case/show-result-texts-on-the-video.html @@ -15,12 +15,6 @@ Dynamsoft Barcode Reader Sample - Show Result Texts on the Video - - - - - -