From 0c9ec38189441cb26dd53e16ad4b55d729b90217 Mon Sep 17 00:00:00 2001 From: SHEN <1014628363@qq.com> Date: Mon, 23 Dec 2024 10:56:00 +0800 Subject: [PATCH] UPDATE --- .../image-capture/image-capture.component.css | 1 + .../image-capture.component.html | 2 +- .../image-capture/image-capture.component.ts | 16 +++++++------- .../video-capture.component.html | 2 +- .../video-capture/video-capture.component.ts | 6 ++--- .../components/ImageCapture/ImageCapture.css | 1 + .../components/ImageCapture/ImageCapture.tsx | 22 ++++++++++--------- .../components/VideoCapture/VideoCapture.tsx | 11 +++++----- .../nuxt/components/ImageCapture.client.vue | 19 ++++++++-------- .../nuxt/components/VideoCapture.client.vue | 8 +++---- .../components/ImageCapture/ImageCapture.css | 1 + .../components/ImageCapture/ImageCapture.tsx | 22 ++++++++++--------- .../components/VideoCapture/VideoCapture.tsx | 12 +++++----- .../components/ImageCapture/ImageCapture.tsx | 6 ++--- .../components/VideoCapture/VideoCapture.tsx | 13 ++++++----- .../svelte/src/components/ImageCapture.svelte | 20 ++++++++--------- .../svelte/src/components/VideoCapture.svelte | 13 ++++++----- .../vue/src/components/ImageCapture.vue | 22 +++++++++---------- .../vue/src/components/VideoCapture.vue | 9 ++++---- 19 files changed, 111 insertions(+), 95 deletions(-) diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.css b/hello-world/angular/src/app/image-capture/image-capture.component.css index febb3153..53e77ab1 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.css +++ b/hello-world/angular/src/app/image-capture/image-capture.component.css @@ -16,4 +16,5 @@ .image-capture-container .results { margin-top: 20px; + white-space: pre-wrap; } diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.html b/hello-world/angular/src/app/image-capture/image-capture.component.html index 5faddf9c..fb7b3bc6 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.html +++ b/hello-world/angular/src/app/image-capture/image-capture.component.html @@ -7,5 +7,5 @@ accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" /> -
+
{{resultText}}
diff --git a/hello-world/angular/src/app/image-capture/image-capture.component.ts b/hello-world/angular/src/app/image-capture/image-capture.component.ts index fd0bac27..4eb179e8 100644 --- a/hello-world/angular/src/app/image-capture/image-capture.component.ts +++ b/hello-world/angular/src/app/image-capture/image-capture.component.ts @@ -11,7 +11,7 @@ import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router'; standalone: true, }) export class ImageCaptureComponent { - @ViewChild('results') resultsContainer?: ElementRef; + resultText = ""; pCvRouter?: Promise; isDestroyed = false; @@ -19,7 +19,7 @@ export class ImageCaptureComponent { captureImage = async (e: Event) => { let files = [...((e.target! as HTMLInputElement).files as any as File[])]; (e.target! as HTMLInputElement).value = ''; // reset input - this.resultsContainer!.nativeElement.innerText = ''; + this.resultText = ''; try { // ensure cvRouter is created only once const cvRouter = await (this.pCvRouter = @@ -27,25 +27,25 @@ export class ImageCaptureComponent { if (this.isDestroyed) return; for (let file of files) { - // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await cvRouter.capture(file, 'ReadBarcodes_SpeedFirst'); + // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. + const result = await cvRouter.capture(file, 'ReadBarcodes_ReadRateFirst'); + console.log(result); if (this.isDestroyed) return; // Print file name if there's multiple files if (files.length > 1) { - this.resultsContainer!.nativeElement.innerText += `\n${file.name}:\n`; + this.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; - this.resultsContainer!.nativeElement.innerText += item.text + '\n'; // output the decoded barcode text - console.log(item.text); + this.resultText += item.text + '\n'; // output the decoded barcode text } // If no items are found, display that no barcode was detected if (!result.items.length) - this.resultsContainer!.nativeElement.innerText += + this.resultText += 'No barcode found\n'; } } catch (ex: any) { diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.html b/hello-world/angular/src/app/video-capture/video-capture.component.html index e8a173e9..bae059e4 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.html +++ b/hello-world/angular/src/app/video-capture/video-capture.component.html @@ -5,4 +5,4 @@ >
Results: -
+
{{resultText}}
diff --git a/hello-world/angular/src/app/video-capture/video-capture.component.ts b/hello-world/angular/src/app/video-capture/video-capture.component.ts index 6899107a..58472732 100644 --- a/hello-world/angular/src/app/video-capture/video-capture.component.ts +++ b/hello-world/angular/src/app/video-capture/video-capture.component.ts @@ -14,7 +14,7 @@ const componentDestroyedErrorMsg = 'VideoCapture Component Destroyed'; }) export class VideoCaptureComponent { @ViewChild('cameraViewContainer') cameraViewContainer?: ElementRef; - @ViewChild('results') resultsContainer?: ElementRef; + resultText = ""; resolveInit?: () => void; pInit: Promise = new Promise((r) => { @@ -52,10 +52,10 @@ export class VideoCaptureComponent { onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - this.resultsContainer!.nativeElement.textContent = ''; + this.resultText = ''; console.log(result); for (let item of result.barcodeResultItems) { - this.resultsContainer!.nativeElement.textContent += `${item.formatString}: ${item.text}\n\n`; + this.resultText += `${item.formatString}: ${item.text}\n\n`; } }, }); diff --git a/hello-world/next/components/ImageCapture/ImageCapture.css b/hello-world/next/components/ImageCapture/ImageCapture.css index 03da581c..09fdc448 100644 --- a/hello-world/next/components/ImageCapture/ImageCapture.css +++ b/hello-world/next/components/ImageCapture/ImageCapture.css @@ -17,4 +17,5 @@ .image-capture-container .results { margin-top: 20px; height: 100%; + white-space: pre-wrap; } diff --git a/hello-world/next/components/ImageCapture/ImageCapture.tsx b/hello-world/next/components/ImageCapture/ImageCapture.tsx index 03e52618..d8b5b097 100644 --- a/hello-world/next/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/next/components/ImageCapture/ImageCapture.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect, MutableRefObject, useCallback } from "react"; +import React, { useRef, useEffect, MutableRefObject, useCallback, 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"; @@ -6,7 +6,7 @@ import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; import "./ImageCapture.css"; function ImageCapture() { - const resultsContainer: MutableRefObject = useRef(null); + const [resultText, setResultText] = useState(""); let pCvRouter: MutableRefObject | null> = useRef(null); let isDestroyed = useRef(false); @@ -14,7 +14,7 @@ function ImageCapture() { const decodeImg = useCallback(async (e: React.ChangeEvent) => { let files = [...(e.target.files as any as File[])]; e.target.value = ""; // reset input - resultsContainer.current!.innerText = ""; + let _resultText = ""; try { // ensure cvRouter is created only once @@ -22,24 +22,26 @@ function ImageCapture() { if (isDestroyed.current) return; for (let file of files) { - // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + // 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) { - resultsContainer.current!.innerText += `\n${file.name}:\n`; + _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; - resultsContainer.current!.innerText += item.text + "\n"; // output the decoded barcode text - console.log(item.text); + _resultText += item.text + "\n"; // output the decoded barcode text } // If no items are found, display that no barcode was detected - if (!result.items.length) resultsContainer.current!.innerText = "No barcode found"; + if (!result.items.length) _resultText = "No barcode found"; + setResultText(_resultText); } } catch (ex: any) { let errMsg = ex.message || ex; @@ -68,7 +70,7 @@ function ImageCapture() {
-
+
{resultText}
); } diff --git a/hello-world/next/components/VideoCapture/VideoCapture.tsx b/hello-world/next/components/VideoCapture/VideoCapture.tsx index 5603af78..06f8ce48 100644 --- a/hello-world/next/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/next/components/VideoCapture/VideoCapture.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +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"; @@ -9,7 +9,7 @@ const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; function VideoCapture() { const cameraViewContainer = useRef(null); - const resultsContainer = useRef(null); + const [resultsText, setResultText] = useState(""); useEffect((): any => { let resolveInit: () => void; @@ -48,11 +48,12 @@ function VideoCapture() { onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - resultsContainer.current!.textContent = ""; + let _resultText = ""; console.log(result); for (let item of result.barcodeResultItems) { - resultsContainer.current!.textContent += `${item.formatString}: ${item.text}\n\n`; + _resultText += `${item.formatString}: ${item.text}\n\n`; } + setResultText(_resultText); }, }); @@ -115,7 +116,7 @@ function VideoCapture() { >
Results: -
+
{resultsText}
); } diff --git a/hello-world/nuxt/components/ImageCapture.client.vue b/hello-world/nuxt/components/ImageCapture.client.vue index a4d1be51..fd9e09da 100644 --- a/hello-world/nuxt/components/ImageCapture.client.vue +++ b/hello-world/nuxt/components/ImageCapture.client.vue @@ -5,7 +5,7 @@ import { EnumCapturedResultItemType } from "dynamsoft-core"; import type { BarcodeResultItem } from "dynamsoft-barcode-reader"; import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; -const resultContainer: Ref = ref(null); +const resultText = ref(""); let pCvRouter: Promise; let isDestroyed = false; @@ -13,31 +13,31 @@ let isDestroyed = false; const captureImage = async (e: Event) => { let files = [...(e.target! as HTMLInputElement).files!]; (e.target! as HTMLInputElement).value = ''; // reset input - resultContainer.value!.innerText = ""; + resultText.value = ""; try { // ensure cvRouter is created only once const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance()); if (isDestroyed) return; for (let file of files) { - // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst"); + console.log(result); if (isDestroyed) return; // Print file name if there's multiple files if (files.length > 1) { - resultContainer.value!.innerText += `\n${file.name}:\n`; + resultText.value += `\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; - resultContainer.value!.innerText += item.text + "\n"; // output the decoded barcode text - console.log(item.text); + resultText.value += item.text + "\n"; // output the decoded barcode text } // If no items are found, display that no barcode was detected - if (!result.items.length) resultContainer.value!.innerText += 'No barcode found\n'; + if (!result.items.length) resultText.value += 'No barcode found\n'; } } catch (ex: any) { let errMsg = ex.message || ex; @@ -61,7 +61,7 @@ onBeforeUnmount(async () => {
-
+
{{resultText}}
@@ -84,5 +84,6 @@ onBeforeUnmount(async () => { .image-capture-container .results { margin-top: 20px; height: 100%; + white-space: pre-wrap; } diff --git a/hello-world/nuxt/components/VideoCapture.client.vue b/hello-world/nuxt/components/VideoCapture.client.vue index 70d22b30..aa09208a 100644 --- a/hello-world/nuxt/components/VideoCapture.client.vue +++ b/hello-world/nuxt/components/VideoCapture.client.vue @@ -8,7 +8,7 @@ import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; const cameraViewContainer: Ref = ref(null); -const resultsContainer: Ref = ref(null); +const resultText = ref(""); let resolveInit: () => void; const pInit: Promise = new Promise(r => { resolveInit = r }); @@ -40,10 +40,10 @@ onMounted(async () => { onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - resultsContainer.value!.textContent = ''; + resultText.value = ''; console.log(result); for (let item of result.barcodeResultItems) { - resultsContainer.value!.textContent += `${item.formatString}: ${item.text}\n\n`; + resultText.value += `${item.formatString}: ${item.text}\n\n`; } } }); @@ -95,7 +95,7 @@ onBeforeUnmount(async () => {

Results: -
+
{{ resultText }}
diff --git a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css index 03da581c..09fdc448 100644 --- a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.css @@ -17,4 +17,5 @@ .image-capture-container .results { margin-top: 20px; height: 100%; + white-space: pre-wrap; } diff --git a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx index 19abc754..bb2fedc9 100644 --- a/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react-hooks/src/components/ImageCapture/ImageCapture.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect, MutableRefObject, useCallback } from "react"; +import React, { useRef, useEffect, MutableRefObject, useCallback, 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"; @@ -6,7 +6,7 @@ import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; import "./ImageCapture.css"; function ImageCapture() { - const resultsContainer: MutableRefObject = useRef(null); + const [resultText, setResultText] = useState(""); let pCvRouter: MutableRefObject | null> = useRef(null); let isDestroyed = useRef(false); @@ -14,32 +14,34 @@ function ImageCapture() { const captureImage = useCallback(async (e: React.ChangeEvent) => { let files = [...(e.target.files as any as File[])]; e.target.value = ""; // reset input - resultsContainer.current!.innerText = ""; + setResultText(""); try { // ensure cvRouter is created only once const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance()); if (isDestroyed.current) return; + let _resultText = ""; for (let file of files) { - // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + // 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) { - resultsContainer.current!.innerText += `\n${file.name}:\n`; + _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; - resultsContainer.current!.innerText += item.text + "\n"; // output the decoded barcode text - console.log(item.text); + _resultText += item.formatString + ": " + item.text + "\n" } + setResultText(_resultText); // If no items are found, display that no barcode was detected - if (!result.items.length) resultsContainer.current!.innerText += "No barcode found"; + if (!result.items.length) setResultText(_resultText + "No barcode found"); } } catch (ex: any) { let errMsg = ex.message || ex; @@ -68,7 +70,7 @@ function ImageCapture() {
-
+
{resultText}
); } diff --git a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx index 88dfcd0a..aa5c70d7 100644 --- a/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react-hooks/src/components/VideoCapture/VideoCapture.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from "react"; +import { 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"; @@ -8,8 +8,8 @@ import "./VideoCapture.css"; const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; function VideoCapture() { + const [resultText, setResultText] = useState(""); const cameraViewContainer = useRef(null); - const resultsContainer = useRef(null); useEffect((): any => { let resolveInit: () => void; @@ -48,11 +48,13 @@ function VideoCapture() { onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - resultsContainer.current!.textContent = ""; + let _resultText = ""; + setResultText(_resultText); console.log(result); for (let item of result.barcodeResultItems) { - resultsContainer.current!.textContent += `${item.formatString}: ${item.text}\n\n`; + _resultText += `${item.formatString}: ${item.text}\n\n`; } + setResultText(_resultText); }, }); @@ -106,7 +108,7 @@ function VideoCapture() {

Results: -
+
{resultText}
); } diff --git a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx index 4b5e25bc..6ece84b5 100644 --- a/hello-world/react/src/components/ImageCapture/ImageCapture.tsx +++ b/hello-world/react/src/components/ImageCapture/ImageCapture.tsx @@ -21,8 +21,9 @@ class ImageCapture extends React.Component { if (this.isDestroyed) return; for (let file of files) { - // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst"); + console.log(result); if (this.isDestroyed) return; // Print file name if there's multiple files @@ -35,7 +36,6 @@ class ImageCapture extends React.Component { } let item = _item as BarcodeResultItem; this.resultsContainer.current!.innerText += item.text + "\n"; - console.log(item.text); } // If no items are found, display that no barcode was detected if (!result.items.length) this.resultsContainer.current!.innerText += "No barcode found\n"; diff --git a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx index e20c7c6d..cbd044cb 100644 --- a/hello-world/react/src/components/VideoCapture/VideoCapture.tsx +++ b/hello-world/react/src/components/VideoCapture/VideoCapture.tsx @@ -8,8 +8,10 @@ import "./VideoCapture.css"; const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; class VideoCapture extends React.Component { + state = { + resultText: "" + }; cameraViewContainer: React.RefObject = React.createRef(); - resultsContainer: React.RefObject = React.createRef(); resolveInit?: () => void; pInit: Promise = new Promise((r) => (this.resolveInit = r)); @@ -45,12 +47,13 @@ class VideoCapture extends React.Component { this.cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - - this.resultsContainer.current!.textContent = ""; + + let _resultText = ""; console.log(result); for (let item of result.barcodeResultItems) { - this.resultsContainer.current!.textContent += `${item.formatString}: ${item.text}\n\n`; + _resultText += `${item.formatString}: ${item.text}\n\n`; } + this.setState({resultText: _resultText}) }, }); @@ -110,7 +113,7 @@ class VideoCapture extends React.Component {

Results: -
+
{this.state.resultText}
); } diff --git a/hello-world/svelte/src/components/ImageCapture.svelte b/hello-world/svelte/src/components/ImageCapture.svelte index 1fbaf6c1..b3fb51e2 100644 --- a/hello-world/svelte/src/components/ImageCapture.svelte +++ b/hello-world/svelte/src/components/ImageCapture.svelte @@ -5,39 +5,38 @@ import { type BarcodeResultItem } from "dynamsoft-barcode-reader"; import { CaptureVisionRouter } from "dynamsoft-capture-vision-router"; - let resultsContainer: HTMLDivElement; - let pCvRouter: Promise; let isDestroyed = false; + let resultText = ""; const captureImage = async (e: Event) => { let files = [...(e.target! as HTMLInputElement).files!]; (e.target! as HTMLInputElement).value = ""; // reset input - resultsContainer.innerText = ""; + resultText = ""; try { const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance()); if (isDestroyed) return; for (let file of files) { - // Decode selected image with 'ReadBarcodes_SpeedFirst' template. - const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst"); + // Decode selected image with 'ReadBarcodes_ReadRateFirst' template. + const result = await cvRouter.capture(file, "ReadBarcodes_ReadRateFirst"); + console.log(result); if (isDestroyed) return; // Print file name if there's multiple files if (files.length > 1) { - resultsContainer.innerText += `\n${file.name}:\n`; + 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; - resultsContainer.innerText += item.text + "\n"; // output the decoded barcode text - console.log(item.text); + resultText += item.formatString + ": " + item.text + "\n"; // output the decoded barcode text } // If no items are found, display that no barcode was detected - if (!result.items.length) resultsContainer.innerText += "No barcode found\n"; + if (!result.items.length) resultText += "No barcode found\n"; } } catch (ex: any) { let errMsg = ex.message || ex; @@ -63,7 +62,7 @@
-
+
{resultText}
diff --git a/hello-world/svelte/src/components/VideoCapture.svelte b/hello-world/svelte/src/components/VideoCapture.svelte index 0b171a41..f1014b1d 100644 --- a/hello-world/svelte/src/components/VideoCapture.svelte +++ b/hello-world/svelte/src/components/VideoCapture.svelte @@ -8,7 +8,7 @@ const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; let cameraViewContainer: HTMLDivElement; - let resultsContainer: HTMLDivElement; + let resultText = ""; let resolveInit: () => void; const pInit: Promise = new Promise((r) => { @@ -47,10 +47,10 @@ onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - resultsContainer.textContent = ""; + resultText = ""; console.log(result); for (let item of result.barcodeResultItems) { - resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`; + resultText += `${item.formatString}: ${item.text}\n\n`; } }, }); @@ -103,9 +103,12 @@
-
+
Results:
-
+
{resultText}
\ No newline at end of file diff --git a/hello-world/vue/src/components/VideoCapture.vue b/hello-world/vue/src/components/VideoCapture.vue index ed4eddf0..870faaea 100644 --- a/hello-world/vue/src/components/VideoCapture.vue +++ b/hello-world/vue/src/components/VideoCapture.vue @@ -8,7 +8,6 @@ import { MultiFrameResultCrossFilter } from "dynamsoft-utility"; const componentDestroyedErrorMsg = "VideoCapture Component Destroyed"; const cameraViewContainer: Ref = ref(null); -const resultsContainer: Ref = ref(null); let resolveInit: () => void; const pInit: Promise = new Promise(r => { resolveInit = r }); @@ -16,9 +15,9 @@ let isDestroyed = false; let cvRouter: CaptureVisionRouter; let cameraEnhancer: CameraEnhancer; +let resultText = ref(""); onMounted(async () => { - try { // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control. const cameraView = await CameraView.createInstance(); @@ -40,10 +39,10 @@ onMounted(async () => { onDecodedBarcodesReceived: (result) => { if (!result.barcodeResultItems.length) return; - resultsContainer.value!.textContent = ''; + resultText.value = ''; console.log(result); for (let item of result.barcodeResultItems) { - resultsContainer.value!.textContent += `${item.formatString}: ${item.text}\n\n`; + resultText.value += `${item.formatString}: ${item.text}\n\n`; } } }); @@ -95,7 +94,7 @@ onBeforeUnmount(async () => {

Results: -
+
{{ resultText }}