From 487376b559344f3bb26e17127637833581962abd Mon Sep 17 00:00:00 2001
From: Justin <caoguangah@gmail.com>
Date: Thu, 26 Dec 2024 14:38:43 +0800
Subject: [PATCH 1/3] update hello-world README

---
 hello-world/angular/README.md     | 29 ++++++-------
 hello-world/blazor/README.md      | 70 +++++++++++++++----------------
 hello-world/electron/README.md    | 31 ++++++--------
 hello-world/next/README.md        | 40 ++++++++++--------
 hello-world/nuxt/README.md        | 62 ++++++++++++++++++++-------
 hello-world/react-hooks/README.md | 47 ++++++++++++---------
 hello-world/react/README.md       | 29 ++++++++-----
 hello-world/svelte/README.md      | 35 +++++++++-------
 hello-world/vue/README.md         | 37 ++++++++--------
 9 files changed, 219 insertions(+), 161 deletions(-)

diff --git a/hello-world/angular/README.md b/hello-world/angular/README.md
index fe6c10a1..964bc540 100644
--- a/hello-world/angular/README.md
+++ b/hello-world/angular/README.md
@@ -118,7 +118,7 @@ ng generate component video-capture
 ></div>
 <br />
 Results:
-<div #results class="results"></div>
+<div class="results">{{resultText}}</div>
 ```
 
 * In `video-capture.component.ts`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample).
@@ -141,7 +141,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) => {
@@ -179,10 +179,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`;
           }
         },
       });
