From 099c644315b917b62b223f80e217159ecf43c484 Mon Sep 17 00:00:00 2001 From: Justin-dynamsoft <117710848+Justin-dynamsoft@users.noreply.github.com> Date: Mon, 15 Dec 2025 10:20:30 +0800 Subject: [PATCH 1/7] fix(security): update vulnerable dependency versions (#272) * feat(templates): update templates & add debug tool link * fix: update canonical links in HTML files for accurate routing * UPDATE --------- Co-authored-by: SHEN <1014628363@qq.com> --- .../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 +- frameworks/next/scan-using-foundational-api/package.json | 2 +- .../pwa/scan-using-foundational-api/helloworld-pwa.html | 2 +- .../react/scan-using-foundational-api/public/index.html | 2 +- frameworks/react/scan-using-rtu-api/package.json | 4 ++-- .../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 +- 14 files changed, 15 insertions(+), 18 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/next/scan-using-foundational-api/package.json b/frameworks/next/scan-using-foundational-api/package.json index a52ba588..1c0daba4 100644 --- a/frameworks/next/scan-using-foundational-api/package.json +++ b/frameworks/next/scan-using-foundational-api/package.json @@ -11,7 +11,7 @@ "dependencies": { "react": "^18", "react-dom": "^18", - "next": "14.2.3", + "next": "14.2.35", "dynamsoft-barcode-reader-bundle": "11.2.4000" }, "devDependencies": { 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 92067ce9fb4fe1ba314311b96b921fdcdce62a5f Mon Sep 17 00:00:00 2001 From: Justin-dynamsoft <117710848+Justin-dynamsoft@users.noreply.github.com> Date: Mon, 12 Jan 2026 13:35:25 +0800 Subject: [PATCH 5/7] fix(security): update vulnerable dependency versions (#278) * feat(templates): update templates & add debug tool link * fix: update canonical links in HTML files for accurate routing * UPDATE * fix: update script path for local SDK loading in HTML files * fix: correct spelling of launchBarcodeScanner function * fix: update license initialization and update read-an-image.html * UPDATE VERSION --------- Co-authored-by: SHEN <1014628363@qq.com> --- .../scan-using-foundational-api/package.json | 26 +++++++++---------- .../angular/scan-using-rtu-api/package.json | 20 +++++++------- read-an-image.html | 25 +++++++----------- 3 files changed, 33 insertions(+), 38 deletions(-) diff --git a/frameworks/angular/scan-using-foundational-api/package.json b/frameworks/angular/scan-using-foundational-api/package.json index 38257365..63b37178 100644 --- a/frameworks/angular/scan-using-foundational-api/package.json +++ b/frameworks/angular/scan-using-foundational-api/package.json @@ -10,23 +10,23 @@ }, "private": true, "dependencies": { - "@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", + "@angular/animations": "19.2.18", + "@angular/common": "19.2.18", + "@angular/compiler": "19.2.18", + "@angular/core": "19.2.18", + "@angular/forms": "19.2.18", + "@angular/platform-browser": "19.2.18", + "@angular/platform-browser-dynamic": "19.2.18", + "@angular/router": "19.2.18", "dynamsoft-barcode-reader-bundle": "11.2.4000", "rxjs": "~7.8.0", "tslib": "^2.3.0", - "zone.js": "~0.14.3" + "zone.js": "~0.15.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^17.3.7", - "@angular/cli": "^17.3.7", - "@angular/compiler-cli": "^17.3.0", + "@angular-devkit/build-angular": "19.2.18", + "@angular/cli": "19.2.18", + "@angular/compiler-cli": "19.2.18", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", @@ -34,6 +34,6 @@ "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", - "typescript": "~5.4.2" + "typescript": "~5.5" } } diff --git a/frameworks/angular/scan-using-rtu-api/package.json b/frameworks/angular/scan-using-rtu-api/package.json index ec3245cf..63ed4f23 100644 --- a/frameworks/angular/scan-using-rtu-api/package.json +++ b/frameworks/angular/scan-using-rtu-api/package.json @@ -9,22 +9,22 @@ }, "private": true, "dependencies": { - "@angular/common": "^19.2.0", - "@angular/compiler": "^19.2.0", - "@angular/core": "^19.2.0", - "@angular/forms": "^19.2.0", - "@angular/platform-browser": "^19.2.0", - "@angular/platform-browser-dynamic": "^19.2.0", - "@angular/router": "^19.2.0", + "@angular/common": "19.2.18", + "@angular/compiler": "19.2.18", + "@angular/core": "19.2.18", + "@angular/forms": "19.2.18", + "@angular/platform-browser": "19.2.18", + "@angular/platform-browser-dynamic": "19.2.18", + "@angular/router": "19.2.18", "dynamsoft-barcode-reader-bundle": "11.2.4000", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^19.2.8", - "@angular/cli": "^19.2.8", - "@angular/compiler-cli": "^19.2.0", + "@angular-devkit/build-angular": "19.2.8", + "@angular/cli": "19.2.8", + "@angular/compiler-cli": "19.2.18", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.6.0", "karma": "~6.4.0", 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)

- - + // 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/README.md b/frameworks/es6/scan-using-rtu-api/README.md new file mode 100644 index 00000000..8cec3615 --- /dev/null +++ b/frameworks/es6/scan-using-rtu-api/README.md @@ -0,0 +1,46 @@ +# 📦 Scan Single Barcode - ES6 + +This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) with **ES6 modules** to scan a single barcode using the camera. + +## ✨ Features + +- Easy integration with pre-built UI using ES6 module imports +- BarcodeScanner instance with minimal configuration +- Scans one barcode at a time from video +- Uses native ES6 module syntax for clean, modern code + +## 🚀 Quick Start + +Open `es6.html` in a web browser (via `http://` or `https://` protocol, not `file://`). + +## Implementation Highlights + +### ES6 Module Import + +```javascript +import { BarcodeScanner } from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.mjs"; +``` + +### Simple Configuration + +```javascript +let config = { + license: "YOUR-LICENSE-KEY", + container: document.querySelector(".barcode-scanner-view"), + uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/ui/barcode-scanner.ui.xml", + engineResourcePaths: { + rootDirectory: "https://cdn.jsdelivr.net/npm/", + }, +}; + +const barcodeScanner = new BarcodeScanner(config); +let result = await barcodeScanner.launch(); +``` + +## 📌 Customization + +Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). + +## 📄 Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/es6/scan-using-rtu-api/es6.html b/frameworks/es6/scan-using-rtu-api/es6.html index 555836ca..07a8dbf8 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..a34addf6 --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/app.vue @@ -0,0 +1,66 @@ + + + + + \ 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..3b4c34f9 --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/assets/main.css @@ -0,0 +1,6 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + \ 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..2f9484a7 --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/package.json @@ -0,0 +1,19 @@ +{ + "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": { + "@types/node": "^25.3.3", + "nuxt": "3.2.3" + }, + "dependencies": { + "dynamsoft-barcode-reader-bundle": "11.2.4000" + } +} 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 - - - - - - Dynamsoft Barcode Reader PWA Sample - Hello World (Decode via Camera) - - - - - - - - - - - -

Hello World for PWA

-
-
- Results: -
- - + - - - + })(); + + + + + \ No newline at end of file diff --git a/frameworks/pwa/scan-using-rtu-api/README.md b/frameworks/pwa/scan-using-rtu-api/README.md index 80d5be59..7a9a2965 100644 --- a/frameworks/pwa/scan-using-rtu-api/README.md +++ b/frameworks/pwa/scan-using-rtu-api/README.md @@ -1,6 +1,6 @@ # 📦 Scan Single Barcode - PWA -This sample shows how to integrate the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) into a **PWA** application to scan a single barcode from video. +This sample shows how to integrate the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) into a **PWA** application to scan a single barcode from video. ## ✨ Features 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-foundational-api/src/dynamsoft.config.ts b/frameworks/react/scan-using-foundational-api/src/dynamsoft.config.ts index 185ff12a..b25d65cb 100644 --- a/frameworks/react/scan-using-foundational-api/src/dynamsoft.config.ts +++ b/frameworks/react/scan-using-foundational-api/src/dynamsoft.config.ts @@ -7,7 +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"); +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/react/scan-using-rtu-api/README.md b/frameworks/react/scan-using-rtu-api/README.md index 78d419a2..90330349 100644 --- a/frameworks/react/scan-using-rtu-api/README.md +++ b/frameworks/react/scan-using-rtu-api/README.md @@ -1,6 +1,6 @@ # 📦 Scan Single Barcode - React -This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) in a **React** app to scan a single barcode using the camera. +This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) in a **React** app to scan a single barcode using the camera. ## ✨ Features 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/README.md b/frameworks/requirejs/scan-using-foundational-api/README.md new file mode 100644 index 00000000..254f77a8 --- /dev/null +++ b/frameworks/requirejs/scan-using-foundational-api/README.md @@ -0,0 +1,71 @@ +# Hello World Sample for RequireJS (Decode via Camera) + +[RequireJS](https://requirejs.org/) is a JavaScript file and module loader that implements the AMD (Asynchronous Module Definition) API. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a RequireJS application using the foundational API to decode barcodes from a live camera stream. + +In this guide, we will be using [`dynamsoft-barcode-reader-bundle 11.2.4000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/11.2.4000). + +> Note: +> +> If you're looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless integration into any frameworks! +> +> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have. + +## Official Sample + +* Hello World in RequireJS (Decode via Camera) - Source Code + +## Usage + +Open `requirejs.html` in a web browser (via `http://` or `https://` protocol, not `file://`). + +## Features + +This sample demonstrates: +- Using RequireJS to load the Dynamsoft Barcode Reader bundle +- Creating a `CameraEnhancer` instance for camera control +- Creating a `CaptureVisionRouter` instance for barcode scanning +- Implementing result filtering to remove duplicates and unchecked results +- Displaying decoded barcode results in real-time + +## Implementation Highlights + +### RequireJS Module Loading + +```javascript +requirejs( + ["https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"], + ({ + Core: { CoreModule }, + License: { LicenseManager }, + Utility: { MultiFrameResultCrossFilter }, + CVR: { CaptureVisionRouter }, + DCE: { CameraView, CameraEnhancer }, + }) => { + // Your code here + } +); +``` + +### Camera Setup + +```javascript +const cameraView = await CameraView.createInstance(); +const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); +document.querySelector("#camera-view-container").append(cameraView.getUIElement()); +``` + +### Barcode Scanning + +```javascript +const cvRouter = await CaptureVisionRouter.createInstance(); +cvRouter.setInput(cameraEnhancer); +await cvRouter.startCapturing("ReadSingleBarcode"); +``` + +## 📌 Customization + +For more advanced customization options, please check the official [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html). + +## 📄 Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/requirejs/scan-using-foundational-api/requirejs.html b/frameworks/requirejs/scan-using-foundational-api/requirejs.html index fbc4e5bd..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"); + +

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/README.md b/frameworks/requirejs/scan-using-rtu-api/README.md new file mode 100644 index 00000000..f642eeef --- /dev/null +++ b/frameworks/requirejs/scan-using-rtu-api/README.md @@ -0,0 +1,55 @@ +# 📦 Scan Single Barcode - RequireJS + +This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) with **RequireJS** to scan a single barcode using the camera. + +## ✨ Features + +- Easy integration with pre-built UI using RequireJS +- BarcodeScanner instance with minimal configuration +- Scans one barcode at a time from video +- Uses AMD module loading pattern + +## 🚀 Quick Start + +Open `requirejs.html` in a web browser (via `http://` or `https://` protocol, not `file://`). + +## Implementation Highlights + +### RequireJS Module Loading + +```javascript +requirejs( + ["https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.js"], + ({ BarcodeScanner }) => { + // Your code here + } +); +``` + +### Simple Configuration + +```javascript +let config = { + license: "YOUR-LICENSE-KEY", + container: document.querySelector(".barcode-scanner-view"), + uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/ui/barcode-scanner.ui.xml", + engineResourcePaths: { + rootDirectory: "https://cdn.jsdelivr.net/npm/", + }, +}; + +const barcodeScanner = new BarcodeScanner(config); +barcodeScanner.launch().then((result) => { + if (result.barcodeResults.length) { + alert(result.barcodeResults[0].text); + } +}); +``` + +## 📌 Customization + +Please check the official [documentation](https://dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner-customization.html). + +## 📄 Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/requirejs/scan-using-rtu-api/requirejs.html b/frameworks/requirejs/scan-using-rtu-api/requirejs.html index df81907e..f90483fc 100644 --- a/frameworks/requirejs/scan-using-rtu-api/requirejs.html +++ b/frameworks/requirejs/scan-using-rtu-api/requirejs.html @@ -20,7 +20,7 @@

