facecog-liveness-showcase 0.0.1

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

@@ -0,0 +1,963 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  AfterViewChecked,
+  Optional,
+  Inject,
+  ComponentRef,
+  NgZone,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+  Output,
+  EventEmitter,
+  signal,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ApplicationRef
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { Observable, Subject, Subscription, firstValueFrom } from 'rxjs';
+import { LivenessConfigService } from '../../services/liveness-config.service';
+import { LivenessOrchestratorService } from '../../services/liveness-orchestrator.service';
+import { PoseSelectionService } from '../../services/pose-selection.service';
+import { VerificationApiService } from '../../services/verification-api.service';
+import { IntroComponent } from '../intro/intro.component';
+import { CameraPermissionComponent } from '../camera-permission/camera-permission.component';
+import { LivePreviewComponent } from '../live-preview/live-preview.component';
+import { FaceTecScanComponent } from '../facetec-scan/facetec-scan.component';
+import { ProcessingComponent } from '../processing/processing.component';
+import { VerificationResultComponent } from '../verification-result/verification-result.component';
+import { AwsFaceLivenessComponent } from '../aws-face-liveness/aws-face-liveness.component';
+import { AWS_FACE_LIVENESS_COMPONENT } from '../../models/constants/aws-face-liveness-component.token';
+import type { ReferencePose } from '../../services/pose-detection/reference-pose.service';
+import type { SelectedPoseInfo } from '../../services/pose-selection.service';
+import type { LivenessConfig } from '../../interfaces/liveness-config.interface';
+import type { LivenessResult } from '../../interfaces/liveness-result.interface';
+import type { LivenessBackend } from '../../types/liveness-backend.type';
+import type { FaceTecScanResult, AwsFaceLivenessScanResult } from '../../interfaces/scan-results.interface';
+
+type FlowStep = 'intro' | 'permission' | 'preview' | 'facetec' | 'aws-liveness' | 'processing' | 'result';
+
+const FLOW_VERBOSE = true;
+
+function flowLog(tag: string, message: string, data?: unknown): void {
+  if (!FLOW_VERBOSE) return;
+  if (data !== undefined) {
+    console.log(`%c[LivenessFlow:${tag}] ${message}`, 'color: #00bcd4; font-weight: bold', data);
+  } else {
+    console.log(`%c[LivenessFlow:${tag}] ${message}`, 'color: #00bcd4; font-weight: bold');
+  }
+}
+
+function flowWarn(tag: string, message: string, data?: unknown): void {
+  console.warn(`[LivenessFlow:${tag}] ${message}`, data ?? '');
+}
+
+function flowError(tag: string, message: string, data?: unknown): void {
+  console.error(`[LivenessFlow:${tag}] ${message}`, data ?? '');
+}
+
+@Component({
+  selector: 'facecog-liveness-flow',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonicModule,
+    IntroComponent,
+    CameraPermissionComponent,
+    LivePreviewComponent,
+    FaceTecScanComponent,
+    ProcessingComponent,
+    VerificationResultComponent,
+    AwsFaceLivenessComponent
+  ],
+  templateUrl: './liveness-flow.component.html',
+  styleUrls: ['./liveness-flow.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LivenessFlowComponent implements OnInit, OnDestroy, AfterViewChecked {
+  @ViewChild('awsLivenessContainer', { read: ViewContainerRef }) awsLivenessContainer?: ViewContainerRef;
+
+  @Output() verificationComplete = new EventEmitter<LivenessResult>();
+
+  readonly currentStep = signal<FlowStep>('intro');
+  config!: LivenessConfig;
+  readonly result = signal<LivenessResult | null>(null);
+  readonly processingProgress = signal(0);
+  capturedFrames: string[] = [];
+  videoBlob?: Blob;
+  attemptCount = 0;
+  referencePose?: ReferencePose;
+  selectedPose?: SelectedPoseInfo;
+
+  verificationSessionId = '';
+  gestureFrameHash = '';
+  faceTecResult: FaceTecScanResult | null = null;
+  awsFaceLivenessResult: AwsFaceLivenessScanResult | null = null;
+  deviceKey = 'd0WBygutVzX1Iq7plu7zQMC4CncoA6cq';
+
+  awsRegion = 'us-west-2';
+  useAwsFaceLiveness = false;
+
+  private resultSubject = new Subject<LivenessResult>();
+  public result$: Observable<LivenessResult> = this.resultSubject.asObservable();
+  private awsOutputSubs: Subscription[] = [];
+  private awsComponentRef: ComponentRef<unknown> | null = null;
+  private awsComponentCreated = false;
+  private awsWatchdogTimer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(
+    private configService: LivenessConfigService,
+    private orchestrator: LivenessOrchestratorService,
+    private poseSelection: PoseSelectionService,
+    private verificationApi: VerificationApiService,
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+    private appRef: ApplicationRef,
+    @Optional() @Inject(AWS_FACE_LIVENESS_COMPONENT) public awsFaceLivenessComponent: Type<unknown> | null
+  ) {
+    flowLog('constructor', 'Component created');
+  }
+
+  ngOnInit(): void {
+    const libConfig = this.configService.getConfig();
+    this.config = {
+      ...libConfig,
+      backends: libConfig.backends || (['amazon'] as LivenessBackend[])
+    };
+
+    if (libConfig.useAwsFaceLiveness === true) {
+      this.useAwsFaceLiveness = true;
+    }
+
+    flowLog('ngOnInit', 'Config loaded', {
+      backends: this.config.backends,
+      apiUrl: (libConfig as any).apiUrl,
+      showIntroScreen: libConfig.showIntroScreen,
+      enableVideoRecording: libConfig.enableVideoRecording,
+      autoCapture: libConfig.autoCapture,
+      customPose: !!libConfig.customPose,
+      poseId: libConfig.poseId,
+      useAwsFaceLiveness: this.useAwsFaceLiveness,
+    });
+
+    const skipIntro = this.shouldSkipIntro();
+    flowLog('ngOnInit', `shouldSkipIntro=${skipIntro}`);
+
+    if (skipIntro) {
+      this.currentStep.set('permission');
+      this.selectedPose = this.poseSelection.getSelectedPose() ?? undefined;
+      flowLog('ngOnInit', 'Skipping intro, selected pose:', this.selectedPose?.pose?.name ?? 'none');
+    }
+    flowLog('ngOnInit', `Initial step: ${this.currentStep()}`);
+  }
+
+  ngAfterViewChecked(): void {
+    if (this.currentStep() === 'aws-liveness' && !this.awsComponentCreated) {
+      if (this.awsFaceLivenessComponent && this.awsLivenessContainer) {
+        this.createDynamicAwsComponent();
+      } else if (this.awsFaceLivenessComponent && !this.awsLivenessContainer) {
+        flowLog('ngAfterViewChecked', 'aws-liveness step active but ViewContainerRef not yet available, scheduling retry');
+        if (!this._awsRetryScheduled) {
+          this._awsRetryScheduled = true;
+          setTimeout(() => {
+            this._awsRetryScheduled = false;
+            if (this.currentStep() === 'aws-liveness' && !this.awsComponentCreated && this.awsLivenessContainer) {
+              this.createDynamicAwsComponent();
+            } else if (this.currentStep() === 'aws-liveness' && !this.awsComponentCreated) {
+              flowWarn('ngAfterViewChecked', 'ViewContainerRef still not available after retry, forcing detectChanges');
+              this.cdr.detectChanges();
+            }
+          }, 50);
+        }
+      }
+    }
+
+    if (this.currentStep() !== 'aws-liveness' && this.awsComponentCreated) {
+      this.destroyDynamicAwsComponent();
+    }
+  }
+  private _awsRetryScheduled = false;
+
+  ngOnDestroy(): void {
+    flowLog('ngOnDestroy', 'Component destroying');
+    this.clearAwsWatchdog();
+    this.destroyDynamicAwsComponent();
+  }
+
+  private clearAwsWatchdog(): void {
+    if (this.awsWatchdogTimer) {
+      clearTimeout(this.awsWatchdogTimer);
+      this.awsWatchdogTimer = null;
+    }
+  }
+
+  private startAwsWatchdog(): void {
+    this.clearAwsWatchdog();
+    this.awsWatchdogTimer = setTimeout(() => {
+      if (this.currentStep() === 'aws-liveness') {
+        flowWarn('watchdog', 'AWS Face Liveness did not respond within 30s — showing error');
+        this.ngZone.run(() => {
+          this.setResultAndNotify({
+            success: false,
+            confidence: 0,
+            verifiedImage: '',
+            error: 'Camera or liveness check timed out. Please check:\n• Camera is enabled in System Settings\n• Browser has camera permission\n• No other app is using the camera\n• Try refreshing the page or using Chrome/Edge',
+            metadata: {
+              timestamp: new Date().toISOString(),
+              backend: 'amazon' as LivenessBackend,
+              confidence: 0,
+              attemptNumber: this.attemptCount
+            }
+          });
+          this.currentStep.set('result');
+          this.cdr.markForCheck();
+          this.cdr.detectChanges();
+        });
+      }
+    }, 30000);
+  }
+
+  private createDynamicAwsComponent(): void {
+    if (!this.awsLivenessContainer || !this.awsFaceLivenessComponent) return;
+
+    flowLog('awsComponent', 'Creating dynamic AWS Face Liveness component');
+
+    this.awsLivenessContainer.clear();
+
+    this.awsComponentRef = this.awsLivenessContainer.createComponent(this.awsFaceLivenessComponent);
+    this.awsComponentCreated = true;
+
+    const instance = this.awsComponentRef.instance as {
+      region?: string;
+      autoStart?: boolean;
+      showCancelButton?: boolean;
+      scanComplete?: { subscribe: (fn: (r: AwsFaceLivenessScanResult) => void) => Subscription };
+      scanCancelled?: { subscribe: (fn: () => void) => Subscription };
+    };
+
+    if ('region' in instance) instance.region = this.awsRegion;
+    if ('autoStart' in instance) instance.autoStart = true;
+    if ('showCancelButton' in instance) instance.showCancelButton = true;
+
+    this.awsOutputSubs.forEach((s) => s.unsubscribe());
+    this.awsOutputSubs = [];
+
+    if (instance.scanComplete) {
+      this.awsOutputSubs.push(
+        instance.scanComplete.subscribe((r) => this.onAwsFaceLivenessComplete(r))
+      );
+    }
+    if (instance.scanCancelled) {
+      this.awsOutputSubs.push(
+        instance.scanCancelled.subscribe(() => this.onAwsFaceLivenessCancelled())
+      );
+    }
+
+    this.awsComponentRef.changeDetectorRef.detectChanges();
+
+    flowLog('awsComponent', 'Dynamic AWS Face Liveness component created and configured');
+  }
+
+  private destroyDynamicAwsComponent(): void {
+    this.awsOutputSubs.forEach((s) => s.unsubscribe());
+    this.awsOutputSubs = [];
+
+    if (this.awsComponentRef) {
+      this.awsComponentRef.destroy();
+      this.awsComponentRef = null;
+    }
+
+    if (this.awsLivenessContainer) {
+      this.awsLivenessContainer.clear();
+    }
+
+    this.awsComponentCreated = false;
+  }
+
+  get awsFaceLivenessInputs(): { region: string; autoStart: boolean; showCancelButton: boolean } {
+    return { region: this.awsRegion, autoStart: true, showCancelButton: true };
+  }
+
+  startLivenessFlow(config?: Partial<LivenessConfig>): Observable<LivenessResult> {
+    flowLog('startLivenessFlow', 'Called', config);
+    if (config) {
+      this.configService.updateConfig(config);
+      const libConfig = this.configService.getConfig();
+      this.config = {
+        ...libConfig,
+        backends: libConfig.backends || (['amazon'] as LivenessBackend[])
+      };
+    }
+    if (this.shouldSkipIntro()) {
+      this.currentStep.set('permission');
+      this.selectedPose = this.poseSelection.getSelectedPose() ?? undefined;
+    } else {
+      this.currentStep.set('intro');
+    }
+    this.attemptCount = 0;
+    return this.result$;
+  }
+
+  private shouldSkipIntro(): boolean {
+    const verificationConfig = this.configService.getConfig();
+    if (verificationConfig.showIntroScreen !== false) return false;
+    return !!(
+      verificationConfig.customPose ||
+      (verificationConfig.poseId != null && verificationConfig.poseId > 0) ||
+      verificationConfig.useAwsFaceLiveness
+    );
+  }
+
+  get poseSpecificMode(): boolean {
+    const c = this.configService.getConfig();
+    return !!(c.customPose || (c.poseId != null && c.poseId > 0));
+  }
+
+  onReferencePoseUploaded(pose: ReferencePose): void {
+    this.referencePose = pose;
+    flowLog('event', 'Reference pose uploaded:', pose.poseDescription);
+  }
+
+  onPoseSelected(pose: SelectedPoseInfo): void {
+    this.selectedPose = pose;
+    flowLog('event', 'Pose selected:', pose.pose.name);
+  }
+
+  onAwsFaceLivenessToggled(enabled: boolean): void {
+    this.useAwsFaceLiveness = enabled;
+    flowLog('event', 'AWS Face Liveness toggled:', enabled);
+  }
+
+  onStartClicked(): void {
+    flowLog('step', 'Start clicked → permission');
+    this.currentStep.set('permission');
+  }
+
+  async onPermissionGranted(): Promise<void> {
+    if (this.useAwsFaceLiveness) {
+      flowLog('step', 'Permission granted → skipping preview for AWS Face Liveness (static flow)');
+      await this.startAwsLivenessDirectly();
+      return;
+    }
+    flowLog('step', 'Permission granted → preview');
+    this.currentStep.set('preview');
+  }
+
+  private async startAwsLivenessDirectly(): Promise<void> {
+    flowLog('awsDirect', '=== STARTING AWS FACE LIVENESS DIRECTLY (no pose matching) ===');
+    try {
+      const config = this.configService.getConfig();
+      const backends = config.backends || ['amazon'];
+      const hasFacetec = backends.includes('facetec');
+
+      const plan: Array<{ kind: 'gesture' | 'facetec'; pose?: string }> = [
+        { kind: 'gesture' as const, pose: 'hello' }
+      ];
+      if (hasFacetec) {
+        plan.push({ kind: 'facetec' as const });
+      }
+
+      flowLog('awsDirect', '>>> Creating verification session...');
+      const session = await firstValueFrom(this.verificationApi.startSession({ plan }));
+      flowLog('awsDirect', '<<< startSession response:', session);
+      if (!session) throw new Error('Failed to create verification session');
+
+      this.verificationSessionId = session.sessionId;
+      flowLog('awsDirect', `Session ID: ${this.verificationSessionId}`);
+
+      this.ngZone.run(() => {
+        this.currentStep.set('aws-liveness');
+        this.startAwsWatchdog();
+        this.cdr.markForCheck();
+        this.cdr.detectChanges();
+        this.appRef.tick();
+        flowLog('awsDirect', `Step set to: ${this.currentStep()}`);
+
+        setTimeout(() => {
+          const awsEl = document.querySelector('facecog-aws-face-liveness');
+          flowLog('awsDirect', `Post-tick DOM check: facecog-aws-face-liveness ${awsEl ? 'FOUND' : 'NOT FOUND'}`);
+          if (!awsEl) {
+            flowWarn('awsDirect', 'Component not in DOM after tick, forcing another detectChanges cycle');
+            this.cdr.markForCheck();
+            this.cdr.detectChanges();
+            this.appRef.tick();
+          }
+        }, 100);
+      });
+    } catch (error: unknown) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      flowError('awsDirect', `!!! ERROR: ${err.message}`, err);
+      this.ngZone.run(() => {
+        this.setResultAndNotify({
+          success: false,
+          confidence: 0,
+          verifiedImage: '',
+          error: err.message || 'Failed to start AWS Face Liveness',
+          metadata: {
+            timestamp: new Date().toISOString(),
+            backend: 'amazon' as LivenessBackend,
+            confidence: 0,
+            attemptNumber: this.attemptCount
+          }
+        });
+        this.currentStep.set('result');
+        this.cdr.markForCheck();
+        this.cdr.detectChanges();
+      });
+    }
+  }
+
+  onPermissionDenied(): void {
+    flowLog('step', 'Permission denied → showing result screen with error');
+    const permissionError = {
+      success: false,
+      confidence: 0,
+      verifiedImage: '',
+      error: 'Camera permission denied. Please check:\n• Camera is enabled in System Settings\n• Browser has camera permission\n• No other app is using the camera\n• Try refreshing the page',
+      metadata: {
+        timestamp: new Date().toISOString(),
+        backend: 'amazon' as LivenessBackend,
+        confidence: 0,
+        attemptNumber: this.attemptCount
+      }
+    };
+    this.setResultAndNotify(permissionError);
+    this.currentStep.set('result');
+    this.cdr.markForCheck();
+    this.cdr.detectChanges();
+  }
+
+  async onCaptureComplete(data: { frames: string[]; videoBlob?: Blob }): Promise<void> {
+    flowLog('capture', `=== CAPTURE COMPLETE === frames=${data.frames.length}, hasVideo=${!!data.videoBlob}`);
+    this.capturedFrames = data.frames;
+    this.videoBlob = data.videoBlob;
+
+    const config = this.configService.getConfig();
+    const backends = config.backends || ['amazon'];
+    flowLog('capture', `Active backends from config: ${JSON.stringify(backends)}`);
+    flowLog('capture', `useAwsFaceLiveness: ${this.useAwsFaceLiveness}`);
+    flowLog('capture', `API URL from config: ${(config as any).apiUrl}`);
+
+    const hasFacetec = backends.includes('facetec');
+    const plan: Array<{ kind: 'gesture' | 'facetec'; pose?: string }> = [
+      { kind: 'gesture' as const, pose: 'hello' }
+    ];
+    if (hasFacetec) {
+      plan.push({ kind: 'facetec' as const });
+    }
+    flowLog('capture', `Verification plan (hasFacetec=${hasFacetec}):`, plan);
+
+    try {
+      flowLog('capture', '>>> Calling verificationApi.startSession()...');
+      const session = await firstValueFrom(this.verificationApi.startSession({ plan }));
+      flowLog('capture', '<<< startSession response:', session);
+      if (!session) throw new Error('Failed to create verification session');
+
+      this.verificationSessionId = session.sessionId;
+      flowLog('capture', `Session ID: ${this.verificationSessionId}`);
+
+      flowLog('capture', '>>> Calling verificationApi.verifyGestures()...');
+      const gestureResponse = await firstValueFrom(
+        this.verificationApi.verifyGestures({
+          sessionId: this.verificationSessionId,
+          stepIndex: 0,
+          frames: this.capturedFrames,
+          pose: 'hello'
+        })
+      );
+      flowLog('capture', '<<< verifyGestures response:', gestureResponse);
+
+      if (!gestureResponse) throw new Error('Gesture verification failed');
+
+      this.gestureFrameHash = gestureResponse.frameHash || '';
+      flowLog('capture', `Gesture frame hash: ${this.gestureFrameHash}`);
+
+      if (this.useAwsFaceLiveness) {
+        flowLog('capture', 'Route: AWS Face Liveness path');
+        await new Promise((r) => setTimeout(r, 500));
+        this.currentStep.set('aws-liveness');
+        flowLog('capture', `Step set to: ${this.currentStep()}`);
+      } else if (hasFacetec) {
+        flowLog('capture', 'Route: FaceTec path → setting step to facetec');
+        this.currentStep.set('facetec');
+        flowLog('capture', `Step set to: ${this.currentStep()}`);
+      } else {
+        flowLog('capture', 'Route: Multi-backend processing path (no facetec in backends)');
+        this.currentStep.set('processing');
+        flowLog('capture', `Step set to: ${this.currentStep()}`);
+        await this.processMultiBackendVerification();
+      }
+    } catch (error: unknown) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      flowError('capture', `!!! CAPTURE ERROR: ${err.message}`, err);
+      this.setResultAndNotify({
+        success: false,
+        confidence: 0,
+        verifiedImage: this.capturedFrames[0] || '',
+        error: err.message || 'Hybrid verification failed',
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'facetec' as LivenessBackend,
+          confidence: 0,
+          attemptNumber: this.attemptCount
+        }
+      });
+      this.currentStep.set('result');
+      flowLog('capture', `Error handled, step set to: ${this.currentStep()}`);
+    }
+  }
+
+  async onFaceTecScanComplete(result: FaceTecScanResult): Promise<void> {
+    flowLog('facetec', '=== FACETEC SCAN COMPLETE ===', { success: result.success, error: result.error });
+    this.faceTecResult = result;
+
+    if (!result.success) {
+      flowLog('facetec', 'FaceTec scan failed, going to result');
+      this.setResultAndNotify({
+        success: false,
+        confidence: 0,
+        verifiedImage: this.capturedFrames[0] || '',
+        error: result.error || 'FaceTec scan failed',
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'facetec' as LivenessBackend,
+          confidence: 0,
+          attemptNumber: this.attemptCount
+        }
+      });
+      this.currentStep.set('result');
+      return;
+    }
+
+    flowLog('facetec', 'FaceTec scan succeeded, going to processing');
+    this.currentStep.set('processing');
+    await this.processHybridVerification();
+  }
+
+  onFaceTecScanCancelled(): void {
+    flowLog('facetec', 'FaceTec scan cancelled');
+    this.onCancel();
+  }
+
+  async onAwsFaceLivenessComplete(result: AwsFaceLivenessScanResult): Promise<void> {
+    flowLog('aws', '=== AWS FACE LIVENESS COMPLETE ===', { success: result.success, error: result.error });
+    this.clearAwsWatchdog();
+    this.awsFaceLivenessResult = result;
+    this.awsOutputSubs.forEach((s) => s.unsubscribe());
+    this.awsOutputSubs = [];
+
+    if (!result.success) {
+      flowLog('aws', 'AWS check failed, going to result');
+      this.setResultAndNotify({
+        success: false,
+        confidence: 0,
+        verifiedImage: this.capturedFrames[0] || '',
+        error: result.error || 'AWS Face Liveness check failed',
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'amazon' as LivenessBackend,
+          confidence: 0,
+          attemptNumber: this.attemptCount
+        }
+      });
+      this.currentStep.set('result');
+      return;
+    }
+
+    flowLog('aws', 'AWS check succeeded, going to processing');
+    this.currentStep.set('processing');
+    await this.processAwsFaceLivenessVerification();
+  }
+
+  onAwsFaceLivenessCancelled(): void {
+    flowLog('aws', 'AWS Face Liveness cancelled');
+    this.clearAwsWatchdog();
+    this.awsOutputSubs.forEach((s) => s.unsubscribe());
+    this.awsOutputSubs = [];
+    this.onCancel();
+  }
+
+  private async processAwsFaceLivenessVerification(): Promise<void> {
+    flowLog('processAws', '=== PROCESSING AWS LIVENESS VERIFICATION ===');
+    this.attemptCount++;
+    const primaryFrame = this.capturedFrames[0] || '';
+    const hasPreviewCapture = this.capturedFrames.length > 0;
+
+    const progressInterval = setInterval(() => {
+      this.processingProgress.update(p => Math.min(p + 10, 90));
+    }, 200);
+
+    try {
+      const awsLivenessResult = this.awsFaceLivenessResult!;
+      let videoUrl: string | undefined;
+
+      if (hasPreviewCapture) {
+        flowLog('processAws', 'Has preview capture frames, running orchestrator verification...');
+        flowLog('processAws', '>>> Calling orchestrator.verifyLiveness()...');
+        const backendResponse = await new Promise<{ isLive: boolean; confidence: number }>((resolve, reject) => {
+          this.orchestrator.verifyLiveness(primaryFrame, this.videoBlob).subscribe({ next: resolve, error: reject });
+        });
+        flowLog('processAws', '<<< verifyLiveness response:', backendResponse);
+
+        const multiBackendResult = this.orchestrator.multiBackendResult;
+        flowLog('processAws', 'Multi-backend result available:', !!multiBackendResult);
+
+        const uploadSessionId = multiBackendResult?.primary?.metadata?.sessionId || this.verificationSessionId;
+        videoUrl = await this.uploadMediaToS3(uploadSessionId, primaryFrame);
+
+        clearInterval(progressInterval);
+        this.processingProgress.set(100);
+
+        const isLive = awsLivenessResult.isLive && backendResponse.isLive;
+        const confidence = (awsLivenessResult.confidence + backendResponse.confidence) / 2;
+
+        flowLog('processAws', `Final (hybrid): isLive=${isLive}, confidence=${confidence}`);
+
+        this.setResultAndNotify({
+          success: isLive,
+          confidence,
+          verifiedImage: primaryFrame,
+          videoBlob: this.videoBlob,
+          videoUrl,
+          multiBackendResults: multiBackendResult || undefined,
+          metadata: {
+            timestamp: new Date().toISOString(),
+            backend: 'amazon',
+            confidence,
+            attemptNumber: this.attemptCount,
+            sessionId: this.verificationSessionId
+          }
+        });
+      } else {
+        flowLog('processAws', 'Direct AWS flow (no preview capture), using AWS result only');
+
+        const awsVideoBlob = awsLivenessResult.videoBlob;
+        if (awsVideoBlob) {
+          flowLog('processAws', `AWS video blob available: ${(awsVideoBlob.size / 1024 / 1024).toFixed(2)} MB`);
+          this.videoBlob = awsVideoBlob;
+          videoUrl = await this.uploadMediaToS3(this.verificationSessionId, '');
+        }
+
+        clearInterval(progressInterval);
+        this.processingProgress.set(100);
+
+        flowLog('processAws', `Final (AWS-only): isLive=${awsLivenessResult.isLive}, confidence=${awsLivenessResult.confidence}`);
+
+        this.setResultAndNotify({
+          success: awsLivenessResult.isLive,
+          confidence: awsLivenessResult.confidence,
+          verifiedImage: '',
+          videoBlob: awsVideoBlob,
+          videoUrl,
+          startVideoCheckClickedAt: awsLivenessResult.startVideoCheckClickedAt,
+          recordingStartedAt: awsLivenessResult.recordingStartedAt,
+          metadata: {
+            timestamp: new Date().toISOString(),
+            backend: 'amazon',
+            confidence: awsLivenessResult.confidence,
+            attemptNumber: this.attemptCount,
+            sessionId: this.verificationSessionId
+          }
+        });
+      }
+
+      this.currentStep.set('result');
+      flowLog('processAws', `Step set to: ${this.currentStep()}`);
+    } catch (error: unknown) {
+      clearInterval(progressInterval);
+      const err = error instanceof Error ? error : new Error(String(error));
+      flowError('processAws', `!!! ERROR: ${err.message}`, err);
+      this.setResultAndNotify({
+        success: false,
+        confidence: 0,
+        verifiedImage: primaryFrame,
+        error: err.message || 'AWS Face Liveness verification failed',
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'amazon' as LivenessBackend,
+          confidence: 0,
+          attemptNumber: this.attemptCount
+        }
+      });
+      this.currentStep.set('result');
+      flowLog('processAws', `Error handled, step set to: ${this.currentStep()}`);
+    }
+  }
+
+  private async processHybridVerification(): Promise<void> {
+    flowLog('processHybrid', '=== PROCESSING HYBRID VERIFICATION ===');
+    this.attemptCount++;
+    const primaryFrame = this.capturedFrames[0];
+
+    const progressInterval = setInterval(() => {
+      this.processingProgress.update(p => Math.min(p + 10, 90));
+    }, 200);
+
+    try {
+      flowLog('processHybrid', '>>> Calling orchestrator.verifyLiveness()...');
+      await new Promise((resolve, reject) => {
+        this.orchestrator.verifyLiveness(primaryFrame, this.videoBlob).subscribe({ next: resolve, error: reject });
+      });
+      flowLog('processHybrid', '<<< verifyLiveness completed');
+
+      const multiBackendResult = this.orchestrator.multiBackendResult;
+      flowLog('processHybrid', 'Multi-backend result available:', !!multiBackendResult);
+
+      flowLog('processHybrid', '>>> Calling verificationApi.verifyFaceTec()...');
+      const faceTecResponse = await firstValueFrom(
+        this.verificationApi.verifyFaceTec({
+          sessionId: this.verificationSessionId,
+          stepIndex: 1,
+          faceScanBlob: this.faceTecResult!.faceScan,
+          frameHash: this.gestureFrameHash
+        })
+      );
+      flowLog('processHybrid', '<<< verifyFaceTec response:', faceTecResponse);
+
+      if (!faceTecResponse) throw new Error('FaceTec verification failed');
+
+      flowLog('processHybrid', '>>> Calling verificationApi.finalize()...');
+      const finalResult = await firstValueFrom(this.verificationApi.finalize(this.verificationSessionId));
+      flowLog('processHybrid', '<<< finalize response:', finalResult);
+      if (!finalResult) throw new Error('Session finalization failed');
+
+      const uploadSessionId = multiBackendResult?.primary?.metadata?.sessionId || this.verificationSessionId;
+      const videoUrl = await this.uploadMediaToS3(uploadSessionId, primaryFrame);
+
+      clearInterval(progressInterval);
+      this.processingProgress.set(100);
+
+      flowLog('processHybrid', `Final: allPassed=${finalResult.allPassed}, confidence=${finalResult.confidence}`);
+
+      this.setResultAndNotify({
+        success: finalResult.allPassed,
+        confidence: finalResult.confidence,
+        verifiedImage: this.capturedFrames[0] || '',
+        videoBlob: this.videoBlob,
+        videoUrl,
+        multiBackendResults: multiBackendResult || undefined,
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'facetec' as LivenessBackend,
+          confidence: finalResult.confidence,
+          attemptNumber: this.attemptCount,
+          sessionId: this.verificationSessionId,
+          gestureResult: finalResult.gestureResults?.[0],
+          facetecResult: finalResult.facetecResult
+        }
+      });
+
+      this.currentStep.set('result');
+      flowLog('processHybrid', `Step set to: ${this.currentStep()}`);
+    } catch (error: unknown) {
+      clearInterval(progressInterval);
+      const err = error instanceof Error ? error : new Error(String(error));
+      flowError('processHybrid', `!!! ERROR: ${err.message}`, err);
+      this.setResultAndNotify({
+        success: false,
+        confidence: 0,
+        verifiedImage: this.capturedFrames[0] || '',
+        error: err.message || 'Hybrid verification failed',
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'facetec' as LivenessBackend,
+          confidence: 0,
+          attemptNumber: this.attemptCount
+        }
+      });
+      this.currentStep.set('result');
+      flowLog('processHybrid', `Error handled, step set to: ${this.currentStep()}`);
+    }
+  }
+
+  private async processMultiBackendVerification(): Promise<void> {
+    flowLog('processMulti', '=== PROCESSING MULTI-BACKEND VERIFICATION (no facetec) ===');
+    this.attemptCount++;
+    const primaryFrame = this.capturedFrames[0];
+
+    const progressInterval = setInterval(() => {
+      this.processingProgress.update(p => Math.min(p + 10, 90));
+    }, 200);
+
+    try {
+      flowLog('processMulti', '>>> Calling orchestrator.verifyLiveness()...');
+      const backendResponse = await new Promise<{ isLive: boolean; confidence: number }>((resolve, reject) => {
+        this.orchestrator.verifyLiveness(primaryFrame, this.videoBlob).subscribe({ next: resolve, error: reject });
+      });
+      flowLog('processMulti', '<<< verifyLiveness response:', backendResponse);
+
+      const multiBackendResult = this.orchestrator.multiBackendResult;
+      flowLog('processMulti', 'Multi-backend result available:', !!multiBackendResult);
+
+      flowLog('processMulti', '>>> Calling verificationApi.finalize()...');
+      const finalResult = await firstValueFrom(this.verificationApi.finalize(this.verificationSessionId));
+      flowLog('processMulti', '<<< finalize response:', finalResult);
+      if (!finalResult) throw new Error('Session finalization failed');
+
+      const uploadSessionId = multiBackendResult?.primary?.metadata?.sessionId || this.verificationSessionId;
+      const videoUrl = await this.uploadMediaToS3(uploadSessionId, primaryFrame);
+
+      clearInterval(progressInterval);
+      this.processingProgress.set(100);
+
+      flowLog('processMulti', `Final: allPassed=${finalResult.allPassed}, confidence=${finalResult.confidence}`);
+
+      this.setResultAndNotify({
+        success: finalResult.allPassed,
+        confidence: finalResult.confidence,
+        verifiedImage: primaryFrame,
+        videoBlob: this.videoBlob,
+        videoUrl,
+        multiBackendResults: multiBackendResult || undefined,
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'amazon',
+          confidence: finalResult.confidence,
+          attemptNumber: this.attemptCount,
+          sessionId: this.verificationSessionId,
+          gestureResult: finalResult.gestureResults?.[0]
+        }
+      });
+
+      this.currentStep.set('result');
+      flowLog('processMulti', `Step set to: ${this.currentStep()}`);
+    } catch (error: unknown) {
+      clearInterval(progressInterval);
+      const err = error instanceof Error ? error : new Error(String(error));
+      flowError('processMulti', `!!! ERROR: ${err.message}`, err);
+      this.setResultAndNotify({
+        success: false,
+        confidence: 0,
+        verifiedImage: primaryFrame || '',
+        error: err.message || 'Multi-backend verification failed',
+        metadata: {
+          timestamp: new Date().toISOString(),
+          backend: 'amazon',
+          confidence: 0,
+          attemptNumber: this.attemptCount
+        }
+      });
+      this.currentStep.set('result');
+      flowLog('processMulti', `Error handled, step set to: ${this.currentStep()}`);
+    }
+  }
+
+  onDone(): void {
+    flowLog('action', 'onDone called (manual)');
+    const r = this.result();
+    if (r) {
+      flowLog('action', 'Emitting result from onDone');
+      this.resultSubject.next(r);
+      this.verificationComplete.emit(r);
+    }
+  }
+
+  onRetry(): void {
+    flowLog('action', `onRetry called, attemptCount=${this.attemptCount}, maxRetries=${this.config?.maxRetries ?? 3}`);
+    if (this.attemptCount >= (this.config?.maxRetries ?? 3)) {
+      const r = this.result();
+      if (r) {
+        this.result.set({ ...r, error: 'Maximum retry attempts reached' });
+        this.emitResult(this.result()!);
+      }
+      return;
+    }
+    this.processingProgress.set(0);
+    this.capturedFrames = [];
+    this.result.set(null);
+
+    if (this.useAwsFaceLiveness) {
+      flowLog('action', 'Retry → restarting AWS Face Liveness directly');
+      this.startAwsLivenessDirectly();
+    } else {
+      this.currentStep.set('preview');
+      flowLog('action', `Retry → step set to: ${this.currentStep()}`);
+    }
+  }
+
+  onCancel(): void {
+    flowLog('action', 'onCancel called');
+    this.emitResult({
+      success: false,
+      confidence: 0,
+      verifiedImage: '',
+      error: 'User cancelled',
+      metadata: {
+        timestamp: new Date().toISOString(),
+        backend: 'amazon' as LivenessBackend,
+        confidence: 0,
+        attemptNumber: this.attemptCount
+      }
+    });
+  }
+
+  onAutoRetry(): void {
+    flowLog('action', 'Auto-retry triggered after countdown');
+    this.processingProgress.set(0);
+    this.capturedFrames = [];
+    this.result.set(null);
+
+    if (this.useAwsFaceLiveness) {
+      flowLog('action', 'Auto-retry → restarting AWS Face Liveness directly');
+      this.startAwsLivenessDirectly();
+    } else {
+      this.currentStep.set('preview');
+      flowLog('action', `Auto-retry → step set to: ${this.currentStep()}`);
+    }
+  }
+
+  onAutoComplete(result: LivenessResult): void {
+    flowLog('action', 'Auto-complete triggered after countdown', { success: result.success, confidence: result.confidence });
+    this.resultSubject.next(result);
+    this.verificationComplete.emit(result);
+  }
+
+  /**
+   * Upload media to S3: prefers videoBlob, falls back to base64 image frame.
+   * Returns the S3 URL or undefined if upload fails/skipped.
+   */
+  private async uploadMediaToS3(sessionId: string, primaryFrame: string): Promise<string | undefined> {
+    if (this.videoBlob) {
+      try {
+        flowLog('upload', '>>> Uploading video blob to S3...');
+        const res = await new Promise<{ videoUrl?: string }>((resolve, reject) => {
+          this.orchestrator.uploadVideoToS3(this.videoBlob!, sessionId).subscribe({ next: resolve, error: reject });
+        });
+        flowLog('upload', '<<< Video upload response:', { videoUrl: res.videoUrl });
+        return res.videoUrl;
+      } catch (err) {
+        flowWarn('upload', 'Video blob upload failed, trying image fallback', err);
+      }
+    }
+
+    if (primaryFrame) {
+      try {
+        flowLog('upload', '>>> Uploading base64 image to S3...');
+        const res = await new Promise<{ videoUrl?: string }>((resolve, reject) => {
+          this.orchestrator.uploadBase64ImageToS3(primaryFrame, sessionId).subscribe({ next: resolve, error: reject });
+        });
+        flowLog('upload', '<<< Image upload response:', { videoUrl: res.videoUrl });
+        return res.videoUrl;
+      } catch (err) {
+        flowWarn('upload', 'Image upload failed (non-blocking)', err);
+      }
+    }
+
+    return undefined;
+  }
+
+  private setResultAndNotify(r: LivenessResult): void {
+    flowLog('emit', 'Setting result (countdown will handle next action):', { success: r.success, error: r.error, confidence: r.confidence });
+    this.result.set(r);
+  }
+
+  private emitResult(r: LivenessResult): void {
+    flowLog('emit', 'Emitting result (closing flow):', { success: r.success, error: r.error, confidence: r.confidence });
+    this.resultSubject.next(r);
+    this.verificationComplete.emit(r);
+  }
+}