@@ -200,6 +200,7 @@ export class VideoCaptureComponent {
 
       // Open camera and start scanning single barcode.
       await this.cameraEnhancer.open();
+      cameraView.setScanLaserVisible(true);
       if (this.isDestroyed) {
         throw Error(componentDestroyedErrorMsg);
       }
@@ -235,7 +236,7 @@ export class VideoCaptureComponent {
 ```
 > 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#customize-the-ui)
+> 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)
 
 
 ### Generate and edit the `image-capture` component
@@ -259,7 +260,7 @@ ng generate component image-capture
       accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"
     />
   </div>
-  <div class="results" #results></div>
+  <div class="results">{{resultText}}</div>
 </div>
 ```
 
@@ -280,7 +281,7 @@ import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router';
   standalone: true,
 })
 export class ImageCaptureComponent {
-  @ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
+  resultText = "";
 
   pCvRouter?: Promise<CaptureVisionRouter>;
   isDestroyed = false;
@@ -288,7 +289,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 =
@@ -296,25 +297,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/blazor/README.md b/hello-world/blazor/README.md
index aae77471..b44e2205 100644
--- a/hello-world/blazor/README.md
+++ b/hello-world/blazor/README.md
@@ -156,6 +156,8 @@ window.startVideoDecode = async () => {
 
         // Open camera and start scanning single barcode.
         await cameraEnhancer.open();
+        
+        cameraView.setScanLaserVisible(true);
         await cvRouter.startCapturing("ReadSingleBarcode");
     } catch (ex) {
         let errMsg = ex.message || ex;
@@ -283,45 +285,43 @@ Inside the `wwwroot\index.html` file, we will initialize the license and necessa
 
     <script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.2002/dist/dbr.bundle.min.js"></script>
     <script>
-        /** LICENSE ALERT - README
-         * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
-         */
-
-        Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
-
-        /**
-         * 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.
-         * 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=10.4.2002&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com.
-         * LICENSE ALERT - THE END
-         */
-
-        // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
-        Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
-        
-        // Defined globally for easy debugging.
-        let cameraEnhancer, cvRouter;
-        let videoModuleLoaded = false;
-        let imageModuleLoaded = false;
-
-        // Lazy load Decode video module until needed
-        async function loadDecodeVideoModule() {
-            if (!videoModuleLoaded) {
-                await import('./decodeVideo.js');
-                videoModuleLoaded = true;
-            }
+      /** LICENSE ALERT - README
+       * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
+       */
+      Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
+
+      /**
+       * 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.
+       * 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=10.4.2002&cVer=true#specify-the-license&utm_source=samples or contact support@dynamsoft.com.
+       * LICENSE ALERT - THE END
+       */
+
+      // Optional. Used to load wasm resources in advance, reducing latency between video playing and barcode decoding.
+      Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
+
+      // Defined globally for easy debugging.
+      let cameraEnhancer, cvRouter;
+      let videoModuleLoaded = false;
+      let imageModuleLoaded = false;
+
+      // Lazy load Decode video module until needed
+      async function loadDecodeVideoModule() {
+        if (!videoModuleLoaded) {
+          await import("./decodeVideo.js");
+          videoModuleLoaded = true;
         }
+      }
 
-        // Lazy load decode image module until needed
-        async function loadDecodeImageModule() {
-            if (!imageModuleLoaded) {
-                await import('./decodeImage.js');
-                imageModuleLoaded = true;
-            }
+      // Lazy load decode image module until needed
+      async function loadDecodeImageModule() {
+        if (!imageModuleLoaded) {
+          await import("./decodeImage.js");
+          imageModuleLoaded = true;
         }
+      }
     </script>
-</body>
-
+  </body>
 </html>
 ```
 
diff --git a/hello-world/electron/README.md b/hello-world/electron/README.md
index fe4a8715..f51aba6d 100644
--- a/hello-world/electron/README.md
+++ b/hello-world/electron/README.md
@@ -18,12 +18,13 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.4.2002`](ht
 
 Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `electron 26.4.1` are used in this article.
 
-## Quick Start 
+## Quick Start
 
 ```cmd
 npm install
 npm start
 ```
+
 A window should open to view the sample application
 
 ## Creating the sample project
@@ -148,14 +149,14 @@ Dynamsoft.Core.CoreModule.engineResourcePaths = {
   license: "./node_modules/dynamsoft-license/dist/",
   cvr: "./node_modules/dynamsoft-capture-vision-router/dist/",
   dbr: "./node_modules/dynamsoft-barcode-reader/dist/",
-  dce: "./node_modules/dynamsoft-camera-enhancer/dist/"
+  dce: "./node_modules/dynamsoft-camera-enhancer/dist/",
 };
 
 /** LICENSE ALERT - README
  * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
  */
 
-Dynamsoft.License.LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', {
+Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", {
   executeNow: true,
 });
 
@@ -170,15 +171,18 @@ Dynamsoft.License.LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMD
 Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
 
 (async () => {
+  // Defined globally for easy debugging.
+  let cameraEnhancer, cvRouter;
+
   try {
-    // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+    // Create a `CameraView` instance for UI control and a `CameraEnhancer` instance for camera control.
     const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
-    const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
+    cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
     // Get default UI and append it to DOM.
     document.querySelector("#camera-view-container").append(cameraView.getUIElement());
 
     // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-    const cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
+    cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
     cvRouter.setInput(cameraEnhancer);
 
     // Define a callback for results.
@@ -187,12 +191,12 @@ Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
         if (!result.barcodeResultItems.length) return;
 
         const resultsContainer = document.querySelector("#results");
-        resultsContainer.textContent = '';
+        resultsContainer.textContent = "";
         console.log(result);
         for (let item of result.barcodeResultItems) {
           resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
         }
-      }
+      },
     });
 
     // Filter out unchecked and duplicate results.
@@ -205,6 +209,7 @@ Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
 
     // Open camera and start scanning single barcode.
     await cameraEnhancer.open();
+    cameraView.setScanLaserVisible(true);
     await cvRouter.startCapturing("ReadSingleBarcode");
   } catch (ex) {
     let errMsg = ex.message || ex;
@@ -221,22 +226,12 @@ Dynamsoft.Core.CoreModule.loadWasm(["DBR"]);
 Create the `style.css` file at the root folder. Note that this is customizable!
 
 ```css
-body {
-  text-align: center;
-}
-
-#camera-view-container {
-  width: 100%;
-  height: 80vh;
-}
-
 #results {
   width: 100%;
   height: 10vh;
   overflow: auto;
   white-space: pre-wrap;
 }
-
 ```
 
 ## Run the application
diff --git a/hello-world/next/README.md b/hello-world/next/README.md
index 8f5f8ad0..828f4dec 100644
--- a/hello-world/next/README.md
+++ b/hello-world/next/README.md
@@ -111,17 +111,18 @@ CoreModule.loadWasm(["DBR"]);
 
 ```tsx
 /* /components/VideoCapture/VideoCapture.tsx */
-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";
 import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
+import "./VideoCapture.css";
 
 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;
@@ -160,11 +161,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);
           },
         });
 
@@ -181,6 +183,7 @@ function VideoCapture() {
 
         // Open camera and start scanning single barcode.
         await cameraEnhancer.open();
+        cameraView.setScanLaserVisible(true);
         if (isDestroyed) {
           throw Error(componentDestroyedErrorMsg);
         }
@@ -224,9 +227,9 @@ function VideoCapture() {
           background: "#eee",
         }}
       ></div>
-      Results:
       <br />
-      <div ref={resultsContainer} className="results"></div>
+      Results:
+      <div className="results">{resultsText}</div>
     </div>
   );
 }
@@ -237,7 +240,7 @@ 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#customize-the-ui)
+> * 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
 
@@ -247,14 +250,15 @@ export default VideoCapture;
 
 ```tsx
 /* /components/ImageCapture/ImageCapture.tsx */
-import React, { useRef, useEffect, MutableRefObject } from "react";
+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 resultsContainer: MutableRefObject<HTMLDivElement | null> = useRef(null);
+  const [resultText, setResultText] = useState("");
 
   let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
   let isDestroyed = useRef(false);
@@ -262,7 +266,7 @@ function ImageCapture() {
   const captureImage = 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
@@ -270,24 +274,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;
@@ -316,7 +322,7 @@ function ImageCapture() {
       <div className="input-container">
         <input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={captureImage} />
       </div>
-      <div className="results" ref={resultsContainer}></div>
+      <div className="results">{resultText}</div>
     </div>
   );
 }
diff --git a/hello-world/nuxt/README.md b/hello-world/nuxt/README.md
index f387d301..150e8daa 100644
--- a/hello-world/nuxt/README.md
+++ b/hello-world/nuxt/README.md
@@ -110,7 +110,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 });
@@ -142,10 +142,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`;
         }
       }
     });
@@ -161,6 +161,7 @@ onMounted(async () => {
 
     // 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); }
@@ -196,13 +197,22 @@ 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>
+
+<style scoped>
+.results {
+  width: 100%;
+  height: 10vh;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+</style>
 ```
 > 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#customize-the-ui)
