facecog-liveness-showcase 0.0.1

package/projects/facecog-liveness-verification/src/lib/components/camera-permission/camera-permission.component.scss

@@ -0,0 +1,234 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.camera-permission-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--ion-background-color, #fff);
+}
+
+.permission-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 24px;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 480px;
+}
+
+.icon-container {
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(254, 60, 114, 0.2) 0%, rgba(254, 60, 114, 0.1) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0 32px;
+  box-shadow: 0 12px 32px rgba(254, 60, 114, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  animation: pulseGlow 2s ease-in-out infinite;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 2px solid rgba(254, 60, 114, 0.3);
+    animation: ripple 2s ease-out infinite;
+  }
+
+  .camera-icon {
+    font-size: 70px;
+    color: var(--ion-color-primary);
+  }
+}
+
+.permission-text {
+  text-align: center;
+  margin: 0 0 40px;
+  width: 100%;
+
+  h2 {
+    color: var(--ion-color-primary);
+    margin-bottom: 24px;
+    font-size: 28px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+
+  p {
+    color: var(--ion-color-medium);
+    line-height: 1.7;
+    margin: 12px 0;
+    font-size: 16px;
+    font-weight: 400;
+
+    &:first-of-type {
+      font-size: 17px;
+      color: var(--ion-text-color);
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+
+    &:last-of-type {
+      font-size: 14px;
+      opacity: 0.9;
+      margin-top: 20px;
+    }
+  }
+}
+
+.tips-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 20px 0 8px;
+  width: 100%;
+  text-align: left;
+
+  .tip-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px 16px;
+    border-radius: 10px;
+    background: rgba(var(--ion-color-medium-rgb, 146, 148, 156), 0.08);
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--ion-text-color);
+
+    ion-icon {
+      font-size: 20px;
+      flex-shrink: 0;
+      margin-top: 1px;
+      color: var(--ion-color-medium);
+    }
+
+    &.blocking-notice {
+      background: rgba(var(--ion-color-warning-rgb, 255, 196, 9), 0.12);
+      border: 1px solid rgba(var(--ion-color-warning-rgb, 255, 196, 9), 0.3);
+      font-weight: 600;
+
+      ion-icon {
+        color: var(--ion-color-warning-shade, #e0ac08);
+      }
+    }
+  }
+}
+
+.button-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+
+  ion-button {
+    width: 100%;
+  }
+
+  .cancel-link {
+    background: none;
+    border: none;
+    color: var(--ion-color-medium);
+    font-size: 15px;
+    font-weight: 500;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--ion-color-primary);
+      text-decoration: underline;
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+}
+
+@keyframes pulseGlow {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 12px 32px rgba(254, 60, 114, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 16px 40px rgba(254, 60, 114, 0.3), 0 6px 16px rgba(0, 0, 0, 0.15);
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.3);
+    opacity: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .icon-container {
+    width: 140px;
+    height: 140px;
+
+    .camera-icon {
+      font-size: 70px;
+    }
+  }
+
+  .permission-text {
+    h2 {
+      font-size: 24px;
+    }
+
+    p {
+      font-size: 15px;
+
+      &:first-of-type {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .permission-container {
+    padding: 32px 20px 24px;
+  }
+
+  .icon-container {
+    width: 120px;
+    height: 120px;
+    margin: 24px 0 32px;
+
+    .camera-icon {
+      font-size: 64px;
+    }
+  }
+
+  .permission-text {
+    h2 {
+      font-size: 22px;
+    }
+  }
+}

package/projects/facecog-liveness-verification/src/lib/components/camera-permission/camera-permission.component.spec.ts

@@ -0,0 +1,158 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChangeDetectorRef, NgZone } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+
+import { CameraPermissionComponent } from './camera-permission.component';
+import { CAMERA_PROVIDER } from '../../interfaces/camera-provider.interface';
+
+describe('CameraPermissionComponent', () => {
+  let component: CameraPermissionComponent;
+  let fixture: ComponentFixture<CameraPermissionComponent>;
+  let mockCdr: { markForCheck: jasmine.Spy; detectChanges: jasmine.Spy };
+  let ngZoneRunSpy: jasmine.Spy;
+  let getUserMediaSpy: jasmine.Spy;
+
+  beforeEach(async () => {
+    mockCdr = {
+      markForCheck: jasmine.createSpy('markForCheck'),
+      detectChanges: jasmine.createSpy('detectChanges')
+    };
+
+    const mockStream = {
+      getTracks: () => [{ stop: jasmine.createSpy('stop') }]
+    };
+    getUserMediaSpy = jasmine.createSpy('getUserMedia').and.returnValue(Promise.resolve(mockStream));
+
+    Object.defineProperty(navigator, 'mediaDevices', {
+      value: { getUserMedia: getUserMediaSpy },
+      configurable: true
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, IonicModule.forRoot(), CameraPermissionComponent],
+      providers: [
+        { provide: ChangeDetectorRef, useValue: mockCdr },
+        { provide: CAMERA_PROVIDER, useValue: null }
+      ]
+    }).compileComponents();
+
+    const ngZone = TestBed.inject(NgZone);
+    ngZoneRunSpy = spyOn(ngZone, 'run').and.callFake((fn: (...args: any[]) => any) => fn());
+
+    fixture = TestBed.createComponent(CameraPermissionComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('requestPermission calls navigator.mediaDevices.getUserMedia when no cameraProvider', async () => {
+    let emitted = false;
+    component.permissionGranted.subscribe(() => (emitted = true));
+
+    await component.requestPermission();
+
+    expect(getUserMediaSpy).toHaveBeenCalledWith({
+      video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } },
+      audio: false
+    });
+    expect(ngZoneRunSpy).toHaveBeenCalled();
+    expect(emitted).toBe(true);
+  });
+
+  it('requestPermission emits permissionGranted on success inside ngZone.run', async () => {
+    let grantedEmitted = false;
+    component.permissionGranted.subscribe(() => (grantedEmitted = true));
+
+    await component.requestPermission();
+
+    expect(ngZoneRunSpy).toHaveBeenCalled();
+    expect(grantedEmitted).toBe(true);
+  });
+
+  it('requestPermission emits permissionDenied on error inside ngZone.run', async () => {
+    getUserMediaSpy.and.returnValue(Promise.reject(new Error('Permission denied')));
+
+    let deniedEmitted = false;
+    component.permissionDenied.subscribe(() => (deniedEmitted = true));
+
+    await component.requestPermission();
+
+    expect(ngZoneRunSpy).toHaveBeenCalled();
+    expect(deniedEmitted).toBe(true);
+  });
+
+  it('requestPermission uses cameraProvider.requestPermissions() when available', async () => {
+    const mockCameraProvider = {
+      requestPermissions: jasmine.createSpy('requestPermissions').and.returnValue(Promise.resolve(true))
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, IonicModule.forRoot(), CameraPermissionComponent],
+      providers: [
+        { provide: ChangeDetectorRef, useValue: mockCdr },
+        { provide: CAMERA_PROVIDER, useValue: mockCameraProvider }
+      ]
+    }).compileComponents();
+
+    const ngZone = TestBed.inject(NgZone);
+    spyOn(ngZone, 'run').and.callFake((fn: (...args: any[]) => any) => fn());
+
+    fixture = TestBed.createComponent(CameraPermissionComponent);
+    component = fixture.componentInstance;
+
+    let grantedEmitted = false;
+    component.permissionGranted.subscribe(() => (grantedEmitted = true));
+
+    await component.requestPermission();
+
+    expect(mockCameraProvider.requestPermissions).toHaveBeenCalled();
+    expect(getUserMediaSpy).not.toHaveBeenCalled();
+    expect(grantedEmitted).toBe(true);
+  });
+
+  it('requestPermission emits permissionDenied when cameraProvider returns false', async () => {
+    const mockCameraProvider = {
+      requestPermissions: jasmine.createSpy('requestPermissions').and.returnValue(Promise.resolve(false))
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [CommonModule, IonicModule.forRoot(), CameraPermissionComponent],
+      providers: [
+        { provide: ChangeDetectorRef, useValue: mockCdr },
+        { provide: CAMERA_PROVIDER, useValue: mockCameraProvider }
+      ]
+    }).compileComponents();
+
+    const ngZone = TestBed.inject(NgZone);
+    spyOn(ngZone, 'run').and.callFake((fn: (...args: any[]) => any) => fn());
+
+    fixture = TestBed.createComponent(CameraPermissionComponent);
+    component = fixture.componentInstance;
+
+    let deniedEmitted = false;
+    component.permissionDenied.subscribe(() => (deniedEmitted = true));
+
+    await component.requestPermission();
+
+    expect(mockCameraProvider.requestPermissions).toHaveBeenCalled();
+    expect(deniedEmitted).toBe(true);
+  });
+
+  it('onLater emits permissionDenied', () => {
+    let emitted = false;
+    component.permissionDenied.subscribe(() => (emitted = true));
+    component.onLater();
+    expect(emitted).toBe(true);
+  });
+
+  it('hideCancel input defaults to false', () => {
+    expect(component.hideCancel).toBe(false);
+  });
+
+  it('poseSpecificMode input defaults to false', () => {
+    expect(component.poseSpecificMode).toBe(false);
+  });
+});

