Dynamsoft DataMatrix Grid Scanner

diff --git a/frameworks/next/components/VideoCapture/VideoCapture.tsx b/frameworks/next/components/VideoCapture/VideoCapture.tsx index 065cc4e9..3572cb19 100644 --- a/frameworks/next/components/VideoCapture/VideoCapture.tsx +++ b/frameworks/next/components/VideoCapture/VideoCapture.tsx @@ -1,47 +1,33 @@ import React, { useEffect, useRef, useState } from "react"; -import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. import { CameraEnhancer, CameraView, CaptureVisionRouter, MultiFrameResultCrossFilter } from "dynamsoft-barcode-reader-bundle"; import "./VideoCapture.css"; - -const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; +import "../../dynamsoft.config"; // import side effects (license, engineResourcePath) within a component is beneficial for lazy loading. function VideoCapture() { + const [resultText, setResultText] = useState(""); 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 isDisposed = false; let cvRouter: CaptureVisionRouter; let cameraEnhancer: CameraEnhancer; - (async () => { + let pInit = (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); - } // Hide the "Powered by Message" overlay on the scanner view // cameraView.setPowerByMessageVisible(false); + cameraEnhancer = await CameraEnhancer.createInstance(cameraView); + if (isDisposed) return; + // Get default UI and append it to DOM. - cameraViewContainer.current!.append(cameraView.getUIElement()); + cameraViewContainer.current?.append(cameraEnhancer.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. @@ -50,6 +36,7 @@ function VideoCapture() { if (!result.barcodeResultItems.length) return; let _resultText = ""; + setResultText(_resultText); console.log(result); for (let item of result.barcodeResultItems) { _resultText += `${item.formatString}: ${item.text}\n\n`; @@ -65,59 +52,37 @@ function VideoCapture() { // 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 barcode. await cameraEnhancer.open(); cameraView.setScanLaserVisible(true); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } await cvRouter.startCapturing("ReadBarcodes_SpeedFirst"); - 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); - } + 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(); + return () => { + console.log("video capture component disposed"); + isDisposed = true; + cameraEnhancer?.getUIElement().remove(); + // If the browser supports FinalizationRegistry, cvRouter can implement automatic resource recycling, so the manual resource cleanup code below does not need to be written. + pInit.then(() => { cameraEnhancer?.dispose(); - } catch (_) { } + cvRouter?.dispose(); + }) }; }, []); return (

Results: -

{resultsText}