+> 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
 
@@ -217,7 +227,7 @@ 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;
@@ -225,31 +235,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;
@@ -273,9 +283,32 @@ 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>
+
+<style scoped>
+.image-capture-container {
+  width: 100%;
+  height: 100%;
+  font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.image-capture-container .input-container {
+  width: 80%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  border: 1px solid black;
+  margin: 0 auto;
+}
+
+.image-capture-container .results {
+  margin-top: 20px;
+  height: 100%;
+  white-space: pre-wrap;
+}
+</style>
 ```
 
 ### Add `VideoCapture` and `ImageCapture` components in `app.vue`
@@ -290,6 +323,7 @@ onBeforeUnmount(async () => {
   <div class='hello-world-page'>
     <div class='title'>
       <h2 class='title-text'>Hello World for NuxtJS</h2>
+      <img class='title-logo' src="./assets/logo.svg" alt="logo" />
     </div>
     <div class='buttons-container'>
       <button @click="mode = 'video'"
diff --git a/hello-world/react-hooks/README.md b/hello-world/react-hooks/README.md
index 15c6c503..099f47a9 100644
--- a/hello-world/react-hooks/README.md
+++ b/hello-world/react-hooks/README.md
@@ -96,17 +96,18 @@ CoreModule.loadWasm(["DBR"]);
 
 ```tsx
 /* /src/components/VideoCapture/VideoCapture.tsx */
-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";
 import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
+import "./VideoCapture.css";
 
 const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 function VideoCapture() {
+  const [resultText, setResultText] = useState("");
   const cameraViewContainer = useRef<HTMLDivElement>(null);
-  const resultsContainer = useRef<HTMLDivElement>(null);
 
   useEffect((): any => {
     let resolveInit: () => void;
@@ -145,11 +146,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);
           },
         });
 
