feat: update angular sample and docs

hello-world/angular/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "dbrjs-sample-angular",
+  "name": "dbrjs-angular-sample",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
@@ -36,4 +36,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.4.2"
   }
-}
+}

hello-world/angular/src/app/app.component.css

@@ -1,19 +1,9 @@
-
-
 .title {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
 }
-/* .title .title-text {
-
-} */
-.title .title-logo {
-  width: 60px;
-  height: 60px;
-  animation: retate 5s infinite linear;
-}
 .top-btns {
   width: 30%;
   margin: 20px auto;
@@ -36,17 +26,17 @@
   border-left: transparent;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 800px) {
   .top-btns {
-      width: 70%;
+    width: 70%;
   }
 }
 
 @keyframes retate {
   from {
-      transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-      transform: rotate(360deg);
+    transform: rotate(360deg);
   }
-}
+}

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

@@ -3,8 +3,8 @@
     <h2 class='title-text'>Hello World for Angular</h2>
   </div>
   <div class='top-btns'>
-    <button (click)="switchMode('video')" [ngStyle]="{'background-color': mode === 'video' ? 'rgb(255,174,55)' : 'white'}">Video Capture</button>
-    <button (click)="switchMode('image')" [ngStyle]="{'background-color': mode === 'image' ? 'rgb(255,174,55)' : 'white'}">Image Capture</button>
+    <button (click)="switchMode('video')" [ngStyle]="{'background-color': mode === 'video' ? 'rgb(255,174,55)' : 'white'}">Decode Video</button>
+    <button (click)="switchMode('image')" [ngStyle]="{'background-color': mode === 'image' ? 'rgb(255,174,55)' : 'white'}">Decode Image</button>
   </div>
   @if (mode === 'video') {
     <app-video-capture></app-video-capture>

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

@@ -9,12 +9,12 @@ import { VideoCaptureComponent } from './video-capture/video-capture.component';
   standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [NgStyle, ImageCaptureComponent, VideoCaptureComponent]
+  imports: [NgStyle, ImageCaptureComponent, VideoCaptureComponent],
 })
 export class AppComponent {
-  title = 'dbrjs-sample-angular';
+  title = 'dbrjs-angular-sample';
 
-  mode: string = "video";
+  mode: string = 'video';
 
   switchMode(value: string) {
     this.mode = value;

hello-world/angular/src/app/dynamsoft.config.ts

@@ -1,12 +1,23 @@
-import { CoreModule } from "dynamsoft-core";
-import { LicenseManager } from "dynamsoft-license";
-import "dynamsoft-barcode-reader";
+import { CoreModule } from 'dynamsoft-core';
+import { LicenseManager } from 'dynamsoft-license';
+import 'dynamsoft-barcode-reader';
+
+// Configures the paths where the .wasm files and other necessary resources for modules are located.
+CoreModule.engineResourcePaths = {
+  std: 'https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/',
+  dip: 'https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/',
+  core: 'https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/',
+  license: 'https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/',
+  cvr: 'https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/',
+  dbr: 'https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/',
+  dce: 'https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/',
+};
 
 /** LICENSE ALERT - README
  * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
  */
 
-LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
+LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9', true);
 
 /**
  * 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.
@@ -15,15 +26,5 @@ LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
  * LICENSE ALERT - THE END
  */
 
-CoreModule.engineResourcePaths = {
-  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
-  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
-  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
-  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
-  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
-  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
-  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
-};
-
 // Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
-CoreModule.loadWasm(["DBR"]);
+CoreModule.loadWasm(['DBR']);

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

@@ -1,10 +1,11 @@
-.capture-img {
+.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;
+  font-family: Consolas, Monaco, Lucida Console, Liberation Mono,
+    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
 }
 
-.capture-img .img-ipt {
+.image-capture-container .input-container {
   width: 80%;
   height: 100%;
   display: flex;
@@ -13,6 +14,6 @@
   margin: 0 auto;
 }
 
-.capture-img .result-area {
+.image-capture-container .results {
   margin-top: 20px;
 }

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

@@ -1,4 +1,11 @@
-<div class="capture-img">
-  <div class="img-ipt"><input type="file" (change)="captureImage($event)"/></div>
-  <div class="result-area" #resDiv></div>
+<div class="image-capture-container">
+  <div class="input-container">
+    <input
+      type="file"
+      multiple
+      (change)="captureImage($event)"
+      accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"
+    />
+  </div>
+  <div class="results" #results></div>
 </div>

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

@@ -1,8 +1,8 @@
 import { Component, ViewChild, ElementRef } from '@angular/core';
-import "../dynamsoft.config";
-import { EnumCapturedResultItemType } from "dynamsoft-core";
-import type { BarcodeResultItem } from "dynamsoft-barcode-reader";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
+import '../dynamsoft.config';
+import { EnumCapturedResultItemType } from 'dynamsoft-core';
+import type { BarcodeResultItem } from 'dynamsoft-barcode-reader';
+import { CaptureVisionRouter } from 'dynamsoft-capture-vision-router';
 
 @Component({
   selector: 'app-image-capture',
@@ -11,49 +11,57 @@ import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
   standalone: true,
 })
 export class ImageCaptureComponent {
-
-  @ViewChild('resDiv') resDiv?: ElementRef<HTMLDivElement>;
+  @ViewChild('results') resultsContainer?: ElementRef<HTMLDivElement>;
 
   pCvRouter?: Promise<CaptureVisionRouter>;
-  bDestoried = false;
+  isDestroyed = false;
 
   captureImage = async (e: Event) => {
-    let files = [...(e.target! as HTMLInputElement).files as any as File[]];
-    (e.target! as HTMLInputElement).value = '';
-    this.resDiv!.nativeElement.innerText = "";
+    let files = [...((e.target! as HTMLInputElement).files as any as File[])];
+    (e.target! as HTMLInputElement).value = ''; // reset input
+    this.resultsContainer!.nativeElement.innerText = '';
     try {
-      const cvRouter = await (this.pCvRouter = this.pCvRouter || CaptureVisionRouter.createInstance());
-      if (this.bDestoried) return;
-
-      for(let file of files){
+      // 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");
-        if (this.bDestoried) return;
-
-        if(files.length > 1){
-          this.resDiv!.nativeElement.innerText += `\n${file.name}:\n`;
+        const result = await cvRouter.capture(file, 'ReadBarcodes_SpeedFirst');
+        if (this.isDestroyed) return;
+
+        // Print file name if there's multiple files
+        if (files.length > 1) {
+          this.resultsContainer!.nativeElement.innerText += `\n${file.name}:\n`;
         }
         for (let _item of result.items) {
-          if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; }
+          if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
+            continue; // check if captured result item is a barcode
+          }
           let item = _item as BarcodeResultItem;
-          this.resDiv!.nativeElement.innerText += item.text + "\n";
+          this.resultsContainer!.nativeElement.innerText += item.text + '\n'; // output the decoded barcode text
           console.log(item.text);
         }
-        if (!result.items.length) this.resDiv!.nativeElement.innerText += 'No barcode found\n';
+        // If no items are found, display that no barcode was detected
+        if (!result.items.length)
+          this.resultsContainer!.nativeElement.innerText +=
+            'No barcode found\n';
       }
     } catch (ex: any) {
       let errMsg = ex.message || ex;
       console.error(errMsg);
       alert(errMsg);
     }
-  }
+  };
 
+  // dispose cvRouter when it's no longer needed
   async ngOnDestroy() {
-    this.bDestoried = true;
-    if(this.pCvRouter){
-      try{
+    this.isDestroyed = true;
+    if (this.pCvRouter) {
+      try {
         (await this.pCvRouter).dispose();
-      }catch(_){}
+      } catch (_) {}
     }
   }
 }

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

@@ -1,9 +1,9 @@
-.div-ui-container {
+.camera-view-container {
   width: 100%;
   height: 70vh;
 }
 
-.div-results-container {
+.results {
   width: 100%;
   height: 10vh;
   overflow: auto;

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

@@ -1,4 +1,4 @@
-<div #uiContainer class="div-ui-container"></div>
+<div #cameraViewContainer class="camera-view-container"></div>
+<br />
 Results:
-<br>
-<div #resultsContainer class="div-results-container"></div>
+<div #results class="results"></div>