Merge pull request #235 from Dynamsoft/README_brunch

Readme brunch

Author: Shen-wb

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,41 +281,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/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>
 ```
 

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