@@ -166,6 +169,7 @@ function VideoCapture() {
 
         // Open camera and start scanning single barcode.
         await cameraEnhancer.open();
+        cameraView.setScanLaserVisible(true);
         if (isDestroyed) {
           throw Error(componentDestroyedErrorMsg);
         }
@@ -186,7 +190,6 @@ function VideoCapture() {
       resolveInit!();
     })();
 
-
     // componentWillUnmount. dispose cvRouter when it's no longer needed
     return () => {
       isDestroyed = true;
@@ -200,10 +203,10 @@ function VideoCapture() {
 
   return (
     <div>
-      <div ref={cameraViewContainer} style={{  width: "100%", height: "70vh" }}></div>
+      <div ref={cameraViewContainer} style={{ width: "100%", height: "70vh" }}></div>
       <br />
       Results:
-      <div ref={resultsContainer} className="results"></div>
+      <div className="results">{resultText}</div>
     </div>
   );
 }
@@ -214,7 +217,7 @@ export default VideoCapture;
 > Note:
 >
 > * The component should never update so that events bound to the UI stay valid. In this copmonent, 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#customize-the-ui)
+> * 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
 
@@ -224,47 +227,50 @@ export default VideoCapture;
 
 ```tsx
 /* /src/components/ImageCapture/ImageCapture.tsx */
-import React, { useRef, useEffect, MutableRefObject } from "react";
+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 resultsContainer: MutableRefObject<HTMLDivElement | null> = useRef(null);
+  const [resultText, setResultText] = useState("");
 
   let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
   let isDestroyed = useRef(false);
 
-  const captureImage = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const captureImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
     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;
@@ -293,7 +299,7 @@ function ImageCapture() {
       <div className="input-container">
         <input type="file" multiple accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" onChange={captureImage} />
       </div>
-      <div className="results" ref={resultsContainer}></div>
+      <div className="results">{resultText}</div>
     </div>
   );
 }
@@ -310,8 +316,10 @@ export default ImageCapture;
 ```tsx
 /* /src/App.tsx */
 import { useState } from "react";
+import reactLogo from "./assets/logo.svg";
 import VideoCapture from "./components/VideoCapture/VideoCapture";
 import ImageCapture from "./components/ImageCapture/ImageCapture";
+import "./App.css";
 
 enum Modes {
   VIDEO_CAPTURE = "video",
@@ -329,6 +337,7 @@ function App() {
     <div className="hello-world-page">
       <div className="title">
         <h2 className="title-text">Hello World for React</h2>
+        <img className="title-logo" src={reactLogo} alt="logo"></img>
       </div>
       <div className="buttons-container">
         <button
diff --git a/hello-world/react/README.md b/hello-world/react/README.md
index c3a41581..e904cf9c 100644
--- a/hello-world/react/README.md
+++ b/hello-world/react/README.md
@@ -102,12 +102,15 @@ import "../../dynamsoft.config"; // import side effects. The license, engineReso
 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";
 
 class VideoCapture extends React.Component {
+  state = {
+    resultText: ""
+  };
   cameraViewContainer: React.RefObject<HTMLDivElement> = React.createRef();
-  resultsContainer: React.RefObject<HTMLDivElement> = React.createRef();
 
   resolveInit?: () => void;
   pInit: Promise<void> = new Promise((r) => (this.resolveInit = r));
@@ -118,7 +121,7 @@ class VideoCapture extends React.Component {
 
   async componentDidMount() {
     try {
-      // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+      // Create a `CameraView` instance for UI control and a `CameraEnhancer` instance for camera control.
       const cameraView = await CameraView.createInstance();
       if (this.isDestroyed) {
         throw Error(componentDestroyedErrorMsg);
@@ -143,12 +146,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})
         },
       });
 
@@ -165,6 +169,7 @@ class VideoCapture extends React.Component {
 
       // Open camera and start scanning single barcode.
       await this.cameraEnhancer.open();
+      cameraView.setScanLaserVisible(true);
       if (this.isDestroyed) {
         throw Error(componentDestroyedErrorMsg);
       }
@@ -207,7 +212,7 @@ class VideoCapture extends React.Component {
         <div ref={this.cameraViewContainer} style={{  width: "100%", height: "70vh" }}></div>
         <br />
         Results:
-        <div ref={this.resultsContainer} className="results"></div>
+        <div className="results">{this.state.resultText}</div>
       </div>
     );
   }
@@ -221,7 +226,7 @@ export default VideoCapture;
 > * The component should never update (check the code for `shouldComponentUpdate()`) so that events bound to the UI stay valid.
 > * Also, during 'development', React executes setup and cleanup phases twice in [Strict Mode](https://react.dev/reference/react/StrictMode). To ensure proper functioning of VideoCapture in development, it's advised to avoid using Strict Mode for this component.
 > However, if you're still interested on using Strict Mode, we do have a workaround available. Please contact our [support team](#Support) for further assistance.
-> * 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#customize-the-ui)
+> * 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
 
@@ -236,6 +241,7 @@ import "../../dynamsoft.config"; // import side effects. The license, engineReso
 import { EnumCapturedResultItemType } from "dynamsoft-core";
 import type { BarcodeResultItem } from "dynamsoft-barcode-reader";
 import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
+import "./ImageCapture.css";
 
 class ImageCapture extends React.Component {
   resultsContainer: React.RefObject<HTMLDivElement> = React.createRef();
@@ -253,8 +259,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
@@ -267,7 +274,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";
@@ -317,9 +323,11 @@ export default ImageCapture;
 ```tsx
 /* src/App.tsx */
 import React from "react";
+import reactLogo from "./assets/logo.svg";
 import "./dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
 import VideoCapture from "./components/VideoCapture/VideoCapture";
 import ImageCapture from "./components/ImageCapture/ImageCapture";
+import "./App.css";
 
 enum Modes {
   VIDEO_CAPTURE = "video",
@@ -348,6 +356,7 @@ class App extends React.Component {
       <div className="hello-world-page">
         <div className="title">
           <h2 className="title-text">Hello World for React</h2>
+          <img className="title-logo" src={reactLogo} alt="logo"></img>
         </div>
         <div className="buttons-container">
           <button
diff --git a/hello-world/svelte/README.md b/hello-world/svelte/README.md
index 9bd3b92d..e4c1ce3d 100644
--- a/hello-world/svelte/README.md
+++ b/hello-world/svelte/README.md
@@ -110,7 +110,7 @@ CoreModule.loadWasm(["DBR"]);
   const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
   let cameraViewContainer: HTMLDivElement;
-  let resultsContainer: HTMLDivElement;
+  let resultText = "";
 
   let resolveInit: () => void;
   const pInit: Promise<void> = new Promise((r) => {
@@ -149,10 +149,10 @@ CoreModule.loadWasm(["DBR"]);
           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`;
             }
           },
         });
@@ -170,6 +170,7 @@ CoreModule.loadWasm(["DBR"]);
 
         //  Open camera and start scanning single barcode.
         await cameraEnhancer.open();
+        cameraView.setScanLaserVisible(true);
         if (isDestroyed) {
           throw Error(componentDestroyedErrorMsg);
         }
@@ -204,15 +205,18 @@ CoreModule.loadWasm(["DBR"]);
 </script>
 
 <div>
-  <div bind:this={cameraViewContainer} style="width: 100%; height: 70vh; background: #eee;"></div>
+  <div
+    bind:this={cameraViewContainer}
+    style="width: 100%; height: 70vh; background: #eee;"
+  ></div>
   Results:<br />
-  <div bind:this={resultsContainer} class="results"></div>
+  <div class="results">{resultText}</div>
 </div>
 ```
 
 > 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#customize-the-ui)
+> * 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
 
@@ -229,39 +233,38 @@ CoreModule.loadWasm(["DBR"]);
   import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
   import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 
-  let resultsContainer: HTMLDivElement;
-
   let pCvRouter: Promise<CaptureVisionRouter>;
   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;
@@ -287,7 +290,7 @@ CoreModule.loadWasm(["DBR"]);
   <div class="input-container">
     <input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
   </div>
-  <div class="result" bind:this={resultsContainer}></div>
+  <div class="result">{resultText}</div>
 </div>
 ```
 
diff --git a/hello-world/vue/README.md b/hello-world/vue/README.md
index c6a64953..8411f59e 100644
--- a/hello-world/vue/README.md
+++ b/hello-world/vue/README.md
@@ -118,7 +118,6 @@ import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
 const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
 
 const cameraViewContainer: Ref<HTMLElement | null> = ref(null);
-const resultsContainer: Ref<HTMLElement | null> = ref(null);
 
 let resolveInit: () => void;
 const pInit: Promise<void> = new Promise(r => { resolveInit = r });
@@ -126,9 +125,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();
@@ -150,10 +149,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`;
         }
       }
     });
@@ -169,6 +168,7 @@ onMounted(async () => {
 
     // 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); }
@@ -204,13 +204,13 @@ 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>
 ```
 > 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#customize-the-ui)
+> 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
 
@@ -221,45 +221,44 @@ onBeforeUnmount(async () => {
 ```vue
 <!-- /src/components/ImageCapture.vue -->
 <script setup lang="ts">
-import { onBeforeUnmount, ref, type Ref } from "vue";
+import { onBeforeUnmount, ref } from "vue";
 import "../dynamsoft.config";
 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);
-
 let pCvRouter: Promise<CaptureVisionRouter>;
 let isDestroyed = false;
+let resultText = ref("");
 
 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.formatString + ": " + 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;
@@ -283,7 +282,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>
 ```
@@ -298,6 +297,7 @@ onBeforeUnmount(async () => {
 <!-- /src/App.vue -->
 <script setup lang="ts">
 import { ref, type Ref } from "vue";
+import vueLogo from "./assets/logo.svg";
 import VideoCapture from "./components/VideoCapture.vue";
 import ImageCapture from "./components/ImageCapture.vue";
 
@@ -309,6 +309,7 @@ const mode: Ref<string> = ref("video");
   <div class='App'>
     <div class='title'>
       <h2 class='title-text'>Hello World for Vue</h2>
+      <img class='title-logo' :src="vueLogo" alt="logo" />
     </div>
     <div class='buttons-container'>
       <button @click="mode = 'video'"
@@ -336,7 +337,7 @@ const mode: Ref<string> = ref("video");
 ```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. 
+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.
 
 ### Comment out the following code in `assets/main.css`. (optional)
 

From 06b6341a87b8661bf477cb9908efcc7ad61afd27 Mon Sep 17 00:00:00 2001
From: Justin-Dynamsoft <33125453+a362758199@users.noreply.github.com>
Date: Thu, 26 Dec 2024 15:34:22 +0800
Subject: [PATCH 2/3] Update ImageCapture.tsx

---
 hello-world/next/components/ImageCapture/ImageCapture.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hello-world/next/components/ImageCapture/ImageCapture.tsx b/hello-world/next/components/ImageCapture/ImageCapture.tsx
index 934c13fe..1028ad72 100644
--- a/hello-world/next/components/ImageCapture/ImageCapture.tsx
+++ b/hello-world/next/components/ImageCapture/ImageCapture.tsx
@@ -11,7 +11,7 @@ function ImageCapture() {
   let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
   let isDestroyed = useRef(false);
 
-  const captureImage = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const captureImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
     let files = [...(e.target.files as any as File[])];
     e.target.value = ""; // reset input
     let _resultText = "";

From 3a82f5b536a72a3367c2ad963e6b0ad432330f3d Mon Sep 17 00:00:00 2001
From: Justin-Dynamsoft <33125453+a362758199@users.noreply.github.com>
Date: Thu, 26 Dec 2024 15:36:02 +0800
Subject: [PATCH 3/3] Update README.md

---
 hello-world/next/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/hello-world/next/README.md b/hello-world/next/README.md
index 828f4dec..49d5b90c 100644
--- a/hello-world/next/README.md
+++ b/hello-world/next/README.md
@@ -263,7 +263,7 @@ function ImageCapture() {
   let pCvRouter: MutableRefObject<Promise<CaptureVisionRouter> | null> = useRef(null);
   let isDestroyed = useRef(false);
 
-  const captureImage = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+  const captureImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
     let files = [...(e.target.files as any as File[])];
     e.target.value = ""; // reset input
     let _resultText = "";
@@ -431,4 +431,4 @@ Check out [Next.js deployment documentation](https://nextjs.org/docs/deployment)
 
 ## 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
+If you have any questions, feel free to [contact Dynamsoft Support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).