From 4c0574c776c5979fe036f5e3184306b60d6b1847 Mon Sep 17 00:00:00 2001 From: Justin Date: Thu, 27 Nov 2025 17:29:33 +0800 Subject: [PATCH 01/32] feat(templates): update templates & add debug tool link --- index.html | 4 +++- scenarios/scan-common-2D-codes/ReadCommon2D.json | 3 +++ scenarios/scan-qr-code/ReadQR.json | 7 +++++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 657a511c..80e1edd4 100644 --- a/index.html +++ b/index.html @@ -1490,7 +1490,9 @@

Debug Tools - + >Debug Tools - Date: Fri, 12 Dec 2025 11:13:34 +0800 Subject: [PATCH 02/32] fix: update canonical links in HTML files for accurate routing --- .../angular/scan-using-foundational-api/src/index.html | 5 +---- frameworks/es6/scan-using-foundational-api/es6.html | 2 +- frameworks/native-ts/scan-using-foundational-api/index.html | 2 +- .../pwa/scan-using-foundational-api/helloworld-pwa.html | 2 +- .../react/scan-using-foundational-api/public/index.html | 2 +- .../requirejs/scan-using-foundational-api/requirejs.html | 2 +- frameworks/vue/scan-using-foundational-api/index.html | 2 +- .../android/app/src/main/assets/decodeBarcodeInVideo.html | 2 +- .../ios/dbrjswebview/html/decodeFileInVideo.html | 2 +- read-an-image.html | 2 +- .../scan-using-foundational-api/index.html | 2 +- .../show-result-texts-on-the-video.html | 2 +- 12 files changed, 12 insertions(+), 15 deletions(-) diff --git a/frameworks/angular/scan-using-foundational-api/src/index.html b/frameworks/angular/scan-using-foundational-api/src/index.html index 7513197d..bce6b22f 100644 --- a/frameworks/angular/scan-using-foundational-api/src/index.html +++ b/frameworks/angular/scan-using-foundational-api/src/index.html @@ -11,10 +11,7 @@ content="Dynamsoft Barcode Reader in an Angular Application, helps read barcodes from camera or images." /> - + diff --git a/frameworks/es6/scan-using-foundational-api/es6.html b/frameworks/es6/scan-using-foundational-api/es6.html index f736d6d7..134f065e 100644 --- a/frameworks/es6/scan-using-foundational-api/es6.html +++ b/frameworks/es6/scan-using-foundational-api/es6.html @@ -5,7 +5,7 @@ - + Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera) diff --git a/frameworks/native-ts/scan-using-foundational-api/index.html b/frameworks/native-ts/scan-using-foundational-api/index.html index 50571ccb..6abae2bc 100644 --- a/frameworks/native-ts/scan-using-foundational-api/index.html +++ b/frameworks/native-ts/scan-using-foundational-api/index.html @@ -6,7 +6,7 @@ - + Dynamsoft Barcode Reader Sample - Hello World (Decode via Camera) diff --git a/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html b/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html index af66f6e4..02c306b7 100644 --- a/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html +++ b/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html @@ -6,7 +6,7 @@ Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) - + diff --git a/frameworks/react/scan-using-foundational-api/public/index.html b/frameworks/react/scan-using-foundational-api/public/index.html index 6628cd75..a289ff17 100644 --- a/frameworks/react/scan-using-foundational-api/public/index.html +++ b/frameworks/react/scan-using-foundational-api/public/index.html @@ -10,7 +10,7 @@ content="Dynamsoft Barcode Reader in a React Application, helps read barcodes from camera or images." /> - + - + - + From 751d5be70ab298cc0a8aa6fa0c13f52f516ea2d1 Mon Sep 17 00:00:00 2001 From: Justin Date: Wed, 7 Jan 2026 17:18:53 +0800 Subject: [PATCH 06/32] fix: update license initialization and update read-an-image.html --- read-an-image.html | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/read-an-image.html b/read-an-image.html index b38a9ee3..51bbbb2a 100644 --- a/read-an-image.html +++ b/read-an-image.html @@ -21,35 +21,30 @@