diff --git a/frameworks/svelte/scan-using-foundational-api/package.json b/frameworks/svelte/scan-using-foundational-api/package.json index 2923e632..8a0bc6c7 100644 --- a/frameworks/svelte/scan-using-foundational-api/package.json +++ b/frameworks/svelte/scan-using-foundational-api/package.json @@ -19,6 +19,6 @@ "svelte-check": "^3.6.6", "tslib": "^2.6.2", "typescript": "^5.2.2", - "vite": "^6.0.5" + "vite": "^5.0.0" } } diff --git a/frameworks/svelte/scan-using-foundational-api/src/components/VideoCapture.svelte b/frameworks/svelte/scan-using-foundational-api/src/components/VideoCapture.svelte index 4ab0645e..48ccb59d 100644 --- a/frameworks/svelte/scan-using-foundational-api/src/components/VideoCapture.svelte +++ b/frameworks/svelte/scan-using-foundational-api/src/components/VideoCapture.svelte @@ -1,7 +1,12 @@

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-foundational-api/src/dynamsoft.config.ts b/frameworks/vue/scan-using-foundational-api/src/dynamsoft.config.ts index 185ff12a..b25d65cb 100644 --- a/frameworks/vue/scan-using-foundational-api/src/dynamsoft.config.ts +++ b/frameworks/vue/scan-using-foundational-api/src/dynamsoft.config.ts @@ -7,7 +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"); +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/vue/scan-using-rtu-api/README.md b/frameworks/vue/scan-using-rtu-api/README.md index 8dead72e..9a06afd5 100644 --- a/frameworks/vue/scan-using-rtu-api/README.md +++ b/frameworks/vue/scan-using-rtu-api/README.md @@ -1,6 +1,6 @@ # 📦 Scan Single Barcode - Vue -This sample shows how to integrate the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) into a **Vue 3** application to scan a single barcode from video. +This sample shows how to integrate the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) into a **Vue 3** application to scan a single barcode from video. ## ✨ Features 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/index.html b/index.html index 90223db7..a3c03178 100644 --- a/index.html +++ b/index.html @@ -816,12 +816,12 @@
🚀 Quick Start -
Hello World - Scan Your First Barcode
-
The simplest example to get started with barcode scanning in under 2 minutes
+
Hello World - Scan Multiple Barcodes
+
The simplest example to get started with barcode scanning. Continuously scans and collects multiple unique barcodes
+ +
+

