UPDATE

Author: Shen-wb

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;
 }

hello-world/angular/src/app/image-capture/image-capture.component.html

@@ -7,5 +7,5 @@
       accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"
     />
   </div>
-  <div class="results" #results></div>
+  <div class="results">{{resultText}}</div>
 </div>

hello-world/angular/src/app/image-capture/image-capture.component.ts

@@ -11,41 +11,41 @@ import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router';
   standalone: true,
 })
 export class ImageCaptureComponent {
-  @ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
+  resultText = "";
 
   pCvRouter?: Promise<CaptureVisionRouter>;
   isDestroyed = false;
 
   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 =
         this.pCvRouter || CaptureVisionRouter.createInstance());
       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) {

hello-world/angular/src/app/video-capture/video-capture.component.html

@@ -5,4 +5,4 @@
 ></div>
 <br />
 Results:
-<div #results class="results"></div>
+<div class="results">{{resultText}}</div>

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<HTMLDivElement>;
-  @ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
+  resultText = "";
 
   resolveInit?: () => void;
   pInit: Promise<void> = 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`;
           }
         },
       });

hello-world/next/components/ImageCapture/ImageCapture.css

@@ -17,4 +17,5 @@
 .image-capture-container .results {
   margin-top: 20px;
   height: 100%;
+  white-space: pre-wrap;
 }

hello-world/next/components/ImageCapture/ImageCapture.tsx

@@ -1,45 +1,47 @@
-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";
 import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 import "./ImageCapture.css";
 
 function ImageCapture() {
-  const resultsContainer: MutableRefObject<HTMLDivElement | null> = useRef(null);
+  const [resultText, setResultText] = useState("");
 
   let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
   let isDestroyed = useRef(false);
 
   const decodeImg = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     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
       const cvRouter = await (pCvRouter.current = pCvRouter.current || CaptureVisionRouter.createInstance());
       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() {
       <div className="input-container">
         <input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={decodeImg} />
       </div>
-      <div className="results" ref={resultsContainer}></div>
+      <div className="results">{resultText}</div>
     </div>
   );
 }

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<HTMLDivElement>(null);
-  const resultsContainer = useRef<HTMLDivElement>(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() {
       ></div>
       <br />
       Results:
-      <div ref={resultsContainer} className="results"></div>
+      <div className="results">{resultsText}</div>
     </div>
   );
 }

hello-world/nuxt/components/ImageCapture.client.vue

@@ -5,39 +5,39 @@ import { EnumCapturedResultItemType } from "dynamsoft-core";
 import type { BarcodeResultItem } from "dynamsoft-barcode-reader";
 import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 
-const resultContainer: Ref<HTMLDivElement | null> = ref(null);
+const resultText = ref("");
 
 let pCvRouter: Promise<CaptureVisionRouter>;
 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 () => {
     <div class="input-container">
       <input type="file" multiple @change="captureImage" accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
     </div>
-    <div class="results" ref="resultContainer"></div>
+    <div class="results">{{resultText}}</div>
   </div>
 </template>
 
@@ -84,5 +84,6 @@ onBeforeUnmount(async () => {
 .image-capture-container .results {
   margin-top: 20px;
   height: 100%;
+  white-space: pre-wrap;
 }
 </style>

hello-world/nuxt/components/VideoCapture.client.vue

@@ -8,7 +8,7 @@ import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
 const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 const cameraViewContainer: Ref<HTMLElement | null> = ref(null);
-const resultsContainer: Ref<HTMLElement | null> = ref(null);
+const resultText = ref("");
 
 let resolveInit: () => void;
 const pInit: Promise<void> = 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 () => {
     <div ref="cameraViewContainer" style="width: 100%; height: 70vh; background: #eee;"></div>
     <br />
     Results:
-    <div ref="resultsContainer" class="results"></div>
+    <div class="results">{{ resultText }}</div>
   </div>
 </template>