{resultText}

); } diff --git a/frameworks/next/dynamsoft.config.ts b/frameworks/next/dynamsoft.config.ts index 612a1ae7..a0203c5e 100644 --- a/frameworks/next/dynamsoft.config.ts +++ b/frameworks/next/dynamsoft.config.ts @@ -1,7 +1,9 @@ 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/"; +// CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/"; +CoreModule.engineResourcePaths.rootDirectory = "https://npm.scannerproxy.com:802/cdn/@dynamsoft/"; +CoreModule.engineResourcePaths.dcvData = "https://npm.scannerproxy.com:802/cdn/@dynamsoft/dynamsoft-capture-vision-data@1.2.2-dev-20260528161158/" /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. diff --git a/frameworks/next/package.json b/frameworks/next/package.json index 716ee947..14f1dffb 100644 --- a/frameworks/next/package.json +++ b/frameworks/next/package.json @@ -11,8 +11,11 @@ "dependencies": { "react": "^18", "react-dom": "^18", - "next": "16.2.5", - "dynamsoft-barcode-reader-bundle": "11.4.3000" + "next": "16.2.11", + "dynamsoft-barcode-reader-bundle": "npm:@dynamsoft/dynamsoft-capture-vision-bundle@3.6.1000-dev-20260707150019" + }, + "overrides": { + "dynamsoft-barcode-reader-bundle": "$dynamsoft-barcode-reader-bundle" }, "devDependencies": { "typescript": "^5", diff --git a/frameworks/nuxt/components/ImageCapture.client.vue b/frameworks/nuxt/components/ImageCapture.client.vue index 68c076ac..d612b3b3 100644 --- a/frameworks/nuxt/components/ImageCapture.client.vue +++ b/frameworks/nuxt/components/ImageCapture.client.vue @@ -1,42 +1,44 @@ diff --git a/frameworks/nuxt/components/VideoCapture.client.vue b/frameworks/nuxt/components/VideoCapture.client.vue index 9242fa10..230efc67 100644 --- a/frameworks/nuxt/components/VideoCapture.client.vue +++ b/frameworks/nuxt/components/VideoCapture.client.vue @@ -1,93 +1,78 @@ diff --git a/frameworks/nuxt/dynamsoft.config.ts b/frameworks/nuxt/dynamsoft.config.ts index 612a1ae7..a0203c5e 100644 --- a/frameworks/nuxt/dynamsoft.config.ts +++ b/frameworks/nuxt/dynamsoft.config.ts @@ -1,7 +1,9 @@ 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/"; +// CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/"; +CoreModule.engineResourcePaths.rootDirectory = "https://npm.scannerproxy.com:802/cdn/@dynamsoft/"; +CoreModule.engineResourcePaths.dcvData = "https://npm.scannerproxy.com:802/cdn/@dynamsoft/dynamsoft-capture-vision-data@1.2.2-dev-20260528161158/" /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. diff --git a/frameworks/nuxt/package.json b/frameworks/nuxt/package.json index 5316245b..35ba36d5 100644 --- a/frameworks/nuxt/package.json +++ b/frameworks/nuxt/package.json @@ -13,6 +13,9 @@ "nuxt": "3.2.3" }, "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.4.3000" + "dynamsoft-barcode-reader-bundle": "npm:@dynamsoft/dynamsoft-capture-vision-bundle@3.6.1000-dev-20260707150019" + }, + "overrides": { + "dynamsoft-barcode-reader-bundle": "$dynamsoft-barcode-reader-bundle" } } \ No newline at end of file diff --git a/frameworks/react/package.json b/frameworks/react/package.json index edcbd5e2..b0dde95a 100644 --- a/frameworks/react/package.json +++ b/frameworks/react/package.json @@ -11,13 +11,16 @@ "@types/node": "^16.18.99", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", - "dynamsoft-barcode-reader-bundle": "11.4.3000", + "dynamsoft-barcode-reader-bundle": "npm:@dynamsoft/dynamsoft-capture-vision-bundle@3.6.1000-dev-20260707150019", "react": "^18.3.1", "react-dom": "^18.3.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, + "overrides": { + "dynamsoft-barcode-reader-bundle": "$dynamsoft-barcode-reader-bundle" + }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", diff --git a/frameworks/react/src/App.tsx b/frameworks/react/src/App.tsx index 51c1029d..c1e013a1 100644 --- a/frameworks/react/src/App.tsx +++ b/frameworks/react/src/App.tsx @@ -11,9 +11,7 @@ enum Modes { function App() { const [mode, setMode] = useState(Modes.VIDEO_CAPTURE); - const showVideoCapture = () => setMode(Modes.VIDEO_CAPTURE); - const showImageCapture = () => setMode(Modes.IMAGE_CAPTURE); return ( diff --git a/frameworks/react/src/components/ImageCapture/ImageCapture.tsx b/frameworks/react/src/components/ImageCapture/ImageCapture.tsx index 83fe29d0..8f2476e8 100644 --- a/frameworks/react/src/components/ImageCapture/ImageCapture.tsx +++ b/frameworks/react/src/components/ImageCapture/ImageCapture.tsx @@ -1,30 +1,37 @@ -import React, { useRef, useEffect, MutableRefObject, useState } from "react"; -import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. +import React, { useEffect, useRef, useState } from "react"; import { EnumCapturedResultItemType, CaptureVisionRouter, BarcodeResultItem } from "dynamsoft-barcode-reader-bundle"; import "./ImageCapture.css"; +import "../../dynamsoft.config"; // import side effects (license, engineResourcePath) within a component is beneficial for lazy loading. function ImageCapture() { - const [resultText, setResultText] = useState(""); + let [resultText, setResultText] = useState(""); + let pCvRouter = useRef>(); - let pCvRouter: MutableRefObject | null> = useRef(null); - let isDestroyed = useRef(false); + useEffect(() => { + pCvRouter.current = CaptureVisionRouter.createInstance(); + return () => { + console.log("image capture component disposed"); + // If the browser supports FinalizationRegistry, cvRouter can implement automatic resource recycling, so the manual resource cleanup code below does not need to be written. + pCvRouter.current?.then((cvRouter) => { + cvRouter.dispose(); + }) + } + }, []) const captureImage = async (e: React.ChangeEvent) => { let files = [...(e.target.files as any as File[])]; e.target.value = ""; // reset input - setResultText(""); + setResultText("decoding..."); try { // ensure cvRouter is created only once - const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance()); - if (isDestroyed.current) return; + const cvRouter = await pCvRouter.current!; let _resultText = ""; 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; // Print file name if there's multiple files if (files.length > 1) { @@ -48,21 +55,6 @@ function ImageCapture() { } }; - 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 (