+ Hello World Samples (3) +

+
+
+
+ Hello World (Scan Multiple Barcodes) + Source +
+
+ Scan a Single Barcode + Source +
+
+ Read an Image + Source +
+
+

@@ -1112,6 +1148,15 @@

>Source

+
+ Scan DPM Codes + Source +

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 - barcodeScanner = new Dynamsoft.BarcodeScanner(config); + 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_SpeedFirst' template. - const result = await barcodeScanner.decode(file, "ReadBarcodes_SpeedFirst"); - 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..9c60fa34 --- /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/README.md b/scenarios/README.md index ae1560a4..3df6409a 100644 --- a/scenarios/README.md +++ b/scenarios/README.md @@ -14,6 +14,7 @@ Included samples - [read-and-parse-GS1-AI/](./read-and-parse-GS1-AI/) — Example showing GS1 AI parsing and data extraction. - [scan-qr-code/](./scan-qr-code/) — QR code targeted demo and settings. - [scan-datamatrix-code/](./scan-datamatrix-code/) — DataMatrix code targeted demo and settings. +- [scan-dpm-codes/](./scan-dpm-codes/) — Demo for reading Direct Part Mark (DPM) codes etched or marked on surfaces. - [scan-common-1D-and-2D/](./scan-common-1D-and-2D/) — Demo configured to detect a wide range of barcode formats. - [scan-common-2D-codes/](./scan-common-2D-codes/) — Focused on common 2D barcode formats decoding. - [scan-1D-Retail/](./scan-1D-Retail/) — 1D retail barcode tuning example. 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 65b85960..7d85f543 100644 --- a/scenarios/debug/public/index.html +++ b/scenarios/debug/public/index.html @@ -24,7 +24,7 @@

Read Barcodes from Camera - Debug

- + - + diff --git a/scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.html b/scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.html index f8d7df6b..65d418fe 100644 --- a/scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.html +++ b/scenarios/read-and-parse-GS1-AI/scan-using-foundational-api/index.html @@ -57,7 +57,7 @@

Read a GS1-AI

/** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. */ - Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", 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/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)
-
-
-
- -
- -