diff --git a/README.md b/README.md index eca21735..3e0a568f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,45 @@ -# Dynamsoft Barcode Reader samples for the web +# Dynamsoft Barcode Reader Samples for the Web -This repository contains multiple samples that demonstrates how to use the [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/?utm_source=sampleReadme) for creating web-based barcode scanning applications. +This repository contains multiple samples that demonstrate how to use the [Dynamsoft Barcode Reader JavaScript Edition](https://www.dynamsoft.com/barcode-reader/sdk-javascript/?utm_source=sampleReadme) for creating web-based barcode scanning applications. + +--- + +## System Requirements + +### Secure Context (HTTPS Deployment) + +When deploying your application/website for production, make sure to serve it via a secure HTTPS connection. This is required for two reasons: + +- Access to the camera video stream is only granted in a security context. Most browsers impose this restriction. +- Dynamsoft License requires a secure context to work. + +> Some browsers like Chrome may grant access for `http://127.0.0.1` and `http://localhost` or even for pages opened directly from the local disk (`file:///...`). This can be helpful for temporary development and testing. + +### Browser Compatibility + +The following table is a list of supported browsers based on the above requirements: + +| Browser Name | Version | +| :----------: | :--------------: | +| Chrome | v78+1 | +| Firefox | v68+1 | +| Edge | v79+ | +| Safari | v14.5+ | + +1 Devices running iOS need to be on iOS 14.5+ for camera video streaming to work in Chrome, Firefox or other apps using webviews. + +Apart from the browsers, the operating systems may impose some limitations of their own that could restrict the use of the SDK. + +--- + +## License + +A default trial license is included which allows you to test the sample apps for up to 24 hours. You can [request a 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) via the Dynamsoft website to evaluate further. + +>[!IMPORTANT] +> Once your trial license expires, the SDK will throw an error and cease to function. You can visit the [Dynamsoft Customer Portal](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&utm_source=sampleReadme&package=js) to view your trial license details. Additionally, it's possible to extend the trial period via the customer portal, allowing for a total trial duration of 60 days. + +--- ## Get the Code @@ -16,28 +55,75 @@ git clone https://github.com/Dynamsoft/barcode-reader-javascript-samples.git --d > [!NOTE] > If you expect unstable network conditions or prefer to work entirely offline, you can download the [offline package from Dynamsoft website](https://www.dynamsoft.com/barcode-reader/downloads/1000003-confirmation/). This includes the full repository and all required dependencies for offline use. -> -> **Running the Samples Locally** -> -> Opening HTML files directly may not work as expected. Instead, run a local development server. Here’s a quick method using [Visual Studio Code](https://code.visualstudio.com/): -> -> 1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace. -> -> 2. Right-click on `hello-world.html` and select "Open with Five Server". This will serve the application at `http://127.0.0.1:5500/hello-world.html`. -## Request a trial license +--- + +## Running the Samples Locally + +The standalone samples (`hello-world.html`, `scan-a-single-barcode.html`, `read-an-image.html`) and scenario samples load the SDK from a CDN, so you can open them directly by double-clicking — no web server required (an internet connection is needed). + +To browse all available samples, open `index.html` in your browser — it links to every sample in the repository. + +For framework samples, follow the instructions in each subfolder's README (typically `npm install` then `npm run dev`). + +If you need a web server for standalone or scenario samples (for example, to serve SDK resources from a local `dist/` folder), here's a quick method using [Visual Studio Code](https://code.visualstudio.com/): -A default license is included which allows you to test the sample apps for up to 24 hours. You can [request a 30-day trial license](https://www.dynamsoft.com/customer/license/trialLicense?product=dbr&package=js&utm_source=sampleReadme) via Dynamsoft website to evaluate further. +1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace. + +2. Right-click on an HTML file and select "Open with Five Server". This will serve the application at `http://127.0.0.1:5500/`. + +--- + +## Sample Folders + +The repository includes two main sample directories: + +- **`frameworks/`** - Framework-specific examples demonstrating how to integrate Dynamsoft Barcode Reader into common web and hybrid frameworks. Each framework folder contains one or more runnable sub-examples (such as `scan-using-foundational-api` and/or `scan-using-rtu-api`) showing practical integration patterns. + +- **`scenarios/`** - Focused scenario samples that show common real-world uses of Dynamsoft Barcode Reader. + +--- + +## Choosing an API + +The SDK provides two approaches for integrating barcode scanning capabilities: + +### Ready-To-Use (RTU) API — BarcodeScanner + +The RTU API offers the quickest path to a working barcode scanner (**Recommended for most users**): + +- **One-line integration** – Launch a full scanner with a single API call +- **Built-in UI** – Pre-designed viewfinder and scan region highlighting +- **Simple configuration** – Customize behavior through intuitive config objects + +### Foundational APIs + +If you are looking for a fully customizable barcode decoding library with complete control over the scanning process and UI, you are welcome to use the Foundational APIs. + +--- ## Documentation For the developer guide and full API reference of Dynamsoft Barcode Reader JavaScript library, please check out the [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/?ver=11.2.4000&utm_source=sampleReadme). +- [Barcode Scanner API Docs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html?utm_source=sampleReadme) +- [Foundational API Docs](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/index.html?utm_source=sampleReadme) + +--- + ## Support If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). -## Sample list +--- + +## Sample List + +### Hello World + +- [hello-world.html](./hello-world.html) — Demonstrates continuously scanning and collecting multiple unique barcodes via camera. +- [scan-a-single-barcode.html](./scan-a-single-barcode.html) — Demonstrates single-barcode scanning: stops and returns as soon as the first barcode is detected. +- [read-an-image.html](./read-an-image.html) — Demonstrates how to decode and read barcodes from uploaded image files. ### Hello-world @@ -69,12 +155,13 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www. - [show-result-texts-on-the-video/](./scenarios/show-result-texts-on-the-video/) — Overlay decoded text on live video while scanning. - [batch-inventory/](./scenarios/batch-inventory/) — Batch scanning workflow for inventory collection and export. - [read-a-drivers-license/](./scenarios/read-a-drivers-license/) — Demo for reading and parsing a driver's license image/data. -- [read-vin/](./scenarios/read-vin/) — Demo for reading and parsing a VIN(vehicle identification number) code. +- [read-vin/](./scenarios/read-vin/) — Demo for reading and parsing a VIN (vehicle identification number) code. - [read-and-parse-GS1-AI/](./scenarios/read-and-parse-GS1-AI/) — Example showing GS1 AI parsing and data extraction. - [scan-qr-code/](./scenarios/scan-qr-code/) — QR code targeted demo and settings. - [scan-common-1D-and-2D/](./scenarios/scan-common-1D-and-2D/) — Demo configured to detect a wide range of barcode formats. - [scan-common-2D-codes/](./scenarios/scan-common-2D-codes/) — Focused on common 2D barcode formats decoding. - [scan-datamatrix-code/](./scenarios/scan-datamatrix-code/) — DataMatrix code targeted demo with optimized settings. +- [scan-dpm-codes/](./scenarios/scan-dpm-codes/) — Demo for reading Direct Part Mark (DPM) codes etched or marked on surfaces. - [scan-1D-Retail/](./scenarios/scan-1D-Retail/) — 1D retail barcode tuning example. - [scan-1D-Industrial/](./scenarios/scan-1D-Industrial/) — 1D industrial barcode tuning example. - [scan-from-distance/](./scenarios/scan-from-distance/) — Demo for scanning barcodes from a distance (zoom/ROI tuning). @@ -83,4 +170,4 @@ If you have any questions, feel free to [contact Dynamsoft support](https://www. ### Official Online Demo -- [**Official Online Demo**](https://demo.dynamsoft.com/barcode-reader-js): Official demo for Dynamsoft Barcode Reader JavaScript Edition (written in Vue). Take our barcode scanner demo and see how it works in different modes! +- [**Official Online Demo**](https://demo.dynamsoft.com/barcode-reader-js): Try the Dynamsoft Barcode Reader JavaScript Edition demo (written in Vue) and see how it works in different modes! diff --git a/frameworks/angular/scan-using-foundational-api/package.json b/frameworks/angular/scan-using-foundational-api/package.json index 63b37178..5a5a398d 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": "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", + "@angular/animations": "19.2.19", + "@angular/common": "19.2.19", + "@angular/compiler": "19.2.19", + "@angular/core": "19.2.19", + "@angular/forms": "19.2.19", + "@angular/platform-browser": "19.2.19", + "@angular/platform-browser-dynamic": "19.2.19", + "@angular/router": "19.2.19", "dynamsoft-barcode-reader-bundle": "11.2.4000", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" }, "devDependencies": { - "@angular-devkit/build-angular": "19.2.18", - "@angular/cli": "19.2.18", - "@angular/compiler-cli": "19.2.18", + "@angular-devkit/build-angular": "19.2.19", + "@angular/cli": "19.2.19", + "@angular/compiler-cli": "19.2.19", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", 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/angular/scan-using-rtu-api/README.md b/frameworks/angular/scan-using-rtu-api/README.md index c6056438..2e7d55c7 100644 --- a/frameworks/angular/scan-using-rtu-api/README.md +++ b/frameworks/angular/scan-using-rtu-api/README.md @@ -1,6 +1,6 @@ # 📦 Scan Single Barcode - Angular -This sample shows how to integrate the `BarcodeScanner` from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) in an **Angular** project for scanning a single barcode from live video. +This sample shows how to integrate the `BarcodeScanner` from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) in an **Angular** project for scanning a single barcode from live video. ## ✨ Features diff --git a/frameworks/angular/scan-using-rtu-api/src/app/app.component.css b/frameworks/angular/scan-using-rtu-api/src/app/app.component.css index 3a163bca..517d4fd3 100644 --- a/frameworks/angular/scan-using-rtu-api/src/app/app.component.css +++ b/frameworks/angular/scan-using-rtu-api/src/app/app.component.css @@ -1,7 +1,6 @@ .barcode-scanner-hello-world-page { width: 100%; height: 100%; - text-align: center; } .barcode-scanner-title { diff --git a/frameworks/angular/scan-using-rtu-api/src/app/app.component.ts b/frameworks/angular/scan-using-rtu-api/src/app/app.component.ts index db4bb914..81a700ed 100644 --- a/frameworks/angular/scan-using-rtu-api/src/app/app.component.ts +++ b/frameworks/angular/scan-using-rtu-api/src/app/app.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; -import { BarcodeScanner, BarcodeScannerConfig } from 'dynamsoft-barcode-reader-bundle'; +import { BarcodeScanner, BarcodeScannerConfig, EnumScanMode } from 'dynamsoft-barcode-reader-bundle'; @Component({ selector: 'app-root', @@ -20,11 +20,18 @@ export class AppComponent { // Specify where to render the scanner UI // If container is not specified, the UI will take up the full screen - container: this.barcodeScannerViewRef.nativeElement, + container: this.barcodeScannerViewRef.nativeElement, // Specify the path for the definition file "barcode-scanner.ui.xml" for the scanner view. uiPath: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/ui/barcode-scanner.ui.xml", + /* + 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, @@ -35,6 +42,9 @@ export class AppComponent { 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 @@ -46,7 +56,7 @@ export class AppComponent { alert(result.barcodeResults[0].text); } } - async ngOnDestroy(): Promise { + async ngOnDestroy(): Promise { // Dispose of the barcode scanner when the component unmounts this.barcodeScanner?.dispose(); } diff --git a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js b/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js index 8e68478c..b0b380fc 100644 --- a/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js +++ b/frameworks/blazor/scan-using-foundational-api/hello-world-blazor/BlazorApp/wwwroot/decodeVideo.js @@ -1,70 +1,73 @@ // Create JS function "startVideoDecode" window.startVideoDecode = async () => { - const cameraViewContainer = document.getElementById("camera-view-container"); - const resultsContainer = document.getElementById("results"); + const cameraViewContainer = document.getElementById("camera-view-container"); + const resultsContainer = document.getElementById("results"); - try { - // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. - const cameraView = await Dynamsoft.DCE.CameraView.createInstance(); - cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); - // Get default UI and append it to DOM. - cameraViewContainer.style.display = "block" - cameraViewContainer.append(cameraView.getUIElement()); + try { + // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. + const cameraView = await Dynamsoft.DCE.CameraView.createInstance(); + cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView); + // Get default UI and append it to DOM. + cameraViewContainer.style.display = "block" + cameraViewContainer.append(cameraView.getUIElement()); - // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); - cvRouter.setInput(cameraEnhancer); + // Hide the "Powered by Message" overlay on the scanner view + // cameraView.setPowerByMessageVisible(false); - // Define a callback for results. - cvRouter.addResultReceiver({ - onDecodedBarcodesReceived: (result) => { - if (!result.barcodeResultItems.length) return; + // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. + cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); + cvRouter.setInput(cameraEnhancer); - resultsContainer.textContent = ""; - for (let item of result.barcodeResultItems) { - resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`; - } - }, - }); + // Define a callback for results. + cvRouter.addResultReceiver({ + onDecodedBarcodesReceived: (result) => { + if (!result.barcodeResultItems.length) return; - // Filter out unchecked and duplicate results. - const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter(); - // Filter out unchecked barcodes. - filter.enableResultCrossVerification("barcode", true); - // Filter out duplicate barcodes within 3 seconds. - filter.enableResultDeduplication("barcode", true); - await cvRouter.addResultFilter(filter); + resultsContainer.textContent = ""; + for (let item of result.barcodeResultItems) { + resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`; + } + }, + }); - // 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); - } + // Filter out unchecked and duplicate results. + const filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter(); + // Filter out unchecked barcodes. + filter.enableResultCrossVerification("barcode", true); + // Filter out duplicate barcodes within 3 seconds. + filter.enableResultDeduplication("barcode", true); + await cvRouter.addResultFilter(filter); + + // Open camera and start scanning barcode. + await cameraEnhancer.open(); + + cameraView.setScanLaserVisible(true); + await cvRouter.startCapturing("ReadBarcodes_SpeedFirst"); + } catch (ex) { + let errMsg = ex.message || ex; + console.error(ex); + } } // Create JS function "stopVideoDecode" window.stopVideoDecode = async () => { - const cameraViewContainer = document.getElementById("camera-view-container"); - const resultsContainer = document.getElementById("results"); + const cameraViewContainer = document.getElementById("camera-view-container"); + const resultsContainer = document.getElementById("results"); - try { - if (!cvRouter?.disposed) { - await cvRouter?.dispose(); - } - if (!cameraEnhancer?.disposed) { - await cameraEnhancer?.dispose(); - } - - // Reset components - cameraViewContainer.style.display = "none"; - cameraViewContainer.innerHTML = ""; - resultsContainer.textContent = ""; - } catch (ex) { - let errMsg = ex.message || ex; - console.error(ex); + try { + if (!cvRouter?.disposed) { + await cvRouter?.dispose(); } + if (!cameraEnhancer?.disposed) { + await cameraEnhancer?.dispose(); + } + + // Reset components + cameraViewContainer.style.display = "none"; + cameraViewContainer.innerHTML = ""; + resultsContainer.textContent = ""; + } catch (ex) { + let errMsg = ex.message || ex; + console.error(ex); + } } 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/blazor/scan-using-rtu-api/README.md b/frameworks/blazor/scan-using-rtu-api/README.md index becc2dda..0cea6a03 100644 --- a/frameworks/blazor/scan-using-rtu-api/README.md +++ b/frameworks/blazor/scan-using-rtu-api/README.md @@ -1,6 +1,6 @@ # 📦 Scan Single Barcode - Blazor -This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) in a **Blazor** 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 **Blazor** app to scan a single barcode using the camera. ## ✨ Features diff --git a/frameworks/blazor/scan-using-rtu-api/wwwroot/index.html b/frameworks/blazor/scan-using-rtu-api/wwwroot/index.html index a728dd6b..529961ba 100644 --- a/frameworks/blazor/scan-using-rtu-api/wwwroot/index.html +++ b/frameworks/blazor/scan-using-rtu-api/wwwroot/index.html @@ -20,12 +20,12 @@ async function decodeBarcodeViaCamera() { // Lazy load Decode video module until needed - if(!DBRJSModule) { + if (!DBRJSModule) { DBRJSModule = await import("https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.mjs"); } - const { BarcodeScanner } = DBRJSModule; - + const { BarcodeScanner, EnumScanMode } = DBRJSModule; + // Configuration object for initializing the BarcodeScanner instance. Refer to https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/api-reference/barcode-scanner.html#barcodescannerconfig let config = { license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key @@ -34,6 +34,13 @@ // 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, @@ -44,6 +51,9 @@ engineResourcePaths: { rootDirectory: "https://cdn.jsdelivr.net/npm/", }, + + // The watermark can be removed via showPoweredByDynamsoft configuration option. + // showPoweredByDynamsoft: false, }; // Create a new instance of the Dynamsoft Barcode Scanner diff --git a/frameworks/capacitor/scan-using-rtu-api/README.md b/frameworks/capacitor/scan-using-rtu-api/README.md index 841a54be..7b3a62b7 100644 --- a/frameworks/capacitor/scan-using-rtu-api/README.md +++ b/frameworks/capacitor/scan-using-rtu-api/README.md @@ -1,6 +1,6 @@ # 📦 Scan Single Barcode - Capacitor -This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) in a **Capacitor** 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 **Capacitor** app to scan a single barcode using the camera. We use typescript and rollup inside capacitor for demonstration. You can use any framework you like, or even vanilla javascript. diff --git a/frameworks/electron/scan-using-foundational-api/action.js b/frameworks/electron/scan-using-foundational-api/action.js index 7badaa96..8c70bb15 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. @@ -32,6 +30,9 @@ Dynamsoft.Core.CoreModule.loadWasm(); // 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/electron/scan-using-rtu-api/README.md b/frameworks/electron/scan-using-rtu-api/README.md index a9d37870..072cdc2f 100644 --- a/frameworks/electron/scan-using-rtu-api/README.md +++ b/frameworks/electron/scan-using-rtu-api/README.md @@ -1,6 +1,6 @@ # 📦 Scan Single Barcode - Electron -This sample demonstrates how to use the `BarcodeScanner` API from the [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/overview/javascript/) in a **Electron** 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 **Electron** app to scan a single barcode using the camera. ## ✨ Features diff --git a/frameworks/electron/scan-using-rtu-api/action.js b/frameworks/electron/scan-using-rtu-api/action.js index 5b6f0295..3c1d2cd7 100644 --- a/frameworks/electron/scan-using-rtu-api/action.js +++ b/frameworks/electron/scan-using-rtu-api/action.js @@ -3,11 +3,21 @@ let config = { license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key container: document.querySelector(".barcode-scanner-view"), // Specify where to render the scanner UI + /* + scanMode controls the scanning behavior: + - SM_MULTI_UNIQUE: Continuously scans and collects each unique barcode. + - SM_SINGLE: Stops scanning after the first barcode is detected. + */ + scanMode: Dynamsoft.EnumScanMode.SM_MULTI_UNIQUE, + // showUploadImageButton: true, // scannerViewConfig: { // showFlashButton: true, // cameraSwitchControl: "toggleFrontBack", // }, + + // The watermark can be removed via showPoweredByDynamsoft configuration option. + // showPoweredByDynamsoft: false, }; // Create a new instance of the Dynamsoft Barcode Scanner @@ -19,4 +29,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/README.md b/frameworks/es6/scan-using-foundational-api/README.md new file mode 100644 index 00000000..511ab9d5 --- /dev/null +++ b/frameworks/es6/scan-using-foundational-api/README.md @@ -0,0 +1,67 @@ +# Hello World Sample for ES6 (Decode via Camera) + +[ES6 modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) allow you to use modern JavaScript features with native import/export syntax. Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into an ES6 application using the foundational API to decode barcodes from a live camera stream. + +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 ES6 (Decode via Camera) - Source Code + +## Usage + +Open `es6.html` in a web browser (via `http://` or `https://` protocol, not `file://`). + +## Features + +This sample demonstrates: +- Using ES6 module imports to load the Dynamsoft Barcode Reader bundle +- Creating a `CameraEnhancer` instance for camera control +- Creating a `CaptureVisionRouter` instance for barcode scanning +- Implementing result filtering to remove duplicates and unchecked results +- Displaying decoded barcode results in real-time + +## Implementation Highlights + +### ES6 Module Import + +```javascript +import { + CoreModule, + LicenseManager, + CaptureVisionRouter, + CameraView, + CameraEnhancer, + MultiFrameResultCrossFilter, +} from "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.2.4000/dist/dbr.bundle.mjs"; +``` + +### Camera Setup + +```javascript +const cameraView = await CameraView.createInstance(); +const cameraEnhancer = await CameraEnhancer.createInstance(cameraView); +document.querySelector("#camera-view-container").append(cameraView.getUIElement()); +``` + +### Barcode Scanning + +```javascript +const cvRouter = await CaptureVisionRouter.createInstance(); +cvRouter.setInput(cameraEnhancer); +await cvRouter.startCapturing("ReadSingleBarcode"); +``` + +## 📌 Customization + +For more advanced customization options, please check the official [documentation](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html). + +## 📄 Support + +If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme). diff --git a/frameworks/es6/scan-using-foundational-api/es6.html b/frameworks/es6/scan-using-foundational-api/es6.html index 134f065e..b75fa4c9 100644 --- a/frameworks/es6/scan-using-foundational-api/es6.html +++ b/frameworks/es6/scan-using-foundational-api/es6.html @@ -1,91 +1,96 @@ - - - - - - - Dynamsoft Barcode Reader Sample - Hello World for ES6 (Decode via Camera) - - -

Hello World for ES6 (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/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 00000000..18993ad9 Binary files /dev/null and b/frameworks/nuxt/scan-using-rtu-api/public/favicon.ico differ diff --git a/frameworks/nuxt/scan-using-rtu-api/tsconfig.json b/frameworks/nuxt/scan-using-rtu-api/tsconfig.json new file mode 100644 index 00000000..28b66c52 --- /dev/null +++ b/frameworks/nuxt/scan-using-rtu-api/tsconfig.json @@ -0,0 +1,4 @@ +{ + // https://nuxt.com/docs/guide/concepts/typescript + "extends": "./.nuxt/tsconfig.json" +} \ No newline at end of file diff --git a/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html b/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html index 02c306b7..5d156f50 100644 --- a/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html +++ b/frameworks/pwa/scan-using-foundational-api/helloworld-pwa.html @@ -1,100 +1,103 @@ - - - - - - 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)
-
-
-
- -
- -