facecog-liveness-showcase 0.0.1

package/projects/facecog-liveness-verification/src/lib/components/dialogs/save-custom-pose-dialog.component.ts

@@ -0,0 +1,174 @@
+import { Component, Input } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'lib-save-custom-pose-dialog',
+  standalone: true,
+  imports: [CommonModule, FormsModule, IonicModule],
+  template: `
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Save Custom Pose</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="dismiss()">
+            <ion-icon name="close"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+    <div class="ion-padding">
+      <div class="preview-section">
+        <img [src]="imageData" alt="Pose preview" class="preview-image">
+        <p class="preview-hint">This is how your pose will appear</p>
+      </div>
+
+      <ion-item>
+        <ion-label position="stacked">Pose Name *</ion-label>
+        <ion-input
+          [(ngModel)]="poseName"
+          placeholder="e.g., My Peace Sign"
+          maxlength="50"
+          required
+          (ionInput)="validateForm()">
+        </ion-input>
+      </ion-item>
+      <div *ngIf="poseName && poseName.length < 3" class="error-text">
+        <ion-text color="danger">
+          <small>Pose name must be at least 3 characters</small>
+        </ion-text>
+      </div>
+
+      <ion-item>
+        <ion-label position="stacked">Description</ion-label>
+        <ion-textarea
+          [(ngModel)]="description"
+          [placeholder]="suggestedDescription || 'Instructions for performing this pose'"
+          rows="3">
+        </ion-textarea>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Category *</ion-label>
+        <ion-select [(ngModel)]="category" interface="popover">
+          <ion-select-option value="face">Face Expression</ion-select-option>
+          <ion-select-option value="head">Head Movement</ion-select-option>
+          <ion-select-option value="hand">Hand Gesture</ion-select-option>
+          <ion-select-option value="gesture">Body Gesture</ion-select-option>
+          <ion-select-option value="combined">Combined</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Difficulty *</ion-label>
+        <ion-select [(ngModel)]="difficulty" interface="popover">
+          <ion-select-option value="easy">Easy</ion-select-option>
+          <ion-select-option value="medium">Medium</ion-select-option>
+          <ion-select-option value="hard">Hard</ion-select-option>
+        </ion-select>
+      </ion-item>
+
+      <div class="button-container ion-margin-top">
+        <ion-button
+          expand="block"
+          (click)="save()"
+          [disabled]="!isValid()">
+          <ion-icon name="bookmark" slot="start"></ion-icon>
+          Save Pose
+        </ion-button>
+
+        <ion-button
+          expand="block"
+          fill="clear"
+          (click)="dismiss()">
+          Cancel
+        </ion-button>
+      </div>
+    </div>
+    </ion-content>
+  `,
+  styles: [`
+    .preview-section {
+      text-align: center;
+      margin-bottom: 24px;
+    }
+
+    .preview-image {
+      max-width: 300px;
+      max-height: 300px;
+      width: 100%;
+      height: auto;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      margin-bottom: 8px;
+    }
+
+    .preview-hint {
+      font-size: 0.875rem;
+      color: var(--ion-color-medium);
+      margin: 0;
+    }
+
+    .button-container {
+      margin-top: 24px;
+    }
+
+    .error-text {
+      padding: 4px 16px;
+      margin-top: -8px;
+      margin-bottom: 8px;
+    }
+
+    ion-item {
+      --padding-start: 0;
+      --inner-padding-end: 0;
+      margin-bottom: 16px;
+    }
+
+    ion-label[position="stacked"] {
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
+  `]
+})
+export class SaveCustomPoseDialogComponent {
+  @Input() imageData!: string;
+  @Input() suggestedDescription?: string;
+
+  poseName: string = '';
+  description: string = '';
+  category: string = 'hand';
+  difficulty: string = 'medium';
+  formValid: boolean = false;
+
+  constructor(private modalCtrl: ModalController) {}
+
+  validateForm(): void {
+    this.formValid = this.isValid();
+  }
+
+  isValid(): boolean {
+    return this.poseName.trim().length >= 3;
+  }
+
+  save(): void {
+    if (!this.isValid()) {
+      return;
+    }
+
+    this.modalCtrl.dismiss({
+      name: this.poseName.trim(),
+      description: this.description.trim() || this.suggestedDescription || this.poseName.trim(),
+      category: this.category,
+      difficulty: this.difficulty
+    });
+  }
+
+  dismiss(): void {
+    this.modalCtrl.dismiss();
+  }
+}