package/projects/facecog-liveness-verification/src/lib/components/camera-permission/camera-permission.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectorRef, Component, EventEmitter, Input, NgZone, Output, Inject, Optional } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { ICameraProvider, CAMERA_PROVIDER } from '../../interfaces/camera-provider.interface';
+
+@Component({
+  selector: 'lib-camera-permission',
+  standalone: true,
+  imports: [CommonModule, IonicModule],
+  templateUrl: './camera-permission.component.html',
+  styleUrls: ['./camera-permission.component.scss']
+})
+export class CameraPermissionComponent {
+  @Input() hideCancel = false;
+  @Input() poseSpecificMode = false;
+  @Output() permissionGranted = new EventEmitter<void>();
+  @Output() permissionDenied = new EventEmitter<void>();
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private ngZone: NgZone,
+    @Optional() @Inject(CAMERA_PROVIDER) private cameraProvider: ICameraProvider | null
+  ) {}
+
+  async requestPermission(): Promise<void> {
+    try {
+      if (this.cameraProvider) {
+        const granted = await this.cameraProvider.requestPermissions();
+        this.ngZone.run(() => {
+          if (granted) {
+            this.permissionGranted.emit();
+          } else {
+            this.permissionDenied.emit();
+          }
+        });
+      } else {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } },
+          audio: false
+        });
+
+        stream.getTracks().forEach(track => track.stop());
+        this.ngZone.run(() => {
+          this.permissionGranted.emit();
+        });
+      }
+    } catch (error) {
+      console.error('Camera permission denied:', error);
+      this.ngZone.run(() => {
+        this.permissionDenied.emit();
+      });
+    }
+  }
+
+  onLater(): void {
+    this.permissionDenied.emit();
+  }
+}

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