diff --git a/frameworks/react/src/components/VideoCapture/VideoCapture.tsx b/frameworks/react/src/components/VideoCapture/VideoCapture.tsx index df243ee7..ab43fcb0 100644 --- a/frameworks/react/src/components/VideoCapture/VideoCapture.tsx +++ b/frameworks/react/src/components/VideoCapture/VideoCapture.tsx @@ -1,25 +1,18 @@ import { useEffect, useRef, useState } from "react"; -import "../../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on. import { CameraEnhancer, CameraView, CaptureVisionRouter, MultiFrameResultCrossFilter } from "dynamsoft-barcode-reader-bundle"; import "./VideoCapture.css"; - -const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; +import "../../dynamsoft.config" // import side effects (license, engineResourcePath) within a component is beneficial for lazy loading. function VideoCapture() { const [resultText, setResultText] = useState(""); const cameraViewContainer = useRef(null); useEffect((): any => { - let resolveInit: () => void; - const pInit: Promise = new Promise((r) => { - resolveInit = r; - }); - let isDestroyed = false; - + let isDisposed = false; let cvRouter: CaptureVisionRouter; let cameraEnhancer: CameraEnhancer; - (async () => { + let pInit = (async () => { try { // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. const cameraView = await CameraView.createInstance(); @@ -27,22 +20,14 @@ function VideoCapture() { // Hide the "Powered by Message" overlay on the scanner view // cameraView.setPowerByMessageVisible(false); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } // Check if component is destroyed after every async cameraEnhancer = await CameraEnhancer.createInstance(cameraView); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } + if (isDisposed) return; // Get default UI and append it to DOM. - cameraViewContainer.current!.append(cameraView.getUIElement()); + cameraViewContainer.current?.append(cameraEnhancer.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. @@ -67,41 +52,28 @@ function VideoCapture() { // 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 barcode. await cameraEnhancer.open(); cameraView.setScanLaserVisible(true); - if (isDestroyed) { - throw Error(componentDestroyedErrorMsg); - } await cvRouter.startCapturing("ReadBarcodes_SpeedFirst"); - 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); - } + 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 () => { - isDestroyed = true; - // Wait for the pInit to complete before disposing resources. + console.log("video capture component disposed"); + isDisposed = true; + cameraEnhancer?.getUIElement().remove(); + // If the browser supports FinalizationRegistry, cvRouter can implement automatic resource recycling, so the manual resource cleanup code below does not need to be written. pInit.then(() => { - cvRouter?.dispose(); cameraEnhancer?.dispose(); - }).catch((_) => { }) + cvRouter?.dispose(); + }) }; }, []); diff --git a/frameworks/react/src/dynamsoft.config.ts b/frameworks/react/src/dynamsoft.config.ts index 612a1ae7..a0203c5e 100644 --- a/frameworks/react/src/dynamsoft.config.ts +++ b/frameworks/react/src/dynamsoft.config.ts @@ -1,7 +1,9 @@ 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/"; +// CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/"; +CoreModule.engineResourcePaths.rootDirectory = "https://npm.scannerproxy.com:802/cdn/@dynamsoft/"; +CoreModule.engineResourcePaths.dcvData = "https://npm.scannerproxy.com:802/cdn/@dynamsoft/dynamsoft-capture-vision-data@1.2.2-dev-20260528161158/" /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. diff --git a/frameworks/svelte/package.json b/frameworks/svelte/package.json index f74feba4..c4c91324 100644 --- a/frameworks/svelte/package.json +++ b/frameworks/svelte/package.json @@ -10,7 +10,10 @@ "check": "svelte-check --tsconfig ./tsconfig.json" }, "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.4.3000" + "dynamsoft-barcode-reader-bundle": "npm:@dynamsoft/dynamsoft-capture-vision-bundle@3.6.1000-dev-20260707150019" + }, + "overrides": { + "dynamsoft-barcode-reader-bundle": "$dynamsoft-barcode-reader-bundle" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.2", diff --git a/frameworks/svelte/src/components/ImageCapture.svelte b/frameworks/svelte/src/components/ImageCapture.svelte index cad8fa8c..57b1dc66 100644 --- a/frameworks/svelte/src/components/ImageCapture.svelte +++ b/frameworks/svelte/src/components/ImageCapture.svelte @@ -1,41 +1,46 @@

