Added MRZ reader

angular.json

@@ -64,6 +64,26 @@
                 "glob": "**/*",
                 "input": "./node_modules/dynamsoft-document-normalizer/dist",
                 "output": "assets/dynamsoft-document-normalizer"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/dynamsoft-label-recognizer/dist",
+                "output": "assets/dynamsoft-label-recognizer"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/dynamsoft-code-parser/dist",
+                "output": "assets/dynamsoft-code-parser"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/dynamsoft-capture-vision-dnn/dist",
+                "output": "assets/dynamsoft-capture-vision-dnn"
+              },
+              {
+                "glob": "**/*",
+                "input": "./node_modules/dynamsoft-label-recognizer-data/dist",
+                "output": "assets/dynamsoft-label-recognizer-data"
               }
             ],
             "styles": [

package.json

@@ -20,9 +20,13 @@
     "@angular/router": "~13.3.0",
     "dynamsoft-barcode-reader-bundle": "10.2.1000",
     "dynamsoft-camera-enhancer": "^4.0.2",
+    "dynamsoft-capture-vision-dnn": "^1.0.20",
     "dynamsoft-capture-vision-std": "^1.2.10",
+    "dynamsoft-code-parser": "^2.2.10",
     "dynamsoft-document-normalizer": "^2.2.10",
     "dynamsoft-image-processing": "^2.2.30",
+    "dynamsoft-label-recognizer": "^3.2.30",
+    "dynamsoft-label-recognizer-data": "^1.0.11",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app-routing.module.ts

@@ -5,13 +5,17 @@ import { BarcodeReaderComponent } from './barcode-reader/barcode-reader.componen
 import { BarcodeScannerComponent } from './barcode-scanner/barcode-scanner.component';
 import { FileDetectionComponent } from './file-detection/file-detection.component';
 import { CameraDetectionComponent } from './camera-detection/camera-detection.component';
+import { MrzReaderComponent } from './mrz-reader/mrz-reader.component';
+import { MrzScannerComponent } from './mrz-scanner/mrz-scanner.component';
 
 const routes: Routes = [
   { path: '', component: ProductListComponent },
   { path: 'barcode-reader', component: BarcodeReaderComponent },
   { path: 'barcode-scanner', component: BarcodeScannerComponent },
   { path: 'file-detection', component: FileDetectionComponent },
   { path: 'camera-detection', component: CameraDetectionComponent },
+  { path: 'mrz-reader', component: MrzReaderComponent },
+  { path: 'mrz-scanner', component: MrzScannerComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -10,6 +10,8 @@ import { ProductListComponent } from './product-list/product-list.component';
 import { TopBarComponent } from './top-bar/top-bar.component';
 import { FileDetectionComponent } from './file-detection/file-detection.component';
 import { CameraDetectionComponent } from './camera-detection/camera-detection.component';
+import { MrzReaderComponent } from './mrz-reader/mrz-reader.component';
+import { MrzScannerComponent } from './mrz-scanner/mrz-scanner.component';
 
 // import {NgxBarcodeQrcodeModule} from 'ngx-barcode-qrcode';
 
@@ -22,6 +24,8 @@ import { CameraDetectionComponent } from './camera-detection/camera-detection.co
     TopBarComponent,
     FileDetectionComponent,
     CameraDetectionComponent,
+    MrzReaderComponent,
+    MrzScannerComponent,
 
   ],
   imports: [

src/app/barcode-reader/barcode-reader.component.ts

@@ -26,6 +26,12 @@ export class BarcodeReaderComponent implements OnInit {
     })();
   }
 
+  ngOnDestroy() {
+    try {
+      this.cvr?.dispose();
+    } catch (_) { }
+  }
+
   onChange(event: Event) {
     const element = event.currentTarget as HTMLInputElement;
     let fileList: FileList | null = element.files;

src/app/mrz-reader/mrz-reader.component.css

@@ -0,0 +1,78 @@
+.imageview {
+    max-width: 720px;
+    max-height: 720px;
+    width: 720px;
+    height: 720px;
+    background-color: #eaeaea;
+    position: relative;
+}
+
+.imageview img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain
+}
+
+textarea {
+    width: 720px;
+    height: 300px;
+    margin: 10px auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+
+.container {
+    margin: 0 auto;
+    border: 1px solid #ddd;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.loading-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #fff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    background: linear-gradient(to right, #FF0000 0%, #FF8000 17%, #FFFF00 33%, #00FF00 50%, #00FFFF 67%, #0080FF 83%, #0000FF 100%);
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

src/app/mrz-reader/mrz-reader.component.html

@@ -0,0 +1,26 @@
+<div id="loading-indicator" class="loading-indicator" *ngIf="!isLoaded">
+    <div class="spinner"></div>
+</div>
+
+<div>
+    <input type="file" title="file" id="file" accept="image/*" (change)="onChange($event)" />
+</div>
+
+<div class="container" id="file_container">
+
+
+    <div class="row">
+        <div id="imageview" class="imageview">
+            <img id="image" alt="" />
+            <canvas id="overlay" class="overlay"></canvas>
+
+        </div>
+    </div>
+
+
+
+</div>
+
+<div>
+    <textarea id="detection_result"></textarea>
+</div>

src/app/mrz-reader/mrz-reader.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MrzReaderComponent } from './mrz-reader.component';
+
+describe('MrzReaderComponent', () => {
+  let component: MrzReaderComponent;
+  let fixture: ComponentFixture<MrzReaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MrzReaderComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MrzReaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});