package/projects/facecog-liveness-verification/src/lib/components/facetec-scan/facetec-scan.component.html

@@ -0,0 +1,45 @@
+<div class="facetec-scan-container">
+  <div class="camera-container">
+    <video #videoElement autoplay playsinline class="camera-video"></video>
+  </div>
+
+  <div class="message-container">
+    <ion-card class="message-card">
+      <ion-card-content>
+        <div class="message-content">
+          <h2 *ngIf="countdown > 0 && isScanning" class="countdown-text">
+            {{ countdown }}
+          </h2>
+          <p class="message-text">{{ message }}</p>
+          <ion-progress-bar
+            *ngIf="isScanning && progress > 0"
+            [value]="progress / 100"
+            color="primary">
+          </ion-progress-bar>
+        </div>
+      </ion-card-content>
+    </ion-card>
+  </div>
+
+  <div class="action-buttons">
+    <ion-button
+      *ngIf="!isScanning && !autoStart"
+      expand="block"
+      color="primary"
+      size="large"
+      (click)="startScan()">
+      <ion-icon name="scan" slot="start"></ion-icon>
+      Start FaceTec Scan
+    </ion-button>
+
+    <ion-button
+      *ngIf="isScanning"
+      expand="block"
+      color="danger"
+      size="large"
+      (click)="cancel()">
+      <ion-icon name="close" slot="start"></ion-icon>
+      Cancel
+    </ion-button>
+  </div>
+</div>

package/projects/facecog-liveness-verification/src/lib/components/facetec-scan/facetec-scan.component.scss