Hello World (Read an Image)

+ + - + - + + + + + + + + + + + \ No newline at end of file From f2a035ebee785d35b7beeb05b87c2b543ff843b5 Mon Sep 17 00:00:00 2001 From: SHEN <1014628363@qq.com> Date: Fri, 27 Feb 2026 15:28:56 +0800 Subject: [PATCH 17/32] UPDATE --- .../src/app/dynamsoft.config.ts | 4 +- .../BlazorApp/wwwroot/index.html | 2 +- .../scan-using-foundational-api/action.js | 4 +- .../electron/scan-using-rtu-api/action.js | 4 +- .../es6/scan-using-foundational-api/es6.html | 2 +- frameworks/es6/scan-using-rtu-api/es6.html | 17 +- .../scan-using-foundational-api/index.ts | 2 +- .../native-ts/scan-using-rtu-api/index.ts | 4 +- .../dynamsoft.config.ts | 4 +- .../dynamsoft.config.ts | 2 +- .../helloworld-pwa.html | 172 +++++++++--------- .../src/dynamsoft.config.ts | 2 +- .../requirejs.html | 2 +- .../scan-using-rtu-api/requirejs.html | 6 +- .../scan-using-foundational-api/package.json | 2 +- .../src/dynamsoft.config.ts | 2 +- .../svelte/scan-using-rtu-api/package.json | 2 +- .../src/dynamsoft.config.ts | 2 +- hello-world.html | 7 +- scenarios/debug/public/index.html | 2 +- .../locate-an-item-with-barcode/index.html | 2 +- scenarios/read-a-drivers-license/index.html | 2 +- .../scan-using-foundational-api/index.html | 2 +- .../show-result-texts-on-the-video.html | 2 +- 24 files changed, 127 insertions(+), 125 deletions(-) diff --git a/frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts b/frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts index 7d462b81..e4246de0 100644 --- a/frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts +++ b/frameworks/angular/scan-using-foundational-api/src/app/dynamsoft.config.ts @@ -7,9 +7,7 @@ CoreModule.engineResourcePaths.rootDirectory = 'https://cdn.jsdelivr.net/npm/'; * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. */ -LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', { - executeNow: true, -}); +LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', { executeNow: true }); /** * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days. diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/index.html b/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/index.html index 61178e41..fd4d7ef1 100644 --- a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/index.html +++ b/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/index.html @@ -35,7 +35,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", { executeNow: true }); /** * 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. diff --git a/frameworks/electron/scan-using-foundational-api/action.js b/frameworks/electron/scan-using-foundational-api/action.js index 7badaa96..a97067ba 100644 --- a/frameworks/electron/scan-using-foundational-api/action.js +++ b/frameworks/electron/scan-using-foundational-api/action.js @@ -7,9 +7,7 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = { * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. */ -Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", { - executeNow: true, -}); +Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", { executeNow: true }); /** * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days. diff --git a/frameworks/electron/scan-using-rtu-api/action.js b/frameworks/electron/scan-using-rtu-api/action.js index 5b6f0295..6463574f 100644 --- a/frameworks/electron/scan-using-rtu-api/action.js +++ b/frameworks/electron/scan-using-rtu-api/action.js @@ -19,4 +19,6 @@ barcodeScanner.launch().then((result) => { if (result.barcodeResults.length) { alert(result.barcodeResults[0].text); } -}); +}).catch((err) => { + alert(err.message || err); +});; diff --git a/frameworks/es6/scan-using-foundational-api/es6.html b/frameworks/es6/scan-using-foundational-api/es6.html index 134f065e..c5714171 100644 --- a/frameworks/es6/scan-using-foundational-api/es6.html +++ b/frameworks/es6/scan-using-foundational-api/es6.html @@ -28,7 +28,7 @@

Hello World for ES6 (Decode via Camera)

* 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", { executeNow: true }); /** * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days. diff --git a/frameworks/es6/scan-using-rtu-api/es6.html b/frameworks/es6/scan-using-rtu-api/es6.html index 555836ca..fcbeee04 100644 --- a/frameworks/es6/scan-using-rtu-api/es6.html +++ b/frameworks/es6/scan-using-rtu-api/es6.html @@ -17,7 +17,7 @@

+ + + + + +``` +> Note: +> +> If you're looking to customize the UI, the UI customization feature are provided by the auxiliary SDK "Dynamsoft Camera Enhancer". For more details, refer to our [User Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#customizing-the-ui) + +### Edit the `ImageCapture` component + +* In `ImageCapture.client.vue`, add code for initializing and destroying the `CaptureVisionRouter` instance. The `ImageCapture` helps decode barcodes in an image. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```vue + + + + + + +``` + +### Add `VideoCapture` and `ImageCapture` components in `app.vue` + +* On `/app.vue`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. + +* Add following code to `app.vue`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). + +```vue + + + + +``` +> Note: +> +> Since `VideoCapture` and `ImageCapture` components are only rendered on the client side, we want to make sure that these components are not causing sie effects during the server rendering phase. We can solve this using the `client-only` component. + +* Try running the project. + +```cmd +npm run dev +``` + +If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. + +## Project Setup + +```sh +npm install +``` + +### Compile and Hot-Reload for Development + +```sh +npm run dev +``` + +### Type-Check, Compile and Minify for Production + +```sh +npm run build +``` + +## Support + +If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-rtu-api/app.vue b/frameworks/nuxt/scan-using-rtu-api/app.vue new file mode 100644 index 00000000..7504a7f9 --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/app.vue @@ -0,0 +1,57 @@ + + + + + \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-rtu-api/assets/logo.svg b/frameworks/nuxt/scan-using-rtu-api/assets/logo.svg new file mode 100644 index 00000000..42fdb9d8 --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-rtu-api/assets/main.css b/frameworks/nuxt/scan-using-rtu-api/assets/main.css new file mode 100644 index 00000000..b458c93e --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/assets/main.css @@ -0,0 +1,7 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + text-align: center; + } + \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-rtu-api/dynamsoft.config.ts b/frameworks/nuxt/scan-using-rtu-api/dynamsoft.config.ts new file mode 100644 index 00000000..b25d65cb --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/dynamsoft.config.ts @@ -0,0 +1,20 @@ +import { CoreModule, LicenseManager } from "dynamsoft-barcode-reader-bundle"; + +// Configures the paths where the .wasm files and other necessary resources for modules are located. +CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/"; + +/** LICENSE ALERT - README + * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. + */ + +LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", { executeNow: true }); + +/** + * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days. + * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. + * For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html?ver=11.2.4000&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com. + * LICENSE ALERT - THE END + */ + +// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading. +CoreModule.loadWasm(); diff --git a/frameworks/nuxt/scan-using-rtu-api/nuxt.config.ts b/frameworks/nuxt/scan-using-rtu-api/nuxt.config.ts new file mode 100644 index 00000000..70721a9e --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/nuxt.config.ts @@ -0,0 +1,7 @@ +// https://nuxt.com/docs/api/configuration/nuxt-config +export default defineNuxtConfig({ + nitro: { + compatibilityDate: "2026-02-27", + }, + css: ["~/assets/main.css"], +}) diff --git a/frameworks/nuxt/scan-using-rtu-api/package.json b/frameworks/nuxt/scan-using-rtu-api/package.json new file mode 100644 index 00000000..000d468c --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/package.json @@ -0,0 +1,18 @@ +{ + "name": "dbrjs-nuxt-sample", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare" + }, + "devDependencies": { + "nuxt": "3.2.3" + }, + "dependencies": { + "dynamsoft-barcode-reader-bundle": "11.2.4000" + } +} \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-rtu-api/public/favicon.ico b/frameworks/nuxt/scan-using-rtu-api/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..18993ad91cfd43e03b074dd0b5cc3f37ab38e49c GIT binary patch literal 4286 zcmeHLOKuuL5PjK%MHWVi6lD zOGiREbCw`xmFozJ^aNatJY>w+g ze6a2@u~m#^BZm@8wco9#Crlli0uLb^3E$t2-WIc^#(?t)*@`UpuofJ(Uyh@F>b3Ph z$D^m8Xq~pTkGJ4Q`Q2)te3mgkWYZ^Ijq|hkiP^9`De={bQQ%heZC$QU2UpP(-tbl8 zPWD2abEew;oat@w`uP3J^YpsgT%~jT(Dk%oU}sa$7|n6hBjDj`+I;RX(>)%lm_7N{+B7Mu%H?422lE%MBJH!!YTN2oT7xr>>N-8OF$C&qU^ z>vLsa{$0X%q1fjOe3P1mCv#lN{xQ4_*HCSAZjTb1`}mlc+9rl8$B3OP%VT@mch_~G z7Y+4b{r>9e=M+7vSI;BgB?ryZDY4m>&wcHSn81VH1N~`0gvwH{ z8dv#hG|OK`>1;j7tM#B)Z7zDN?{6=dUal}$e Date: Fri, 27 Feb 2026 16:01:33 +0800 Subject: [PATCH 20/32] Update app.vue --- frameworks/nuxt/scan-using-rtu-api/app.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frameworks/nuxt/scan-using-rtu-api/app.vue b/frameworks/nuxt/scan-using-rtu-api/app.vue index 7504a7f9..ec91ad15 100644 --- a/frameworks/nuxt/scan-using-rtu-api/app.vue +++ b/frameworks/nuxt/scan-using-rtu-api/app.vue @@ -1,5 +1,5 @@ From 5c5c8be4051bf2cf2a6cd203bfa55d42d86f25f6 Mon Sep 17 00:00:00 2001 From: Justin Date: Fri, 27 Feb 2026 16:41:27 +0800 Subject: [PATCH 21/32] feat: update documentation for Next.js and Nuxt.js --- frameworks/es6/scan-using-rtu-api/es6.html | 6 ++-- frameworks/next/README.md | 5 +-- frameworks/next/scan-using-rtu-api/README.md | 35 ++++++++++++++++++-- frameworks/nuxt/README.md | 5 +-- frameworks/nuxt/scan-using-rtu-api/README.md | 35 ++++++++++++++++++-- 5 files changed, 75 insertions(+), 11 deletions(-) diff --git a/frameworks/es6/scan-using-rtu-api/es6.html b/frameworks/es6/scan-using-rtu-api/es6.html index fcbeee04..a05e2805 100644 --- a/frameworks/es6/scan-using-rtu-api/es6.html +++ b/frameworks/es6/scan-using-rtu-api/es6.html @@ -17,7 +17,7 @@

- - + // Define a callback for results. + cvRouter.addResultReceiver({ + onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; + + const resultsContainer = document.querySelector("#results"); + resultsContainer.textContent = ""; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`; + } + }, + }); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + // Filter out unchecked barcodes. + filter.enableResultCrossVerification("barcode", true); + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication("barcode", true); + await cvRouter.addResultFilter(filter); + + // Open camera and start scanning barcode. + await cameraEnhancer.open(); + cameraView.setScanLaserVisible(true); + await cvRouter.startCapturing("ReadBarcodes_SpeedFirst"); + } catch (ex) { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } + })(); + + + + \ No newline at end of file diff --git a/frameworks/es6/scan-using-rtu-api/es6.html b/frameworks/es6/scan-using-rtu-api/es6.html index a05e2805..07a8dbf8 100644 --- a/frameworks/es6/scan-using-rtu-api/es6.html +++ b/frameworks/es6/scan-using-rtu-api/es6.html @@ -17,7 +17,7 @@

+ diff --git a/frameworks/nuxt/scan-using-rtu-api/dev.err b/frameworks/nuxt/scan-using-rtu-api/dev.err new file mode 100644 index 00000000..8bc761c2 --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/dev.err @@ -0,0 +1,5 @@ + + WARN Current version of Node.js (20.19.6) is unsupported and might cause issues. + Please upgrade to a compatible version (^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0). + +^C \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-rtu-api/package.json b/frameworks/nuxt/scan-using-rtu-api/package.json index 000d468c..2f9484a7 100644 --- a/frameworks/nuxt/scan-using-rtu-api/package.json +++ b/frameworks/nuxt/scan-using-rtu-api/package.json @@ -10,9 +10,10 @@ "postinstall": "nuxt prepare" }, "devDependencies": { + "@types/node": "^25.3.3", "nuxt": "3.2.3" }, "dependencies": { "dynamsoft-barcode-reader-bundle": "11.2.4000" } -} \ No newline at end of file +} diff --git a/frameworks/nuxt/scan-using-rtu-api/response.html b/frameworks/nuxt/scan-using-rtu-api/response.html new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/response.html @@ -0,0 +1 @@ + diff --git a/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html b/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html index a1acdfed..5d156f50 100644 --- a/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html +++ b/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html @@ -53,6 +53,9 @@

Hello World for PWA

// Get default UI and append it to DOM. document.querySelector("#camera-view-container").append(cameraView.getUIElement()); + // Hide the "Powered by Message" overlay on the scanner view + // cameraView.setPowerByMessageVisible(false); + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); cvRouter.setInput(cameraEnhancer); diff --git a/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.html b/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.html index 45643f91..7afb3ae0 100644 --- a/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.html +++ b/frameworks/pwa/scan-using-rtu-api/helloworld-pwa.html @@ -1,20 +1,21 @@ - - - - - - Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) - - - - - - - - - + + + + + + + Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) + + + + + + + + + @@ -35,11 +36,21 @@

license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key container: document.querySelector(".barcode-scanner-view"), // Specify where to render the scanner UI + /* + scanMode controls the scanning behavior: + - SM_MULTI_UNIQUE: Continuously scans and collects each unique barcode. + - SM_SINGLE: Stops scanning after the first barcode is detected. + */ + scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE, + // showUploadImageButton: true, // scannerViewConfig: { // showFlashButton: true, // cameraSwitchControl: "toggleFrontBack", // }, + + // The watermark can be removed via showPoweredByDynamsoft configuration option. + // showPoweredByDynamsoft: false, }; // Create a new instance of the Dynamsoft Barcode Scanner @@ -95,4 +106,4 @@

- + \ No newline at end of file diff --git a/frameworks/react/scan-using-foundational-api/src/components/VideoCapture/VideoCapture.tsx b/frameworks/react/scan-using-foundational-api/src/components/VideoCapture/VideoCapture.tsx index d619ab47..39a3dff6 100644 --- a/frameworks/react/scan-using-foundational-api/src/components/VideoCapture/VideoCapture.tsx +++ b/frameworks/react/scan-using-foundational-api/src/components/VideoCapture/VideoCapture.tsx @@ -23,6 +23,10 @@ function VideoCapture() { try { // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. const cameraView = await CameraView.createInstance(); + + // Hide the "Powered by Message" overlay on the scanner view + // cameraView.setPowerByMessageVisible(false); + if (isDestroyed) { throw Error(componentDestroyedErrorMsg); } // Check if component is destroyed after every async diff --git a/frameworks/react/scan-using-rtu-api/src/App.tsx b/frameworks/react/scan-using-rtu-api/src/App.tsx index 85fc7cfa..88d92dd8 100644 --- a/frameworks/react/scan-using-rtu-api/src/App.tsx +++ b/frameworks/react/scan-using-rtu-api/src/App.tsx @@ -1,10 +1,10 @@ -import { useEffect, useRef } from 'react'; -import { BarcodeScanner, type BarcodeScannerConfig } from "dynamsoft-barcode-reader-bundle"; +import { useEffect, useRef } from 'react'; +import { BarcodeScanner, EnumScanMode, type BarcodeScannerConfig } from "dynamsoft-barcode-reader-bundle"; function App() { const barcodeScannerViewRef = useRef(null); - + useEffect(() => { // Configuration object for initializing the BarcodeScanner instance @@ -13,11 +13,18 @@ function App() { // Specify where to render the scanner UI // If container is not specified, the UI will take up the full screen - container: barcodeScannerViewRef.current!, + container: barcodeScannerViewRef.current!, // Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view. uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/ui/barcode-scanner.ui.xml", + /* + scanMode controls the scanning behavior: + - SM_MULTI_UNIQUE: Continuously scans and collects each unique barcode. + - SM_SINGLE: Stops scanning after the first barcode is detected. + */ + scanMode: EnumScanMode.SM_MULTI_UNIQUE, + // showUploadImageButton: true, // scannerViewConfig: { // showFlashButton: true, @@ -28,12 +35,14 @@ function App() { engineResourcePaths: { rootDirectory: "https://cdn.jsdelivr.net/npm/", }, + // The watermark can be removed via showPoweredByDynamsoft configuration option. + // showPoweredByDynamsoft: false, } // Create an instance of the BarcodeScanner with the provided configuration const barcodeScanner = new BarcodeScanner(config); - (async ()=>{ + (async () => { // Launch the scanner; once a barcode is detected, display its text in an alert let result = await barcodeScanner.launch(); if (result.barcodeResults.length) { @@ -41,7 +50,7 @@ function App() { } })(); - return ()=>{ + return () => { // Dispose of the barcode scanner when the component unmounts barcodeScanner?.dispose(); }; diff --git a/frameworks/requirejs/scan-using-foundational-api/requirejs.html b/frameworks/requirejs/scan-using-foundational-api/requirejs.html index 3fc14b57..02c385ba 100644 --- a/frameworks/requirejs/scan-using-foundational-api/requirejs.html +++ b/frameworks/requirejs/scan-using-foundational-api/requirejs.html @@ -1,95 +1,101 @@ - - - - - - - Dynamsoft Barcode Reader Sample - Hello World for RequireJS (Decode via Camera) - - - -

Hello World for RequireJS (Decode via Camera)

-
- Results: -
-
- + - LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", { executeNow: true }); + +

Hello World for RequireJS (Decode via Camera)

+
+ Results: +
+
+ - - + // Define a callback for results. + cvRouter.addResultReceiver({ + onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; + + const resultsContainer = document.querySelector("#results"); + resultsContainer.textContent = ""; + console.log(result); + for (let item of result.barcodeResultItems) { + resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`; + } + }, + }); + + // Filter out unchecked and duplicate results. + const filter = new MultiFrameResultCrossFilter(); + // Filter out unchecked barcodes. + filter.enableResultCrossVerification("barcode", true); + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication("barcode", true); + await cvRouter.addResultFilter(filter); + + // Open camera and start scanning barcode. + await cameraEnhancer.open(); + cameraView.setScanLaserVisible(true); + await cvRouter.startCapturing("ReadBarcodes_SpeedFirst"); + } catch (ex) { + let errMsg = ex.message || ex; + console.error(ex); + alert(errMsg); + } + })(); + } + ); + + + + \ No newline at end of file diff --git a/frameworks/requirejs/scan-using-rtu-api/requirejs.html b/frameworks/requirejs/scan-using-rtu-api/requirejs.html index 5e29491f..f90483fc 100644 --- a/frameworks/requirejs/scan-using-rtu-api/requirejs.html +++ b/frameworks/requirejs/scan-using-rtu-api/requirejs.html @@ -20,7 +20,7 @@

Barcode Scanner for Svelte

-
-
+
diff --git a/frameworks/vue/scan-using-foundational-api/src/components/VideoCapture.vue b/frameworks/vue/scan-using-foundational-api/src/components/VideoCapture.vue index e29bc007..cab91598 100644 --- a/frameworks/vue/scan-using-foundational-api/src/components/VideoCapture.vue +++ b/frameworks/vue/scan-using-foundational-api/src/components/VideoCapture.vue @@ -19,6 +19,10 @@ onMounted(async () => { try { // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. const cameraView = await CameraView.createInstance(); + + // Hide the "Powered by Message" overlay on the scanner view + // cameraView.setPowerByMessageVisible(false); + if (isDestroyed) { throw Error(componentDestroyedErrorMsg); } // Check if component is destroyed after every async cameraEnhancer = await CameraEnhancer.createInstance(cameraView); diff --git a/frameworks/vue/scan-using-rtu-api/src/App.vue b/frameworks/vue/scan-using-rtu-api/src/App.vue index 360b680a..4842b0fd 100644 --- a/frameworks/vue/scan-using-rtu-api/src/App.vue +++ b/frameworks/vue/scan-using-rtu-api/src/App.vue @@ -1,22 +1,29 @@ diff --git a/read-an-image.html b/read-an-image.html index c485849e..23e4e2b4 100644 --- a/read-an-image.html +++ b/read-an-image.html @@ -12,7 +12,9 @@

Hello World (Read an Image)

-
+ + +
Results:
@@ -29,44 +31,42 @@

Hello World (Read an Image)

* LICENSE ALERT - THE END */ let config = { - license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", - }; + license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", + }; // Create a new instance of the Dynamsoft Barcode Scanner const barcodeScanner = new Dynamsoft.BarcodeScanner(config); const resultsContainer = document.querySelector("#results"); - document.querySelector("#input-file").addEventListener("change", async function () { - let files = [...this.files]; + document.querySelector("#input-file").addEventListener("change", async function (e) { + let file = e.target.files[0]; this.value = ""; resultsContainer.innerText = ""; try { - for (let file of files) { - // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. - const result = await barcodeScanner.decode(file, "ReadBarcodes_ReadRateFirst"); - const barcodeResultItems = result.decodedBarcodesResult?.barcodeResultItems; - - if (files.length > 1) { - resultsContainer.innerText += `\n${file.name}:\n`; - } - if (!barcodeResultItems?.length){ - resultsContainer.innerText += "No barcode found\n"; - continue; - } + document.querySelector("#decoding").style.display = "inline"; // Show decoding indicator during the decoding process + // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. + const result = await barcodeScanner.decode(file, "ReadBarcodes_ReadRateFirst"); + const barcodeResultItems = result.decodedBarcodesResult?.barcodeResultItems; + + if (!barcodeResultItems) { + resultsContainer.innerText += "No barcode found\n"; + return; + } - for (let item of barcodeResultItems) { - resultsContainer.innerText += item.text + "\n"; - console.log(item.text); - } + for (let item of barcodeResultItems) { + resultsContainer.innerText += item.text + "\n"; + console.log(item.text); } } catch (ex) { let errMsg = ex.message || ex; console.error(ex); alert(errMsg); + } finally { + document.querySelector("#decoding").style.display = "none"; // Hide decoding indicator after the decoding process } }); - + \ No newline at end of file diff --git a/scan-a-single-barcode.html b/scan-a-single-barcode.html new file mode 100644 index 00000000..4ffdae71 --- /dev/null +++ b/scan-a-single-barcode.html @@ -0,0 +1,114 @@ + + + + + + + + Dynamsoft Barcode Scanner Sample - Hello World (Decode via Camera) + + + + +

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

+ + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/scenarios/batch-inventory/index.html b/scenarios/batch-inventory/index.html index 12f7ee16..232822b6 100644 --- a/scenarios/batch-inventory/index.html +++ b/scenarios/batch-inventory/index.html @@ -56,7 +56,9 @@ let config = { license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key container: barcodeScannerView, // Specify where to render the scanner UI - scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE + scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE, + // The watermark can be removed via showPoweredByDynamsoft configuration option. + // showPoweredByDynamsoft: false, } // Create a new instance of the Dynamsoft Barcode Scanner @@ -108,7 +110,7 @@ const mergeResult = (newResult) => { for (let formatString in newResult) { - if(!totalUniqueBarcodesResult.hasOwnProperty(formatString)) { + if (!totalUniqueBarcodesResult.hasOwnProperty(formatString)) { totalUniqueBarcodesResult[formatString] = newResult[formatString]; } else { totalUniqueBarcodesResult[formatString] += newResult[formatString]; diff --git a/scenarios/cart-builder/cart-builder.html b/scenarios/cart-builder/cart-builder.html index b5f39afd..ee1f46c5 100644 --- a/scenarios/cart-builder/cart-builder.html +++ b/scenarios/cart-builder/cart-builder.html @@ -147,6 +147,8 @@

Simulated Shopping Cart

// Simulate adding the scanned barcode to the shopping cart simulateAddingToCart(result.text); }, + // The watermark can be removed via showPoweredByDynamsoft configuration option. + // showPoweredByDynamsoft: false, }); // Show the floating scanner container diff --git a/scenarios/debug/public/index.html b/scenarios/debug/public/index.html index 9df95cf3..7d85f543 100644 --- a/scenarios/debug/public/index.html +++ b/scenarios/debug/public/index.html @@ -55,6 +55,9 @@

Read Barcodes from Camera - Debug

// Get default UI and append it to DOM. document.querySelector("#div-ui-container").append(cameraView.getUIElement()); + // Hide the "Powered by Message" overlay on the scanner view + // cameraView.setPowerByMessageVisible(false); + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); cvRouter.setInput(cameraEnhancer); diff --git a/scenarios/locate-an-item-with-barcode/index.html b/scenarios/locate-an-item-with-barcode/index.html index 33c48525..b062a5a4 100644 --- a/scenarios/locate-an-item-with-barcode/index.html +++ b/scenarios/locate-an-item-with-barcode/index.html @@ -376,7 +376,10 @@
const cameraView = await Dynamsoft.DCE.CameraView.createInstance(cameraViewContainer); // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); - cameraView.setVideoFit("cover"); + // cameraView.setVideoFit("cover"); + + // Hide the "Powered by Message" overlay on the scanner view + // cameraView.setPowerByMessageVisible(false); // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); diff --git a/scenarios/pick-one-to-fill/index.html b/scenarios/pick-one-to-fill/index.html index 49cfe1c4..6bc36616 100644 --- a/scenarios/pick-one-to-fill/index.html +++ b/scenarios/pick-one-to-fill/index.html @@ -74,7 +74,9 @@ onInitReady: (components) => { components.cameraView.setVideoFit("contain"); cvRouter = components.cvRouter; - } + }, + // The watermark can be removed via showPoweredByDynamsoft configuration option. + // showPoweredByDynamsoft: false, }; // Create a new instance of the Dynamsoft Barcode Scanner @@ -98,11 +100,13 @@ barcodeScannerView.style.display = "none"; scanBtn.style.display = "inline-block"; decodeBtn.style.display = "none"; + decodeBtn.innerText = "Decode to Auto-Fill"; barcodeScanner = null; }); }) decodeBtn.addEventListener("click", () => { + decodeBtn.innerText = "Scanning..."; cvRouter.startCapturing("ReadBarcodes_SpeedFirst"); }) } diff --git a/scenarios/read-a-drivers-license/index.html b/scenarios/read-a-drivers-license/index.html index c332d44f..d385ab7d 100644 --- a/scenarios/read-a-drivers-license/index.html +++ b/scenarios/read-a-drivers-license/index.html @@ -24,8 +24,10 @@

Read a Driver's License

    -
    Back to Scan
    +
    Back to Scan
    + No PDF417 detected. Please try again.
    + diff --git a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html b/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html index c12e5f44..e0d860e6 100644 --- a/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html +++ b/scenarios/read-and-parse-GS1-AI/scan-using-rtu-api/index.html @@ -1,282 +1,287 @@ - - - - Read a GS1 Application Identifier (AI) - - - -
    -
    Read a GS1 Application Identifier (AI)
    -
    -
    -
    -     -
    - -