diff --git a/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html b/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html index 701cc861..57b7112f 100644 --- a/frameworks/blazor/hello-world-blazor/BlazorApp/wwwroot/index.html +++ b/frameworks/blazor/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", { executeNow: true }); + Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days. diff --git a/frameworks/electron/README.md b/frameworks/electron/README.md index bbaf190e..17760c8c 100644 --- a/frameworks/electron/README.md +++ b/frameworks/electron/README.md @@ -150,9 +150,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"); /** * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days. diff --git a/frameworks/es6/scan-using-foundational-api/README.md b/frameworks/es6/scan-using-foundational-api/README.md deleted file mode 100644 index 511ab9d5..00000000 --- a/frameworks/es6/scan-using-foundational-api/README.md +++ /dev/null @@ -1,67 +0,0 @@ -# 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-rtu-api/README.md b/frameworks/es6/scan-using-rtu-api/README.md deleted file mode 100644 index 8cec3615..00000000 --- a/frameworks/es6/scan-using-rtu-api/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# πŸ“¦ 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/native-ts/index.ts b/frameworks/native-ts/index.ts index eab0f4cb..cae944c7 100644 --- a/frameworks/native-ts/index.ts +++ b/frameworks/native-ts/index.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", { executeNow: true }); +LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * 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/next/README.md b/frameworks/next/README.md index 15b8aea4..250933a5 100644 --- a/frameworks/next/README.md +++ b/frameworks/next/README.md @@ -79,9 +79,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"); /** * 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/next/scan-using-rtu-api/.eslintrc.json b/frameworks/next/scan-using-rtu-api/.eslintrc.json deleted file mode 100644 index bffb357a..00000000 --- a/frameworks/next/scan-using-rtu-api/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "next/core-web-vitals" -} diff --git a/frameworks/next/scan-using-rtu-api/.gitignore b/frameworks/next/scan-using-rtu-api/.gitignore deleted file mode 100644 index e32376ee..00000000 --- a/frameworks/next/scan-using-rtu-api/.gitignore +++ /dev/null @@ -1,38 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js -.yarn/install-state.gz - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts - -package-lock.json diff --git a/frameworks/next/scan-using-rtu-api/README.md b/frameworks/next/scan-using-rtu-api/README.md deleted file mode 100644 index 038f6850..00000000 --- a/frameworks/next/scan-using-rtu-api/README.md +++ /dev/null @@ -1,465 +0,0 @@ -# πŸ“¦ Scan Single Barcode - Next.js - -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 **Next.js** app to scan a single barcode using the camera. - -## ✨ Features - -- Easy integration with pre-built UI -- `BarcodeScanner` instance created in a client-side Next.js component -- Scans one barcode at a time from video -- Supports uploading local images as well - -## πŸš€ Quick Start - -### 1. Install Dependencies - -```bash -npm install -``` - -### 2. Start the App - -```bash -npm run dev -``` - -Then open http://localhost:3000/ to view the sample app. - -## πŸ“Œ 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). - -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 Next.js - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 18.17.1` and `next 14.2.3` are used in the example below. - -## Quick Start - -```cmd -npm install -npm run dev -``` -Then open http://localhost:3000/ to view the sample app. - -## Creating the sample project - -In this section, we will be creating a Next.js application utilizing the Dynamsoft Barcode Reader bundle sdk. - -We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. - -By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! - -### Create a [Next.js](https://nextjs.org/) Application bootstrapped with [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with TypeScript. - -```cmd -npx create-next-app@latest -``` - -On installation, you will be prompted to configure your project.\ -You can customize these options according to your preferences.\ -Below is the configuration used for this sample. - -``` -√ What is your project named? ... my-app -√ Would you like to use TypeScript? ... Yes -√ Would you like to use ESLint? ... Yes -√ Would you like to use Tailwind CSS? ... No -√ Would you like to use `src/` directory? ... No -√ Would you like to use App Router? (recommended) ... Yes -√ Would you like to customize the default import alias (@/*)? ... Yes -√ What import alias would you like configured? ... @/* -``` - -### **CD** to the root directory of the application and install necessary libraries - -```cmd -cd my-app -npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E -``` - -## Start to implement - -### Add file "dynamsoft.config.ts" at the root of the app to configure libraries - -```typescript -/* /dynamsoft.config.ts */ -import { CoreModule } from "dynamsoft-core"; -import { LicenseManager } from "dynamsoft-license"; -import "dynamsoft-barcode-reader"; - -// 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 .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. -CoreModule.loadWasm(); -``` - -> Note: -> -> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. - -### Build directory structure - -* Create a directory `components` on the root directory, and then create another two directories, `VideoCapture` and `ImageCapture` under `/components/`. - -### Create and edit the `VideoCapture` component - -* Create `VideoCapture.tsx` under `/components/VideoCapture/`. The `VideoCapture` component helps decode barcodes via camera. - -* In `VideoCapture.tsx`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```tsx -/* /components/VideoCapture/VideoCapture.tsx */ -import React, { useEffect, useRef, useState } from "react"; -import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. -import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer"; -import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; -import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; -import "./VideoCapture.css"; - -const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; - -function VideoCapture() { - const cameraViewContainer = useRef(null); - const [resultsText, setResultText] = useState(""); - - useEffect((): any => { - let resolveInit: () => void; - const pInit: Promise = new Promise((r) => { - resolveInit = r; - }); - let isDestroyed = false; - - let cvRouter: CaptureVisionRouter; - let cameraEnhancer: CameraEnhancer; - - (async () => { - try { - // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. - const cameraView = await CameraView.createInstance(); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } // Check if component is destroyed after every async - cameraEnhancer = await CameraEnhancer.createInstance(cameraView); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - - // Get default UI and append it to DOM. - cameraViewContainer.current!.append(cameraView.getUIElement()); - - // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source. - cvRouter = await CaptureVisionRouter.createInstance(); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - cvRouter.setInput(cameraEnhancer); - - // Define a callback for results. - cvRouter.addResultReceiver({ - onDecodedBarcodesReceived: (result) => { - if (!result.barcodeResultItems.length) return; - - let _resultText = ""; - console.log(result); - for (let item of result.barcodeResultItems) { - _resultText += `${item.formatString}: ${item.text}\n\n`; - } - setResultText(_resultText); - }, - }); - - // Filter out unchecked and duplicate results. - const filter = new MultiFrameResultCrossFilter(); - // Filter out unchecked barcodes. - filter.enableResultCrossVerification("barcode", true); - // Filter out duplicate barcodes within 3 seconds. - filter.enableResultDeduplication("barcode", true); - await cvRouter.addResultFilter(filter); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - - // Open camera and start scanning single barcode. - await cameraEnhancer.open(); - cameraView.setScanLaserVisible(true); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - await cvRouter.startCapturing("ReadSingleBarcode"); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } - } catch (ex: any) { - if ((ex as Error)?.message === componentDestroyedErrorMsg) { - console.log(componentDestroyedErrorMsg); - } else { - let errMsg = ex.message || ex; - console.error(ex); - alert(errMsg); - } - } - })(); - - // Resolve pInit promise once initialization is complete. - resolveInit!(); - - // componentWillUnmount. dispose cvRouter when it's no longer needed - return async () => { - isDestroyed = true; - try { - // Wait for the pInit to complete before disposing resources. - await pInit; - cvRouter?.dispose(); - cameraEnhancer?.dispose(); - } catch (_) {} - }; - }, []); - - return ( -
-
-
- Results: -
{resultsText}
-
- ); -} - -export default VideoCapture; -``` - -> Note: -> -> * The component should never update so that events bound to the UI stay valid. In this component, the useEffect() hook is used to handle the component’s mount and unmount lifecycle events, and there are no state updates that would cause a re-render. -> * 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) - -### Create and edit the `ImageCapture` component - -* Create `ImageCapture.tsx` under `/components/ImageCapture/`. The `ImageCapture` component helps decode barcodes in an image. - -* In `ImageCapture.tsx`, add code for initializing and destroying the `CaptureVisionRouter` instance. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```tsx -/* /components/ImageCapture/ImageCapture.tsx */ -import React, { useRef, useEffect, MutableRefObject, useState } from "react"; -import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. -import { EnumCapturedResultItemType } from "dynamsoft-core"; -import { BarcodeResultItem } from "dynamsoft-barcode-reader"; -import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; -import "./ImageCapture.css"; - -function ImageCapture() { - const [resultText, setResultText] = useState(""); - - let pCvRouter: MutableRefObject | null> = useRef(null); - let isDestroyed = useRef(false); - - const captureImage = async (e: React.ChangeEvent) => { - let files = [...(e.target.files as any as File[])]; - e.target.value = ""; // reset input - let _resultText = ""; - - try { - // ensure cvRouter is created only once - const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance()); - if (isDestroyed.current) return; - - for (let file of files) { - // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. - const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst"); - console.log(result); - if (isDestroyed.current) return; - - let _resultText = ""; - // Print file name if there's multiple files - if (files.length > 1) { - _resultText += `\n${file.name}:\n`; - } - for (let _item of result.items) { - if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { - continue; // check if captured result item is a barcode - } - let item = _item as BarcodeResultItem; - _resultText += item.text + "\n"; // output the decoded barcode text - } - // If no items are found, display that no barcode was detected - if (!result.items.length) _resultText = "No barcode found"; - setResultText(_resultText); - } - } catch (ex: any) { - let errMsg = ex.message || ex; - console.error(ex); - alert(errMsg); - } - }; - - useEffect((): any => { - // In 'development', React runs setup and cleanup one extra time before the actual setup in Strict Mode. - isDestroyed.current = false; - - // componentWillUnmount. dispose cvRouter when it's no longer needed - return () => { - isDestroyed.current = true; - if (pCvRouter.current) { - pCvRouter.current.then((cvRouter) => { - cvRouter.dispose(); - }).catch((_) => { }) - } - }; - }, []); - - return ( -
-
- -
-
{resultText}
-
- ); -} - -export default ImageCapture; -``` - -### Add the `VideoCapture` and `ImageCapture` component to `page.tsx` - -* On `/app/page.tsx`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`. - -* Add following code to `page.tsx`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```tsx -/* /app/page.tsx */ -"use client"; - -import dynamic from "next/dynamic"; -import { useState } from "react"; -import "./page.css"; - -const VideoCapture = dynamic(() => import("../components/VideoCapture/VideoCapture"), { - ssr: false, -}); -const ImageCapture = dynamic(() => import("../components/ImageCapture/ImageCapture"), { - ssr: false, -}); - -enum Modes { - VIDEO_CAPTURE = "video", - IMAGE_CAPTURE = "image", -} - -export default function Home() { - const [mode, setMode] = useState(Modes.VIDEO_CAPTURE); - - const showVideoCapture = () => setMode(Modes.VIDEO_CAPTURE); - const showImageCapture = () => setMode(Modes.IMAGE_CAPTURE); - - return ( -
-
-

Hello World for Next.js

-
-
- - -
-
{mode === Modes.VIDEO_CAPTURE ? : }
-
- ); -} -``` -> Note: -> -> With Next.js' dynamic `import()`, we can significantly improve the initial load speed and performance when we dynamically import Dynamsoft's Barcode Scanning component on-demand. -> -> Additionally, we need to set `{ ssr: false }` since the component is client-side only and could not be rendered server-side. -> -> Read more: [https://nextjs.org/learn-pages-router/seo/improve/dynamic-import-components](https://nextjs.org/learn-pages-router/seo/improve/dynamic-import-components) - -* 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 `Image Decode` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. - -## Development server - -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.\ -You will also see any lint errors in the console. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. - -## 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/next/scan-using-rtu-api/app/favicon.ico b/frameworks/next/scan-using-rtu-api/app/favicon.ico deleted file mode 100644 index 718d6fea..00000000 Binary files a/frameworks/next/scan-using-rtu-api/app/favicon.ico and /dev/null differ diff --git a/frameworks/next/scan-using-rtu-api/app/globals.css b/frameworks/next/scan-using-rtu-api/app/globals.css deleted file mode 100644 index 1c9f2deb..00000000 --- a/frameworks/next/scan-using-rtu-api/app/globals.css +++ /dev/null @@ -1,9 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html, body { - min-width: 350px; -} \ No newline at end of file diff --git a/frameworks/next/scan-using-rtu-api/app/layout.tsx b/frameworks/next/scan-using-rtu-api/app/layout.tsx deleted file mode 100644 index 3e561528..00000000 --- a/frameworks/next/scan-using-rtu-api/app/layout.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { Metadata } from "next"; -import { Inter } from "next/font/google"; -import "./globals.css"; - -const inter = Inter({ subsets: ["latin"] }); - -export const metadata: Metadata = { - title: "Hello World for Next.js - Dynamsoft Barcode Reader Sample", - description: "Dynamsoft Barcode Reader in a Next.js Application, helps read barcodes from camera or images.", - keywords: "barcodes, camera, images, nextjs", -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - {children} - - ); -} diff --git a/frameworks/next/scan-using-rtu-api/app/page.css b/frameworks/next/scan-using-rtu-api/app/page.css deleted file mode 100644 index 580a16f8..00000000 --- a/frameworks/next/scan-using-rtu-api/app/page.css +++ /dev/null @@ -1,33 +0,0 @@ -.title { - display: flex; - justify-content: center; - align-items: center; - margin-top: 20px; -} -.buttons-container { - width: 30%; - margin: 20px auto; -} -.buttons-container button { - display: inline-block; - border: 1px solid black; - padding: 5px 15px; - background-color: transparent; - cursor: pointer; -} -.buttons-container button:first-child { - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - border-right: transparent; -} -.buttons-container button:nth-child(2) { - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - border-left: transparent; -} - -@media screen and (max-width: 800px) { - .buttons-container { - width: 70%; - } -} diff --git a/frameworks/next/scan-using-rtu-api/app/page.tsx b/frameworks/next/scan-using-rtu-api/app/page.tsx deleted file mode 100644 index a8f77464..00000000 --- a/frameworks/next/scan-using-rtu-api/app/page.tsx +++ /dev/null @@ -1,67 +0,0 @@ -"use client"; - -import { useEffect, useRef } from "react"; -import "./page.css"; -import { BarcodeScanner, BarcodeScannerConfig, EnumScanMode } from "dynamsoft-barcode-reader-bundle"; - -export default function Home() { - const barcodeScannerViewRef = useRef(null); - - useEffect(() => { - // Configuration object for initializing the BarcodeScanner instance - const config: BarcodeScannerConfig = { - license: "DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", // Replace with your Dynamsoft license key - - // Specify where to render the scanner UI - // If container is not specified, the UI will take up the full screen - 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, - // cameraSwitchControl: "toggleFrontBack", - // }, - - // Specify custom paths for the engine resources - 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 () => { - // Launch the scanner; once a barcode is detected, display its text in an alert - let result = await barcodeScanner.launch(); - if (result.barcodeResults.length) { - alert(result.barcodeResults[0].text); - } - })(); - - return () => { - // Dispose of the barcode scanner when the component unmounts - barcodeScanner?.dispose(); - }; - }, []); - - return ( - <> -

Barcode Scanner for Next.js

-
-
- - ); -} diff --git a/frameworks/next/scan-using-rtu-api/dynamsoft.config.ts b/frameworks/next/scan-using-rtu-api/dynamsoft.config.ts deleted file mode 100644 index b25d65cb..00000000 --- a/frameworks/next/scan-using-rtu-api/dynamsoft.config.ts +++ /dev/null @@ -1,20 +0,0 @@ -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/next/scan-using-rtu-api/next.config.mjs b/frameworks/next/scan-using-rtu-api/next.config.mjs deleted file mode 100644 index 4678774e..00000000 --- a/frameworks/next/scan-using-rtu-api/next.config.mjs +++ /dev/null @@ -1,4 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = {}; - -export default nextConfig; diff --git a/frameworks/next/scan-using-rtu-api/package.json b/frameworks/next/scan-using-rtu-api/package.json deleted file mode 100644 index 1c0daba4..00000000 --- a/frameworks/next/scan-using-rtu-api/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "dbrjs-next-sample", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start", - "lint": "next lint" - }, - "dependencies": { - "react": "^18", - "react-dom": "^18", - "next": "14.2.35", - "dynamsoft-barcode-reader-bundle": "11.2.4000" - }, - "devDependencies": { - "typescript": "^5", - "@types/node": "^20", - "@types/react": "^18", - "@types/react-dom": "^18", - "eslint": "^8", - "eslint-config-next": "14.2.3" - } -} diff --git a/frameworks/next/scan-using-rtu-api/public/next.svg b/frameworks/next/scan-using-rtu-api/public/next.svg deleted file mode 100644 index 5174b28c..00000000 --- a/frameworks/next/scan-using-rtu-api/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frameworks/next/scan-using-rtu-api/public/vercel.svg b/frameworks/next/scan-using-rtu-api/public/vercel.svg deleted file mode 100644 index d2f84222..00000000 --- a/frameworks/next/scan-using-rtu-api/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frameworks/next/scan-using-rtu-api/tsconfig.json b/frameworks/next/scan-using-rtu-api/tsconfig.json deleted file mode 100644 index e7ff90fd..00000000 --- a/frameworks/next/scan-using-rtu-api/tsconfig.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] -} diff --git a/frameworks/nuxt/README.md b/frameworks/nuxt/README.md index bd71ee2b..3aa204f6 100644 --- a/frameworks/nuxt/README.md +++ b/frameworks/nuxt/README.md @@ -67,9 +67,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"); /** * 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/nuxt/dynamsoft.config.ts b/frameworks/nuxt/dynamsoft.config.ts index e54a421d..0061db7a 100644 --- a/frameworks/nuxt/dynamsoft.config.ts +++ b/frameworks/nuxt/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", { executeNow: true }); +LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * 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/nuxt/scan-using-rtu-api/.gitignore b/frameworks/nuxt/scan-using-rtu-api/.gitignore deleted file mode 100644 index 1db33ecd..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/.gitignore +++ /dev/null @@ -1,28 +0,0 @@ -# Nuxt dev/build outputs -.output -.data -.nuxt -.nitro -.cache -dist - -# Node dependencies -node_modules - -# Logs -logs -*.log - -# Misc -.DS_Store -.fleet -.idea - -# Local env files -.env -.env.* -!.env.example - -dev.err -response.html -curl.txt \ No newline at end of file diff --git a/frameworks/nuxt/scan-using-rtu-api/README.md b/frameworks/nuxt/scan-using-rtu-api/README.md deleted file mode 100644 index 376218e2..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/README.md +++ /dev/null @@ -1,414 +0,0 @@ -# πŸ“¦ Scan Single Barcode - Nuxt - -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 **Nuxt 3** app to scan a single barcode using the camera. - -## ✨ Features - -- Easy integration with pre-built UI -- `BarcodeScanner` instance created in a Nuxt plugin / composable -- Scans one barcode at a time from video -- Supports uploading local images as well - -## πŸš€ Quick Start - -### 1. Install Dependencies - -```bash -npm install -``` - -### 2. Start the App - -```bash -npm run dev -``` - -Then open http://localhost:3000/ to view the sample app. - -## πŸ“Œ 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). - -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 Nuxt - Source Code - -## Preparation - -Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `nuxt 3.2.3` are used in this article. - -## Quick Start - -```cmd -npm install -npm run dev -``` - -Then open `https://localhost:3000/` to view the sample app. - -## Creating the sample project - -In this section, we will be creating a NuxtJS application utilizing the Dynamsoft Barcode Reader bundle sdk. - -We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images. - -By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it! - -### Create a Bootstrapped Nuxt Application - -```cmd -npx nuxi@latest init my-app -``` - -You will be asked to configure quite a few things for the application during the creation. In our example, we chose the default one in every step. - -### **CD** to the root directory of the application and install the dependencies - -```cmd -cd my-app -npm install dynamsoft-barcode-reader-bundle@11.2.4000 -E -``` - -## Start to implement - -### Add file "dynamsoft.config.ts" at the root of the app to configure libraries - -```typescript -/* /dynamsoft.config.ts */ -import { CoreModule } from "dynamsoft-core"; -import { LicenseManager } from "dynamsoft-license"; -import "dynamsoft-barcode-reader"; - -// 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 .wasm file for reading barcodes. It will save time on the initial decoding by skipping the resource loading. -CoreModule.loadWasm(); -``` - -> Note: -> -> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. -> * `engineResourcePaths` tells the library where to get the necessary resources at runtime. - -### Create a directory "components" and create the following files inside it to represent two components - -* `VideoCapture.client.vue` -* `ImageCapture.client.vue` - -`.client` suffix means the component is rendered only client-side. - -### Edit the `VideoCapture` component - -* In `VideoCapture.client.vue`, add code for initializing and destroying some instances. The `VideoCapture` component helps decode barcodes via camera. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). - -```vue - - - - - - -``` -> 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 deleted file mode 100644 index a34addf6..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/app.vue +++ /dev/null @@ -1,66 +0,0 @@ - - - - - \ 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 deleted file mode 100644 index 42fdb9d8..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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 deleted file mode 100644 index 3b4c34f9..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/assets/main.css +++ /dev/null @@ -1,6 +0,0 @@ -* { - 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 deleted file mode 100644 index b25d65cb..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/dynamsoft.config.ts +++ /dev/null @@ -1,20 +0,0 @@ -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 deleted file mode 100644 index 70721a9e..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/nuxt.config.ts +++ /dev/null @@ -1,7 +0,0 @@ -// 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 deleted file mode 100644 index 2f9484a7..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "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 deleted file mode 100644 index 18993ad9..00000000 Binary files a/frameworks/nuxt/scan-using-rtu-api/public/favicon.ico and /dev/null differ diff --git a/frameworks/nuxt/scan-using-rtu-api/tsconfig.json b/frameworks/nuxt/scan-using-rtu-api/tsconfig.json deleted file mode 100644 index 28b66c52..00000000 --- a/frameworks/nuxt/scan-using-rtu-api/tsconfig.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - // https://nuxt.com/docs/guide/concepts/typescript - "extends": "./.nuxt/tsconfig.json" -} \ No newline at end of file diff --git a/frameworks/pwa/README.md b/frameworks/pwa/README.md index dbc6d279..75fb2394 100644 --- a/frameworks/pwa/README.md +++ b/frameworks/pwa/README.md @@ -49,9 +49,7 @@ We will try to turn our basic "Hello World" sample into a PWA. Follow these step * 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"); /** * 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/pwa/service-worker.js b/frameworks/pwa/service-worker.js index e0539995..82a5db86 100644 --- a/frameworks/pwa/service-worker.js +++ b/frameworks/pwa/service-worker.js @@ -1,5 +1,5 @@ const engineResourcePaths = { - dbrBundle: "https://npm.scannerproxy.com:802/cdn/@dynamsoft/dynamsoft-barcode-reader-bundle@11.4.2000-dev-20260410144128/dist/", + dbrBundle: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@11.4.2000/dist/", }; // Files to cache diff --git a/frameworks/react/README.md b/frameworks/react/README.md index e3e7245f..80dfe76a 100644 --- a/frameworks/react/README.md +++ b/frameworks/react/README.md @@ -64,9 +64,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"); /** * 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/src/dynamsoft.config.ts b/frameworks/react/src/dynamsoft.config.ts index e54a421d..0061db7a 100644 --- a/frameworks/react/src/dynamsoft.config.ts +++ b/frameworks/react/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", { executeNow: true }); +LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * 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/requirejs/scan-using-foundational-api/README.md b/frameworks/requirejs/scan-using-foundational-api/README.md deleted file mode 100644 index 254f77a8..00000000 --- a/frameworks/requirejs/scan-using-foundational-api/README.md +++ /dev/null @@ -1,71 +0,0 @@ -# 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-rtu-api/README.md b/frameworks/requirejs/scan-using-rtu-api/README.md deleted file mode 100644 index f642eeef..00000000 --- a/frameworks/requirejs/scan-using-rtu-api/README.md +++ /dev/null @@ -1,55 +0,0 @@ -# πŸ“¦ 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/svelte/README.md b/frameworks/svelte/README.md index e769e6a3..969867fb 100644 --- a/frameworks/svelte/README.md +++ b/frameworks/svelte/README.md @@ -68,9 +68,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"); /** * 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/svelte/src/dynamsoft.config.ts b/frameworks/svelte/src/dynamsoft.config.ts index f6b6c6eb..b16d8dcc 100644 --- a/frameworks/svelte/src/dynamsoft.config.ts +++ b/frameworks/svelte/src/dynamsoft.config.ts @@ -8,7 +8,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"); /** * 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/README.md b/frameworks/vue/README.md index a7abe7b2..b7bfff9f 100644 --- a/frameworks/vue/README.md +++ b/frameworks/vue/README.md @@ -80,9 +80,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"); /** * 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/src/dynamsoft.config.ts b/frameworks/vue/src/dynamsoft.config.ts index e54a421d..0061db7a 100644 --- a/frameworks/vue/src/dynamsoft.config.ts +++ b/frameworks/vue/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", { executeNow: true }); +LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9"); /** * 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/scan-a-single-barcode.html b/scan-a-single-barcode.html index ac2e609f..9dfc605d 100644 --- a/scan-a-single-barcode.html +++ b/scan-a-single-barcode.html @@ -20,6 +20,7 @@