@@ -0,0 +1,34 @@
+<!-- Permission Step -->
+<div *ngIf="currentStep === 'permission'" class="step-permission">
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>Camera Access Required</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <p>Please allow camera access to continue with verification.</p>
+      <ion-button expand="block" (click)="requestCameraPermission()">
+        <ion-icon name="videocam" slot="start"></ion-icon>
+        Allow Camera
+      </ion-button>
+      <ion-button expand="block" fill="outline" (click)="onCancel()">
+        Cancel
+      </ion-button>
+    </ion-card-content>
+  </ion-card>
+</div>
+
+<!-- Preview Step -->
+<div *ngIf="currentStep === 'preview'" class="step-preview">
+  <div class="camera-container">
+    <video #videoElement autoplay playsinline muted class="camera-video"></video>
+    <div class="overlay">
+      <div class="status-message">{{ statusMessage }}</div>
+      <div class="progress-bar">
+        <div class="progress-fill" [style.width.%]="matchProgress"></div>
+      </div>
+    </div>
+  </div>
+  <ion-button expand="block" fill="outline" (click)="onCancel()">
+    Cancel
+  </ion-button>
+</div>

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

@@ -0,0 +1,210 @@
+import { Component, Input, Output, EventEmitter, OnDestroy, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { CameraService } from '../../services/camera.service';
+import { VideoRecorderService } from '../../services/video-recorder.service';
+import { LivenessConfigService } from '../../services/liveness-config.service';
+import { PoseDefinition } from '../../interfaces/pose-definition.interface';
+import { LivenessVerificationConfig } from '../../interfaces/liveness-verification-config.interface';
+
+export interface CapturedVerificationData {
+  frames: string[];
+  videoBlob?: Blob;
+  attemptNumber: number;
+}
+
+type CameraStep = 'permission' | 'preview';
+
+@Component({
+  selector: 'facecog-camera-verification',
+  standalone: true,
+  imports: [CommonModule, IonicModule],
+  templateUrl: './camera-verification.component.html',
+  styles: [`
+    .camera-container {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 4/3;
+      background: #000;
+      border-radius: 12px;
+      overflow: hidden;
+      margin-bottom: 16px;
+    }
+    .camera-video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform: scaleX(-1);
+    }
+    .overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 16px;
+      background: linear-gradient(transparent, rgba(0,0,0,0.7));
+    }
+    .status-message {
+      color: white;
+      text-align: center;
+      margin-bottom: 8px;
+      font-weight: 500;
+    }
+    .progress-bar {
+      height: 4px;
+      background: rgba(255,255,255,0.3);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: var(--ion-color-success);
+      transition: width 0.3s ease;
+    }
+  `]
+})
+export class CameraVerificationComponent implements OnDestroy, AfterViewInit {
+  @ViewChild('videoElement') videoElementRef?: ElementRef<HTMLVideoElement>;
+
+  @Input() selectedPose?: PoseDefinition;
+  @Input() config?: Partial<LivenessVerificationConfig>;
+
+  @Output() verificationComplete = new EventEmitter<CapturedVerificationData>();
+  @Output() cancelled = new EventEmitter<void>();
+  @Output() error = new EventEmitter<Error>();
+
+  currentStep: CameraStep = 'permission';
+  statusMessage = 'Position yourself in the frame...';
+  matchProgress = 0;
+
+  private capturedFrames: string[] = [];
+  private videoBlob?: Blob;
+  private attemptCount = 0;
+  private matchingInterval?: ReturnType<typeof setInterval>;
+
+  constructor(
+    private cameraService: CameraService,
+    private videoRecorder: VideoRecorderService,
+    private configService: LivenessConfigService
+  ) {}
+
+  ngAfterViewInit(): void {
+    // Component is ready, wait for permission step
+  }
+
+  ngOnDestroy(): void {
+    this.cleanup();
+  }
+
+  async requestCameraPermission(): Promise<void> {
+    try {
+      const hasPermission = await this.cameraService.requestPermissions();
+      if (hasPermission) {
+        this.currentStep = 'preview';
+        setTimeout(() => this.startCameraPreview(), 100);
+      } else {
+        this.handleError(new Error('Camera permission denied'));
+      }
+    } catch (err) {
+      this.handleError(err as Error);
+    }
+  }
+
+  onCancel(): void {
+    this.cleanup();
+    this.cancelled.emit();
+  }
+
+  private async startCameraPreview(): Promise<void> {
+    const videoElement = this.videoElementRef?.nativeElement;
+    if (!videoElement) {
+      this.handleError(new Error('Video element not found'));
+      return;
+    }
+
+    try {
+      const started = await this.cameraService.startCamera(videoElement);
+      if (!started) {
+        this.handleError(new Error('Failed to start camera'));
+        return;
+      }
+
+      const config = this.configService.getConfig();
+      if (config.enableVideoRecording) {
+        const stream = this.cameraService.getStream();
+        if (stream) {
+          await this.videoRecorder.startRecording(stream);
+        }
+      }
+
+      this.simulatePoseMatching();
+    } catch (err) {
+      this.handleError(err as Error);
+    }
+  }
+
+  private simulatePoseMatching(): void {
+    let progress = 0;
+    this.matchingInterval = setInterval(() => {
+      progress += Math.random() * 10 + 5;
+      this.matchProgress = Math.min(progress, 100);
+      this.statusMessage = progress < 50
+        ? 'Position yourself in the frame...'
+        : progress < 80
+          ? 'Hold steady...'
+          : 'Almost there...';
+
+      if (progress >= 100) {
+        if (this.matchingInterval) {
+          clearInterval(this.matchingInterval);
+        }
+        this.captureAndComplete();
+      }
+    }, 500);
+  }
+
+  private async captureAndComplete(): Promise<void> {
+    const videoElement = this.videoElementRef?.nativeElement;
+    if (!videoElement) return;
+
+    this.capturedFrames = await this.cameraService.captureFrames(videoElement, 5, 100);
+
+    const config = this.configService.getConfig();
+    if (config.enableVideoRecording && this.videoRecorder.isRecording()) {
+      const recording = await this.videoRecorder.stopRecording();
+      this.videoBlob = recording.blob;
+    }
+
+    this.cameraService.stopCamera();
+    this.attemptCount++;
+
+    this.verificationComplete.emit({
+      frames: this.capturedFrames,
+      videoBlob: this.videoBlob,
+      attemptNumber: this.attemptCount
+    });
+  }
+
+  private handleError(err: Error): void {
+    console.error('[CameraVerification] Error:', err);
+    this.cleanup();
+    this.error.emit(err);
+  }
+
+  private cleanup(): void {
+    if (this.matchingInterval) {
+      clearInterval(this.matchingInterval);
+    }
+    this.cameraService.stopCamera();
+    this.videoRecorder.cleanup();
+  }
+
+  reset(): void {
+    this.cleanup();
+    this.currentStep = 'permission';
+    this.statusMessage = 'Position yourself in the frame...';
+    this.matchProgress = 0;
+    this.capturedFrames = [];
+    this.videoBlob = undefined;
+  }
+}