- +

{resultText}

diff --git a/frameworks/svelte/src/components/VideoCapture.svelte b/frameworks/svelte/src/components/VideoCapture.svelte index 435c85c6..9d7c6a3e 100644 --- a/frameworks/svelte/src/components/VideoCapture.svelte +++ b/frameworks/svelte/src/components/VideoCapture.svelte @@ -1,52 +1,38 @@ diff --git a/frameworks/svelte/src/dynamsoft.config.ts b/frameworks/svelte/src/dynamsoft.config.ts index 63df9b48..71518dd6 100644 --- a/frameworks/svelte/src/dynamsoft.config.ts +++ b/frameworks/svelte/src/dynamsoft.config.ts @@ -2,7 +2,9 @@ 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/"; +// CoreModule.engineResourcePaths.rootDirectory = "https://cdn.jsdelivr.net/npm/"; +CoreModule.engineResourcePaths.rootDirectory = "https://npm.scannerproxy.com:802/cdn/@dynamsoft/"; +CoreModule.engineResourcePaths.dcvData = "https://npm.scannerproxy.com:802/cdn/@dynamsoft/dynamsoft-capture-vision-data@1.2.2-dev-20260528161158/" /** LICENSE ALERT - README * To use the library, you need to first specify a license key using the API "initLicense()" as shown below. diff --git a/frameworks/vue/package.json b/frameworks/vue/package.json index 306fa673..5545ce5e 100644 --- a/frameworks/vue/package.json +++ b/frameworks/vue/package.json @@ -11,9 +11,12 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "dynamsoft-barcode-reader-bundle": "11.4.3000", + "dynamsoft-barcode-reader-bundle": "npm:@dynamsoft/dynamsoft-capture-vision-bundle@3.6.1000-dev-20260707150019", "vue": "^3.2.45" }, + "overrides": { + "dynamsoft-barcode-reader-bundle": "$dynamsoft-barcode-reader-bundle" + }, "devDependencies": { "@types/node": "^18.11.12", "@vitejs/plugin-vue": "^4.0.0", diff --git a/frameworks/vue/src/App.vue b/frameworks/vue/src/App.vue index 752b1e44..9e24718d 100644 --- a/frameworks/vue/src/App.vue +++ b/frameworks/vue/src/App.vue @@ -5,7 +5,6 @@ import VideoCapture from "./components/VideoCapture.vue"; import ImageCapture from "./components/ImageCapture.vue"; const mode: Ref = ref("video"); -

- Scenario Samples (18) + Scenario Samples (19) >Source

DataMatrix Grid Scanner

Results

Using TypeScript in UI Definition