@@ -0,0 +1,87 @@
+.facetec-scan-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #000;
+  position: relative;
+}
+
+.camera-container {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.camera-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.message-container {
+  position: absolute;
+  bottom: 120px;
+  left: 0;
+  right: 0;
+  padding: 0 20px;
+  z-index: 10;
+}
+
+.message-card {
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  border-radius: 12px;
+  margin: 0;
+}
+
+.message-content {
+  text-align: center;
+  padding: 10px 0;
+}
+
+.countdown-text {
+  font-size: 48px;
+  font-weight: bold;
+  color: #00D4FF;
+  margin: 0 0 10px 0;
+  animation: countdown-pulse 1s ease-in-out;
+}
+
+@keyframes countdown-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.message-text {
+  font-size: 16px;
+  color: #fff;
+  margin: 0;
+  font-weight: 500;
+}
+
+.action-buttons {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  z-index: 10;
+}
+
+ion-progress-bar {
+  margin-top: 10px;
+  --background: rgba(255, 255, 255, 0.2);
+  --progress-background: #00D4FF;
+}

package/projects/facecog-liveness-verification/src/lib/components/facetec-scan/facetec-scan.component.ts

@@ -0,0 +1,182 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ElementRef,
+  OnDestroy,
+  AfterViewInit,
+  OnInit
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { CameraService } from '../../services/camera.service';
+import type { FaceTecScanResult } from '../../interfaces/scan-results.interface';
+
+/**
+ * FaceTecScanComponent
+ *
+ * Simulates FaceTec 3D liveness scanning.
+ * In production, this would integrate with the actual FaceTec Browser SDK.
+ *
+ * For now, this component:
+ * 1. Uses the device camera
+ * 2. Captures a frame after countdown
+ * 3. Sends it as "FaceScan" data to backend
+ */
+@Component({
+  selector: 'facecog-facetec-scan',
+  templateUrl: './facetec-scan.component.html',
+  styleUrls: ['./facetec-scan.component.scss'],
+  standalone: true,
+  imports: [CommonModule, IonicModule]
+})
+export class FaceTecScanComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('videoElement', { static: false }) videoElement!: ElementRef<HTMLVideoElement>;
+
+  @Input() sessionId: string = '';
+  @Input() deviceKey: string = '';
+  @Input() autoStart: boolean = false;
+
+  @Output() scanComplete = new EventEmitter<FaceTecScanResult>();
+  @Output() scanCancelled = new EventEmitter<void>();
+
+  isScanning = false;
+  countdown = 3;
+  message = 'Position your face in the frame';
+  progress = 0;
+
+  private countdownInterval: ReturnType<typeof setInterval> | null = null;
+  private progressInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor(private cameraService: CameraService) {}
+
+  ngOnInit(): void {
+    console.log('[FaceTec Scan] Component initialized', { autoStart: this.autoStart });
+  }
+
+  ngAfterViewInit(): void {
+    if (this.autoStart) {
+      setTimeout(() => {
+        console.log('[FaceTec Scan] Auto-starting scan...');
+        this.startScan();
+      }, 500);
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.cleanup();
+  }
+
+  async startScan(): Promise<void> {
+    try {
+      console.log('[FaceTec Scan] Starting scan...');
+      this.message = 'Initializing camera...';
+
+      const stream = await this.cameraService.startCamera(this.videoElement.nativeElement);
+      if (!stream) {
+        throw new Error('Failed to start camera');
+      }
+
+      this.message = 'Position your face in the oval';
+      await this.delay(1000);
+
+      this.startCountdown();
+    } catch (error: unknown) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      console.error('[FaceTec Scan] Error starting scan:', err);
+      this.scanComplete.emit({
+        success: false,
+        faceScan: '',
+        error: err.message || 'Failed to start scan'
+      });
+    }
+  }
+
+  private startCountdown(): void {
+    this.isScanning = true;
+    this.countdown = 3;
+    this.message = `Get ready! ${this.countdown}`;
+
+    this.countdownInterval = setInterval(() => {
+      this.countdown--;
+
+      if (this.countdown > 0) {
+        this.message = `${this.countdown}`;
+      } else {
+        if (this.countdownInterval) {
+          clearInterval(this.countdownInterval);
+          this.countdownInterval = null;
+        }
+        this.performScan();
+      }
+    }, 1000);
+  }
+
+  private async performScan(): Promise<void> {
+    try {
+      this.message = 'Scanning...';
+      this.progress = 0;
+
+      this.progressInterval = setInterval(() => {
+        this.progress += 10;
+        if (this.progress >= 100 && this.progressInterval) {
+          clearInterval(this.progressInterval);
+          this.progressInterval = null;
+        }
+      }, 100);
+
+      await this.delay(1000);
+
+      const faceScan = this.cameraService.captureFrame(this.videoElement.nativeElement);
+      const auditTrailImage = faceScan;
+
+      console.log('[FaceTec Scan] Scan completed, faceScan length:', faceScan.length);
+
+      this.message = 'Scan complete!';
+      await this.delay(500);
+
+      this.cameraService.stopCamera();
+
+      this.scanComplete.emit({
+        success: true,
+        faceScan,
+        auditTrailImage,
+        lowQualityAuditTrailImage: auditTrailImage
+      });
+    } catch (error: unknown) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      console.error('[FaceTec Scan] Error performing scan:', err);
+      this.scanComplete.emit({
+        success: false,
+        faceScan: '',
+        error: err.message || 'Scan failed'
+      });
+    } finally {
+      this.isScanning = false;
+    }
+  }
+
+  cancel(): void {
+    console.log('[FaceTec Scan] Scan cancelled');
+    this.cleanup();
+    this.scanCancelled.emit();
+  }
+
+  private cleanup(): void {
+    if (this.countdownInterval) {
+      clearInterval(this.countdownInterval);
+      this.countdownInterval = null;
+    }
+    if (this.progressInterval) {
+      clearInterval(this.progressInterval);
+      this.progressInterval = null;
+    }
+    this.cameraService.stopCamera();
+  }
+
+  private delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+}