diff --git a/README.md b/README.md index 37ea01c4..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,80 @@ 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/): + +1. Install the [Five Server extension](https://marketplace.visualstudio.com/items?itemName=yandeu.five-server) from the VS Code Marketplace. -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. +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 + +- [hello-world.html](./hello-world.html) — The simplest example to get started with single barcode scanning. +- [read-an-image.html](./read-an-image.html) — Demonstrates how to decode and read barcodes from uploaded image files. ### Frameworks @@ -64,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). @@ -78,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 38257365..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": "^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.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.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.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", @@ -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-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-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/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/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/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 f736d6d7..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 af66f6e4..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/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." /> - +
@@ -19,18 +19,36 @@

- + @@ -84,4 +103,4 @@

- \ No newline at end of file + diff --git a/index.html b/index.html index 80e1edd4..a3c03178 100644 --- a/index.html +++ b/index.html @@ -31,219 +31,6 @@ For document, copy start from here search `href="scenarios` replace to `href="https://demo.dynamsoft.com/Samples/DBR/JS/scenarios` --> - + + + \ 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 3f4467fd..232822b6 100644 --- a/scenarios/batch-inventory/index.html +++ b/scenarios/batch-inventory/index.html @@ -51,12 +51,14 @@ let totalUniqueBarcodesResult = {}; let totalUniqueBarcodesCount = 0; - const launchBarcodeScanenr = () => { + const launchBarcodeScanner = () => { summaryView.style.display = "none"; 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 @@ -74,7 +76,7 @@ }) } - launchBarcodeScanenr(); + launchBarcodeScanner(); const readerResultList = (result) => { const resultListNode = document.querySelector(".result-list"); @@ -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]; @@ -147,7 +149,7 @@ return `${formattedHours}:${formattedMinutes}:${formattedSeconds} (${startTime} ~ ${endTime})`; } - backBtn.addEventListener("click", launchBarcodeScanenr); + backBtn.addEventListener("click", launchBarcodeScanner); 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 798586eb..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 @@ -6,7 +6,7 @@ - + Dynamsoft Barcode Reader Sample - Read a GS1-AI @@ -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)
-
-
-
- -
- -