@richard.fadiora/liveness-detection 4.2.12 → 4.2.14

package/dist/angular/README.md

@@ -0,0 +1,294 @@
+# Liveness Detection SDK
+
+A cross-framework **liveness detection SDK** that performs randomized user challenges and verifies real-user presence via a backend anti-spoofing API. Works with **React** and **Angular** via framework-specific wrappers while the **core engine is framework-agnostic**.
+
+This version introduces:
+
+- **Headless mode** for fully custom UI  
+- Robust **challenge sequencing**  
+- **Configurable thresholds** for `Smile`, `Blink`, and `Turn_Head` challenges  
+- Sequential challenge execution with **strict timeout handling**  
+- Pause between steps for user feedback  
+- Cross-framework integration (React hook & Angular service)  
+
+---
+
+## 📌 Overview
+
+This SDK strengthens identity verification by combining:
+
+- Randomized challenge-response validation  
+- Sequential challenge execution  
+- Strict timeout enforcement  
+- Backend spoof detection  
+- Callback-based integration for easy usage  
+- Headless / fully customizable UI via render props (React)  
+- Configurable challenge thresholds  
+
+Protects against:
+
+- Presentation (photo) attacks  
+- Screen glare attacks  
+- Video replay/injection attacks  
+
+---
+
+## ⚙️ Architecture
+
+### Core Engine
+
+- `LivenessEngine` (framework-agnostic)  
+- Handles:
+  - Challenge sequence generation
+  - MediaPipe face & hand model detection
+  - Challenge validation (`Smile`, `Blink`, `Turn_Head`, `Thumbs_Up`)
+  - Face cropping
+  - Detection loop
+  - Final frame capture and backend verification
+- Can be used directly or via React/Angular wrappers
+
+### Framework Wrappers
+
+| Framework | Wrapper | Notes |
+|-----------|--------|------|
+| React     | `useLiveness` hook | Uses `webcamRef` and React state, supports render-prop customization |
+| Angular   | `LivenessService`  | Injectable service, exposes engine state and control methods. Must be imported with "@richard.fadiora/liveness-detection/angular |
+
+---
+
+## ⚙️ How It Works
+
+### 1️⃣ Challenge Initialization
+
+- Randomly selects **3 challenges** from the pool: `Smile`, `Blink`, `Turn_Head`, `Thumbs_Up`.  
+- Timer starts immediately (default **60 seconds**, configurable via `duration`).  
+- Each challenge is verified sequentially, with a brief pause between steps for feedback.  
+- If the timer expires, the session terminates and no frames are sent to the backend.
+
+### 2️⃣ Challenge Execution
+
+- Real-time validation using webcam input and MediaPipe models.  
+- Sequential verification ensures **no steps are skipped**.  
+- Developers can render custom UI via the **render prop** while using the same underlying logic.
+- Challenge thresholds are configurable through props:
+
+| Prop Name             | Default | Description                              |
+|-----------------------|---------|------------------------------------------|
+| `smileThreshold`      | 0.20    | Minimum smile width to count as valid    |
+| `blinkThreshold`      | 0.01    | Maximum eye aspect ratio to count as blink |
+| `minturnHeadThreshold`| 0.15    | Minimum yaw for right head turn detection      |
+| `maxturnHeadThreshold`| 0.85    | Maximum yaw for left head turn detection      |
+
+### 3️⃣ Backend Liveness Verification
+
+- Captures **5 frames** from the webcam after all challenges are complete.  
+- Frames sent to backend API (`apiUrl` prop).  
+- Backend performs spoof detection, glare detection, and video injection detection.
+
+---
+
+## ✅ Success & Failure Behavior
+
+### Success
+- UI (or custom component) shows success feedback.  
+- `onComplete` callback is triggered:
+```js
+onComplete({ success: true, image: frame, skinConfidence });
+```
+
+### Failure
+- UI shows failure message.  
+- `onError` callback is triggered:
+```js
+onError({ success: false, reason, skinConfidence: null });
+```
+- Component resets; user must start a new session.
+
+---
+
+## 📦 Props
+
+| Prop Name   | Type                         | Required | Description |
+|------------|-----------------------------|----------|-------------|
+| `apiUrl`   | `string`                     | Yes      | Backend endpoint used for liveness verification |
+| `onComplete` | `(result: object) => void`  | Yes      | Callback fired after verification succeeds |
+| `onError`  | `(result: object) => void`   | Yes      | Callback fired after verification fails |
+| `duration` | `number`                     | No       | Maximum time for all challenges (default: 60s) |
+| `render`   | `(sdk: object) => JSX.Element` | No      | Optional render prop for full UI customization |
+| `classNames` | `object`                   | No       | Optional CSS class names to customize default UI |
+| `smileThreshold`       | `number`     | No       | Minimum smile width for Smile challenge                  |
+| `blinkThreshold`       | `number`     | No       | Maximum eye aspect ratio for Blink challenge             |
+| `minturnHeadThreshold` | `number`     | No       | Minimum yaw for Turn_Head challenge                      |
+| `maxturnHeadThreshold` | `number`     | No       | Maximum yaw for Turn_Head challenge                      |
+
+
+---
+
+## 🧩 Usage Example
+
+### Default UI
+```jsx
+import { LivenessSDK } from "@richard.fadiora/liveness-detection";
+
+function App() {
+  return (
+    <LivenessSDK
+      apiUrl="https://your-backend-api.com/liveness-check"
+      onComplete={(result) => console.log("Success:", result)}
+      onError={(error) => console.log("Failed:", error.reason)}
+      duration={60}
+    />
+  );
+}
+
+export default App;
+```
+
+### Headless / Custom UI
+```jsx
+<LivenessSDK
+  apiUrl="https://your-backend-api.com/liveness-check"
+  onComplete={handleComplete}
+  onError={handleError}
+  render={(sdk) => (
+    <div>
+      <video ref={sdk.webcamRef} autoPlay playsInline muted />
+      <div>Step {sdk.currentStep + 1}: {sdk.sequence[sdk.currentStep]}</div>
+      <div>Time left: {sdk.timeLeft}s</div>
+      <button onClick={sdk.start}>Start</button>
+    </div>
+  )}
+/>
+```
+## 📤 Hook Return Values
+
+The `useLiveness` hook exposes the following values and control functions for managing the liveness detection session.
+
+| Name | Type | Description |
+|-----|------|-------------|
+| `webcamRef` | `ref` | React ref attached to the webcam component. Provides access to the live video stream used for face and hand detection as well as frame capture for verification. |
+| `status` | `string` | Represents the current state of the liveness session. Possible values include `loading`, `ready`, `capturing`, `verifying`, `success`, `error`, and `expired`. |
+| `errorMsg` | `string` | Contains the error message displayed when the liveness verification fails or when the system encounters an issue. |
+| `sequence` | `string[]` | The randomized sequence of liveness challenges selected for the current session. Three challenges are chosen from the challenge pool. |
+| `currentStep` | `number` | The index of the current challenge being performed within the challenge sequence. |
+| `timeLeft` | `number` | Remaining time (in seconds) before the session expires. The timer runs while the system is in the `capturing` state. |
+| `isStepTransitioning` | `boolean` | Indicates whether the system is currently transitioning between challenges. Used to briefly pause detection and provide UI feedback after a challenge is completed. |
+| `start` | `function` | Starts the liveness challenge session and begins the detection loop. |
+| `reset` | `function` | Resets the entire session, including the timer, challenge sequence, step index, and error state. |
+| `sendFinalProof` | `function` | Sends captured face frames to the backend verification API to perform the final liveness check. Normally triggered automatically after the last challenge is completed. |
+
+
+
+
+---
+
+## 🎨 Styling with `classNames`
+
+You can pass a `classNames` object to override the default UI classes:
+```js
+classNames={{
+  container: "liveness-container",
+  webcam: "liveness-webcam",
+  button: "liveness-button",
+  challenge: "liveness-challenge",
+  timer: "liveness-timer",
+  error: "liveness-error",
+  success: "liveness-success",
+}}
+```
+
+### CSS Example
+```css
+.liveness-container {
+  text-align: center;
+  background: #121212;
+  padding: 24px;
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  color: white;
+}
+.liveness-webcam {
+  border-radius: 20px;
+  border: 2px solid #007bff;
+  width: 100%;
+}
+.liveness-button {
+  padding: 12px 30px;
+  font-size: 16px;
+  font-weight: bold;
+  border-radius: 10px;
+  background: #28a745;
+  color: white;
+  border: none;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.liveness-challenge {
+  margin: 5px 0;
+  font-weight: bold;
+  font-size: 40px;
+}
+.liveness-timer {
+  margin: 10px 0;
+  font-weight: bold;
+  font-size: 18px;
+}
+.liveness-error {
+  color: #ff4d4d;
+  margin-top: 20px;
+}
+.liveness-success {
+  color: #4caf50;
+  margin-top: 20px;
+}
+```
+
+---
+
+## ⏳ Timeout Rules
+
+- Maximum session duration: set via `duration` prop (default 60s).  
+- On timeout: challenge stops, state resets, backend verification is not triggered.
+
+---
+
+## 🔐 Security Architecture
+
+- **Client-side**: Randomized challenges, real-time gesture detection  
+- **Server-side**: Frame-based spoof analysis, glare detection, video injection detection  
+- **Session control**: Timeout enforcement, manual restart on failure  
+- Reduces false positives and prevents replay attacks.
+
+---
+
+## 📊 Verification Criteria
+
+- All 3 challenges completed  
+- All 5 frames successfully sent to backend  
+- Backend confirms: no spoofing, no glare, human skin texture, no video injection
+
+---
+
+## 🏗️ Integration Notes
+
+- Webcam permissions required  
+- Backend must accept 5 frames in expected format  
+- `apiUrl` must be reachable and have an endpoint `/v1/verify` 
+- CORS must be configured properly
+
+---
+
+## 🚀 Ideal Use Cases
+
+- KYC verification flows  
+- Identity onboarding  
+- Account recovery  
+- Secure login  
+- Financial / compliance apps
+
+---
+
+## 👨‍💻 Maintainer
+
+Fadiora Richard.
+

package/dist/angular/fesm2022/richard.fadiora-liveness-detection.mjs

@@ -0,0 +1,440 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, ViewChild, Component } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { FilesetResolver, FaceLandmarker, HandLandmarker } from '@mediapipe/tasks-vision';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+// src/core/LivenessEngine.ts
+class LivenessEngine {
+    config;
+    models = { face: null, hand: null };
+    webcam = null;
+    state;
+    currentStepRef = 0;
+    isStepTransitioningRef = false;
+    timerId = null;
+    requestId = null;
+    offscreenCanvas = document.createElement("canvas");
+    CHALLENGE_POOL = ["Smile", "Blink", "Turn_Head", "Thumbs_Up"];
+    constructor(config) {
+        this.config = {
+            apiUrl: config.apiUrl,
+            duration: config.duration ?? 60,
+            smileThreshold: config.smileThreshold ?? 0.2,
+            blinkThreshold: config.blinkThreshold ?? 0.012,
+            minturnHeadThreshold: config.minturnHeadThreshold ?? 0.15,
+            maxturnHeadThreshold: config.maxturnHeadThreshold ?? 0.85,
+            onStateChange: config.onStateChange || (() => { }),
+            onComplete: config.onComplete || (() => { }),
+            onError: config.onError || (() => { }),
+        };
+        this.state = {
+            status: "loading",
+            sequence: [],
+            currentStep: 0,
+            timeLeft: this.config.duration,
+            isStepTransitioning: false,
+            errorMsg: "",
+        };
+        this.offscreenCanvas.width = 224;
+        this.offscreenCanvas.height = 224;
+    }
+    /**
+     * Phase 1: Load AI Assets (Call this immediately on mount)
+     */
+    async loadModels() {
+        console.log("[LivenessEngine] Loading AI Models...");
+        try {
+            const vision = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm");
+            this.models.face = await FaceLandmarker.createFromOptions(vision, {
+                baseOptions: {
+                    modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",
+                    delegate: "GPU",
+                },
+                outputFaceBlendshapes: true,
+                runningMode: "VIDEO",
+            });
+            this.models.hand = await HandLandmarker.createFromOptions(vision, {
+                baseOptions: {
+                    modelAssetPath: "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task",
+                    delegate: "GPU",
+                },
+                runningMode: "VIDEO",
+                numHands: 1,
+            });
+            this.generateSequence();
+            // Stay in 'loading' or move to a 'ready_to_mount' status if you prefer
+            // For now, we move to ready to signal the UI can show the camera
+            this.updateState({ status: "ready" });
+            console.log("[LivenessEngine] Models Loaded.");
+        }
+        catch (err) {
+            console.error("[LivenessEngine] Init Error:", err);
+            this.updateState({ status: "error", errorMsg: "Failed to load security assets." });
+        }
+    }
+    /**
+     * Phase 2: Attach Video (Call this once the Webcam is in the DOM)
+     */
+    attachVideo = (video) => {
+        this.webcam = video;
+        console.log("[LivenessEngine] Video stream attached.");
+    };
+    start = () => {
+        if (this.state.status !== "ready" || !this.webcam) {
+            console.warn("[LivenessEngine] Engine not ready or video missing.");
+            return;
+        }
+        console.log("[LivenessEngine] Session Starting...");
+        this.state.status = "capturing"; // Sync internal status immediately
+        this.updateState({ status: "capturing" });
+        this.startTimer();
+        this.detectLoop();
+    };
+    stop = () => {
+        if (this.timerId)
+            clearInterval(this.timerId);
+        if (this.requestId)
+            cancelAnimationFrame(this.requestId);
+        this.timerId = null;
+        this.requestId = null;
+    };
+    reset = () => {
+        this.stop();
+        this.currentStepRef = 0;
+        this.isStepTransitioningRef = false;
+        this.generateSequence();
+        this.updateState({
+            status: "ready",
+            currentStep: 0,
+            timeLeft: this.config.duration,
+            isStepTransitioning: false,
+            errorMsg: "",
+        });
+    };
+    updateState(newState) {
+        this.state = { ...this.state, ...newState };
+        this.config.onStateChange(this.state);
+    }
+    generateSequence() {
+        const seq = [...this.CHALLENGE_POOL].sort(() => 0.5 - Math.random()).slice(0, 3);
+        this.state.sequence = seq;
+        return seq;
+    }
+    startTimer() {
+        if (this.timerId)
+            clearInterval(this.timerId);
+        this.timerId = setInterval(() => {
+            if (this.state.timeLeft > 0) {
+                this.updateState({ timeLeft: this.state.timeLeft - 1 });
+            }
+            else {
+                this.stop();
+                this.updateState({ status: "expired" });
+            }
+        }, 1000);
+    }
+    detectLoop = () => {
+        if (this.state.status !== "capturing" || !this.webcam || !this.models.face)
+            return;
+        const now = performance.now();
+        try {
+            const faceRes = this.models.face.detectForVideo(this.webcam, now);
+            const handRes = this.models.hand?.detectForVideo(this.webcam, now);
+            const currentChallenge = this.state.sequence[this.currentStepRef];
+            if (this.checkAction(faceRes, handRes, currentChallenge)) {
+                this.handleStepSuccess();
+                return; // handleStepSuccess schedules the next frame after a delay
+            }
+        }
+        catch (err) {
+            console.error("[LivenessEngine] Loop detection error:", err);
+        }
+        this.requestId = requestAnimationFrame(this.detectLoop);
+    };
+    handleStepSuccess() {
+        if (this.isStepTransitioningRef)
+            return;
+        this.isStepTransitioningRef = true;
+        this.updateState({ isStepTransitioning: true });
+        setTimeout(() => {
+            if (this.currentStepRef < this.state.sequence.length - 1) {
+                this.currentStepRef++;
+                this.isStepTransitioningRef = false;
+                this.updateState({
+                    currentStep: this.currentStepRef,
+                    isStepTransitioning: false,
+                });
+                this.requestId = requestAnimationFrame(this.detectLoop);
+            }
+            else {
+                this.sendFinalProof();
+            }
+        }, 1500);
+    }
+    checkAction(faceRes, handRes, challenge) {
+        if (this.isStepTransitioningRef)
+            return false;
+        if (challenge === "Thumbs_Up" && handRes?.landmarks?.length > 0) {
+            const l = handRes.landmarks[0];
+            return l[4].y < l[2].y && [8, 12, 16, 20].every(i => l[i].y > l[i - 2].y);
+        }
+        if (faceRes?.faceLandmarks?.length > 0) {
+            const lms = faceRes.faceLandmarks[0];
+            switch (challenge) {
+                case "Smile":
+                    return (lms[291].x - lms[61].x) > this.config.smileThreshold;
+                case "Blink":
+                    const leftEar = Math.abs(lms[159].y - lms[145].y);
+                    const rightEar = Math.abs(lms[386].y - lms[374].y);
+                    return ((leftEar + rightEar) / 2) < this.config.blinkThreshold;
+                case "Turn_Head":
+                    const yaw = (lms[1].x - lms[33].x) / (lms[263].x - lms[33].x);
+                    return yaw < this.config.minturnHeadThreshold || yaw > this.config.maxturnHeadThreshold;
+                default: return false;
+            }
+        }
+        return false;
+    }
+    async sendFinalProof() {
+        this.stop();
+        this.updateState({ status: "verifying" });
+        try {
+            const blobs = [];
+            let finalBase64 = "";
+            for (let i = 0; i < 5; i++) {
+                if (!this.webcam)
+                    break;
+                const faceRes = this.models.face?.detectForVideo(this.webcam, performance.now());
+                if (faceRes?.faceLandmarks?.[0]) {
+                    const canvas = this.getFaceCrop(this.webcam, faceRes.faceLandmarks[0]);
+                    const blob = await new Promise(res => canvas.toBlob(res, "image/jpeg", 0.9));
+                    if (blob)
+                        blobs.push(blob);
+                    if (i === 4)
+                        finalBase64 = canvas.toDataURL("image/jpeg");
+                }
+                await new Promise(r => setTimeout(r, 100));
+            }
+            const { verifyLiveness } = await Promise.resolve().then(function () { return api; });
+            const result = await verifyLiveness(this.config.apiUrl, blobs, this.state.sequence);
+            if (result.is_live) {
+                this.updateState({ status: "success" });
+                this.config.onComplete({ success: true, image: finalBase64, skinConfidence: result.skin_confidence });
+            }
+            else {
+                const reason = result.reason || "Liveness check failed";
+                this.updateState({ status: "error", errorMsg: reason });
+                this.config.onError({ success: false, reason });
+            }
+        }
+        catch (err) {
+            this.updateState({ status: "error", errorMsg: "Verification failed." });
+            this.config.onError({ success: false, reason: "Network error" });
+        }
+    }
+    getFaceCrop(video, landmarks) {
+        const ctx = this.offscreenCanvas.getContext("2d");
+        const xs = landmarks.map(l => l.x * video.videoWidth);
+        const ys = landmarks.map(l => l.y * video.videoHeight);
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const minY = Math.min(...ys);
+        const maxY = Math.max(...ys);
+        const width = maxX - minX;
+        const height = maxY - minY;
+        const margin = width * 0.3;
+        ctx.clearRect(0, 0, 224, 224);
+        ctx.drawImage(video, minX - margin, minY - margin, width + margin * 2, height + margin * 2, 0, 0, 224, 224);
+        return this.offscreenCanvas;
+    }
+}
+
+class LivenessService {
+    ngZone;
+    engine;
+    stateSubject = new BehaviorSubject(null);
+    // Components will subscribe to this
+    state$ = this.stateSubject.asObservable();
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+    }
+    init(config) {
+        // Run inside runOutsideAngular to prevent 60fps change detection triggers
+        this.ngZone.runOutsideAngular(() => {
+            this.engine = new LivenessEngine({
+                ...config,
+                onStateChange: (state) => {
+                    // Bring state changes BACK into the zone so the UI updates
+                    this.ngZone.run(() => this.stateSubject.next(state));
+                }
+            });
+            this.engine.loadModels();
+        });
+    }
+    attach(video) {
+        this.engine?.attachVideo(video);
+    }
+    start() {
+        this.engine?.start();
+    }
+    reset() {
+        this.engine?.reset();
+    }
+    ngOnDestroy() {
+        this.engine?.stop();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: LivenessService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: LivenessService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: LivenessService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
+
+class LivenessComponent {
+    liveness;
+    webcamRef;
+    // --- Logic Configuration ---
+    apiUrl;
+    duration = 60;
+    smileThreshold;
+    blinkThreshold;
+    minturnHeadThreshold;
+    maxturnHeadThreshold;
+    // --- Styling Configuration (Class Names) ---
+    containerClass = '';
+    videoWrapperClass = '';
+    videoClass = '';
+    timerClass = '';
+    challengeTextClass = '';
+    buttonClass = '';
+    retryButtonClass = '';
+    statusOverlayClass = '';
+    successMessageClass = '';
+    errorMessageClass = '';
+    instructionBoxClass = '';
+    onComplete = new EventEmitter();
+    onError = new EventEmitter();
+    constructor(liveness) {
+        this.liveness = liveness;
+    }
+    ngOnInit() {
+        // Pass the custom thresholds directly to the service
+        this.liveness.init({
+            apiUrl: this.apiUrl,
+            duration: this.duration,
+            smileThreshold: this.smileThreshold,
+            blinkThreshold: this.blinkThreshold,
+            minturnHeadThreshold: this.minturnHeadThreshold,
+            maxturnHeadThreshold: this.maxturnHeadThreshold,
+            onComplete: (res) => this.onComplete.emit(res),
+            onError: (err) => this.onError.emit(err)
+        });
+    }
+    async ngAfterViewInit() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: { width: 640, height: 480, facingMode: 'user' }
+            });
+            const video = this.webcamRef.nativeElement;
+            video.srcObject = stream;
+            video.onloadedmetadata = () => {
+                video.play();
+                this.liveness.attach(video);
+            };
+        }
+        catch (e) {
+            this.onError.emit({ success: false, reason: 'Camera access denied' });
+        }
+    }
+    ngOnDestroy() {
+        const stream = this.webcamRef?.nativeElement?.srcObject;
+        stream?.getTracks().forEach(track => track.stop());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: LivenessComponent, deps: [{ token: LivenessService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.3", type: LivenessComponent, isStandalone: true, selector: "LivenessCheck", inputs: { apiUrl: "apiUrl", duration: "duration", smileThreshold: "smileThreshold", blinkThreshold: "blinkThreshold", minturnHeadThreshold: "minturnHeadThreshold", maxturnHeadThreshold: "maxturnHeadThreshold", containerClass: "containerClass", videoWrapperClass: "videoWrapperClass", videoClass: "videoClass", timerClass: "timerClass", challengeTextClass: "challengeTextClass", buttonClass: "buttonClass", retryButtonClass: "retryButtonClass", statusOverlayClass: "statusOverlayClass", successMessageClass: "successMessageClass", errorMessageClass: "errorMessageClass", instructionBoxClass: "instructionBoxClass" }, outputs: { onComplete: "onComplete", onError: "onError" }, viewQueries: [{ propertyName: "webcamRef", first: true, predicate: ["webcam"], descendants: true }], ngImport: i0, template: "<div class=\"liveness-sdk-container\" [ngClass]=\"containerClass\">\r\n  <div class=\"video-window\" [ngClass]=\"videoWrapperClass\">\r\n    <video #webcam \r\n           autoplay \r\n           playsinline \r\n           muted \r\n           [ngClass]=\"videoClass\" \r\n           style=\"transform: scaleX(-1);\">\r\n    </video>\r\n\r\n    <ng-container *ngIf=\"(liveness.state$ | async) as state\">\r\n      <div class=\"status-overlay\" [ngClass]=\"statusOverlayClass\">\r\n        \r\n        <div class=\"instruction-box\">\r\n          <h2 class=\"status-text\">{{ state.status | uppercase }}</h2>\r\n          \r\n          <p *ngIf=\"state.status === 'capturing'\" \r\n             class=\"challenge-text\" \r\n             [ngClass]=\"challengeTextClass\">\r\n             Challenge: {{ state.sequence[state.currentStep] }}\r\n          </p>\r\n\r\n          <p *ngIf=\"state.status === 'success'\" \r\n             class=\"success-msg\" \r\n             [ngClass]=\"successMessageClass\">\r\n             Verification Successful!\r\n          </p>\r\n          \r\n          <p *ngIf=\"state.status === 'error' || state.status === 'expired'\" \r\n             class=\"error-msg\" \r\n             [ngClass]=\"errorMessageClass\">\r\n             {{ state.errorMsg || 'Verification failed. Please try again.' }}\r\n          </p>\r\n        </div>\r\n\r\n        <div *ngIf=\"state.status === 'capturing'\" \r\n             class=\"timer-ring\" \r\n             [ngClass]=\"timerClass\">\r\n          {{ state.timeLeft }}s\r\n        </div>\r\n\r\n        <div class=\"action-area\">\r\n          <button *ngIf=\"state.status === 'ready'\" \r\n                  (click)=\"liveness.start()\" \r\n                  class=\"btn-start\" \r\n                  [ngClass]=\"buttonClass\">\r\n            Start Verification\r\n          </button>\r\n          \r\n          <button *ngIf=\"state.status === 'error' || state.status === 'expired'\" \r\n                  (click)=\"liveness.reset()\" \r\n                  class=\"btn-retry\"\r\n                  [ngClass]=\"retryButtonClass\">\r\n            Try Again\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>", styles: [".liveness-wrapper{position:relative;max-width:500px;margin:auto;font-family:sans-serif;color:#fff}.video-container{position:relative;width:100%;aspect-ratio:3/4;background:#000;border-radius:20px;overflow:hidden}video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.challenge-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px;background:#0003}.instruction-box h2{font-size:2.5rem;text-shadow:0 2px 10px rgba(0,0,0,.5);margin-top:0}.timer{font-size:1.5rem;background:#00000080;padding:5px 15px;border-radius:20px}.btn-start{padding:15px 40px;font-size:1.2rem;background:#28a745;color:#fff;border:none;border-radius:50px;cursor:pointer;transition:transform .2s}.btn-start:hover{transform:scale(1.05)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.3", ngImport: i0, type: LivenessComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'LivenessCheck', standalone: true, imports: [CommonModule], template: "<div class=\"liveness-sdk-container\" [ngClass]=\"containerClass\">\r\n  <div class=\"video-window\" [ngClass]=\"videoWrapperClass\">\r\n    <video #webcam \r\n           autoplay \r\n           playsinline \r\n           muted \r\n           [ngClass]=\"videoClass\" \r\n           style=\"transform: scaleX(-1);\">\r\n    </video>\r\n\r\n    <ng-container *ngIf=\"(liveness.state$ | async) as state\">\r\n      <div class=\"status-overlay\" [ngClass]=\"statusOverlayClass\">\r\n        \r\n        <div class=\"instruction-box\">\r\n          <h2 class=\"status-text\">{{ state.status | uppercase }}</h2>\r\n          \r\n          <p *ngIf=\"state.status === 'capturing'\" \r\n             class=\"challenge-text\" \r\n             [ngClass]=\"challengeTextClass\">\r\n             Challenge: {{ state.sequence[state.currentStep] }}\r\n          </p>\r\n\r\n          <p *ngIf=\"state.status === 'success'\" \r\n             class=\"success-msg\" \r\n             [ngClass]=\"successMessageClass\">\r\n             Verification Successful!\r\n          </p>\r\n          \r\n          <p *ngIf=\"state.status === 'error' || state.status === 'expired'\" \r\n             class=\"error-msg\" \r\n             [ngClass]=\"errorMessageClass\">\r\n             {{ state.errorMsg || 'Verification failed. Please try again.' }}\r\n          </p>\r\n        </div>\r\n\r\n        <div *ngIf=\"state.status === 'capturing'\" \r\n             class=\"timer-ring\" \r\n             [ngClass]=\"timerClass\">\r\n          {{ state.timeLeft }}s\r\n        </div>\r\n\r\n        <div class=\"action-area\">\r\n          <button *ngIf=\"state.status === 'ready'\" \r\n                  (click)=\"liveness.start()\" \r\n                  class=\"btn-start\" \r\n                  [ngClass]=\"buttonClass\">\r\n            Start Verification\r\n          </button>\r\n          \r\n          <button *ngIf=\"state.status === 'error' || state.status === 'expired'\" \r\n                  (click)=\"liveness.reset()\" \r\n                  class=\"btn-retry\"\r\n                  [ngClass]=\"retryButtonClass\">\r\n            Try Again\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>", styles: [".liveness-wrapper{position:relative;max-width:500px;margin:auto;font-family:sans-serif;color:#fff}.video-container{position:relative;width:100%;aspect-ratio:3/4;background:#000;border-radius:20px;overflow:hidden}video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.challenge-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px;background:#0003}.instruction-box h2{font-size:2.5rem;text-shadow:0 2px 10px rgba(0,0,0,.5);margin-top:0}.timer{font-size:1.5rem;background:#00000080;padding:5px 15px;border-radius:20px}.btn-start{padding:15px 40px;font-size:1.2rem;background:#28a745;color:#fff;border:none;border-radius:50px;cursor:pointer;transition:transform .2s}.btn-start:hover{transform:scale(1.05)}\n"] }]
+        }], ctorParameters: () => [{ type: LivenessService }], propDecorators: { webcamRef: [{
+                type: ViewChild,
+                args: ['webcam']
+            }], apiUrl: [{
+                type: Input
+            }], duration: [{
+                type: Input
+            }], smileThreshold: [{
+                type: Input
+            }], blinkThreshold: [{
+                type: Input
+            }], minturnHeadThreshold: [{
+                type: Input
+            }], maxturnHeadThreshold: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], videoWrapperClass: [{
+                type: Input
+            }], videoClass: [{
+                type: Input
+            }], timerClass: [{
+                type: Input
+            }], challengeTextClass: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], retryButtonClass: [{
+                type: Input
+            }], statusOverlayClass: [{
+                type: Input
+            }], successMessageClass: [{
+                type: Input
+            }], errorMessageClass: [{
+                type: Input
+            }], instructionBoxClass: [{
+                type: Input
+            }], onComplete: [{
+                type: Output
+            }], onError: [{
+                type: Output
+            }] } });
+
+// src/api.ts
+/**
+ * Sends captured frames to the backend API for liveness verification.
+ * @param apiUrl - Base URL of the liveness backend
+ * @param frameBlobs - Array of Blob objects representing captured frames
+ * @param challenge - The current challenge string
+ * @returns LivenessResponse from backend
+ */
+const verifyLiveness = async (apiUrl, frameBlobs, challenge) => {
+    const formData = new FormData();
+    frameBlobs.forEach((blob, i) => {
+        formData.append('files', blob, `frame_${i}.jpg`);
+    });
+    formData.append('challenge', JSON.stringify(challenge));
+    const response = await fetch(`${apiUrl}/v1/verify`, {
+        method: 'POST',
+        body: formData,
+    });
+    if (!response.ok) {
+        throw new Error("Network response was not ok");
+    }
+    const data = await response.json();
+    return data;
+};
+
+var api = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    verifyLiveness: verifyLiveness
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LivenessComponent, LivenessEngine, LivenessService, verifyLiveness };
+//# sourceMappingURL=richard.fadiora-liveness-detection.mjs.map

package/dist/angular/fesm2022/richard.fadiora-liveness-detection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"richard.fadiora-liveness-detection.mjs","sources":["../../../src/core/LivenessEngine.ts","../../../src/angular/liveness.service.ts","../../../src/angular/liveness.component.ts","../../../src/angular/liveness.component.html","../../../src/api.ts","../../../src/richard.fadiora-liveness-detection.ts"],"sourcesContent":["// src/core/LivenessEngine.ts\r\nimport { FaceLandmarker, HandLandmarker, FilesetResolver, NormalizedLandmark } from \"@mediapipe/tasks-vision\";\r\n\r\nexport type Challenge = \"Smile\" | \"Blink\" | \"Turn_Head\" | \"Thumbs_Up\";\r\n\r\nexport interface LivenessSDKResult {\r\n  success: boolean;\r\n  image?: string;\r\n  reason?: string;\r\n  skinConfidence?: number;\r\n}\r\n\r\nexport interface LivenessState {\r\n  status: \"loading\" | \"ready\" | \"capturing\" | \"verifying\" | \"success\" | \"error\" | \"expired\";\r\n  sequence: Challenge[];\r\n  currentStep: number;\r\n  timeLeft: number;\r\n  isStepTransitioning: boolean;\r\n  errorMsg: string;\r\n}\r\n\r\nexport interface LivenessEngineConfig {\r\n  apiUrl: string;\r\n  duration?: number;\r\n  smileThreshold?: number;\r\n  blinkThreshold?: number;\r\n  minturnHeadThreshold?: number;\r\n  maxturnHeadThreshold?: number;\r\n  onStateChange?: (state: LivenessState) => void;\r\n  onComplete?: (result: LivenessSDKResult) => void;\r\n  onError?: (error: LivenessSDKResult) => void;\r\n}\r\n\r\nexport class LivenessEngine {\r\n  private config: Required<LivenessEngineConfig>;\r\n  private models: { face: FaceLandmarker | null; hand: HandLandmarker | null } = { face: null, hand: null };\r\n  private webcam: HTMLVideoElement | null = null;\r\n  private state: LivenessState;\r\n  \r\n  private currentStepRef = 0;\r\n  private isStepTransitioningRef = false;\r\n  private timerId: ReturnType<typeof setInterval> | null = null;\r\n  private requestId: number | null = null;\r\n  \r\n  private offscreenCanvas = document.createElement(\"canvas\");\r\n  private CHALLENGE_POOL: Challenge[] = [\"Smile\", \"Blink\", \"Turn_Head\", \"Thumbs_Up\"];\r\n\r\n  constructor(config: LivenessEngineConfig) {\r\n    this.config = {\r\n      apiUrl: config.apiUrl,\r\n      duration: config.duration ?? 60,\r\n      smileThreshold: config.smileThreshold ?? 0.2,\r\n      blinkThreshold: config.blinkThreshold ?? 0.012,\r\n      minturnHeadThreshold: config.minturnHeadThreshold ?? 0.15,\r\n      maxturnHeadThreshold: config.maxturnHeadThreshold ?? 0.85,\r\n      onStateChange: config.onStateChange || (() => {}),\r\n      onComplete: config.onComplete || (() => {}),\r\n      onError: config.onError || (() => {}),\r\n    };\r\n\r\n    this.state = {\r\n      status: \"loading\",\r\n      sequence: [],\r\n      currentStep: 0,\r\n      timeLeft: this.config.duration,\r\n      isStepTransitioning: false,\r\n      errorMsg: \"\",\r\n    };\r\n    \r\n    this.offscreenCanvas.width = 224;\r\n    this.offscreenCanvas.height = 224;\r\n  }\r\n\r\n  /**\r\n   * Phase 1: Load AI Assets (Call this immediately on mount)\r\n   */\r\n  public async loadModels() {\r\n    console.log(\"[LivenessEngine] Loading AI Models...\");\r\n    try {\r\n      const vision = await FilesetResolver.forVisionTasks(\r\n        \"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.3/wasm\"\r\n      );\r\n\r\n      this.models.face = await FaceLandmarker.createFromOptions(vision, {\r\n        baseOptions: {\r\n          modelAssetPath: \"https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task\",\r\n          delegate: \"GPU\",\r\n        },\r\n        outputFaceBlendshapes: true,\r\n        runningMode: \"VIDEO\",\r\n      });\r\n\r\n      this.models.hand = await HandLandmarker.createFromOptions(vision, {\r\n        baseOptions: {\r\n          modelAssetPath: \"https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task\",\r\n          delegate: \"GPU\",\r\n        },\r\n        runningMode: \"VIDEO\",\r\n        numHands: 1,\r\n      });\r\n\r\n      this.generateSequence();\r\n      // Stay in 'loading' or move to a 'ready_to_mount' status if you prefer\r\n      // For now, we move to ready to signal the UI can show the camera\r\n      this.updateState({ status: \"ready\" });\r\n      console.log(\"[LivenessEngine] Models Loaded.\");\r\n    } catch (err) {\r\n      console.error(\"[LivenessEngine] Init Error:\", err);\r\n      this.updateState({ status: \"error\", errorMsg: \"Failed to load security assets.\" });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Phase 2: Attach Video (Call this once the Webcam is in the DOM)\r\n   */\r\n  public attachVideo = (video: HTMLVideoElement) => {\r\n    this.webcam = video;\r\n    console.log(\"[LivenessEngine] Video stream attached.\");\r\n  };\r\n\r\n  public start = () => {\r\n    if (this.state.status !== \"ready\" || !this.webcam) {\r\n      console.warn(\"[LivenessEngine] Engine not ready or video missing.\");\r\n      return;\r\n    }\r\n\r\n    console.log(\"[LivenessEngine] Session Starting...\");\r\n    this.state.status = \"capturing\"; // Sync internal status immediately\r\n    this.updateState({ status: \"capturing\" });\r\n    this.startTimer();\r\n    this.detectLoop();\r\n  };\r\n\r\n  public stop = () => {\r\n    if (this.timerId) clearInterval(this.timerId);\r\n    if (this.requestId) cancelAnimationFrame(this.requestId);\r\n    this.timerId = null;\r\n    this.requestId = null;\r\n  };\r\n\r\n  public reset = () => {\r\n    this.stop();\r\n    this.currentStepRef = 0;\r\n    this.isStepTransitioningRef = false;\r\n    this.generateSequence();\r\n    this.updateState({\r\n      status: \"ready\",\r\n      currentStep: 0,\r\n      timeLeft: this.config.duration,\r\n      isStepTransitioning: false,\r\n      errorMsg: \"\",\r\n    });\r\n  };\r\n\r\n  private updateState(newState: Partial<LivenessState>) {\r\n    this.state = { ...this.state, ...newState };\r\n    this.config.onStateChange(this.state);\r\n  }\r\n\r\n  private generateSequence(): Challenge[] {\r\n    const seq = [...this.CHALLENGE_POOL].sort(() => 0.5 - Math.random()).slice(0, 3);\r\n    this.state.sequence = seq;\r\n    return seq;\r\n  }\r\n\r\n  private startTimer() {\r\n    if (this.timerId) clearInterval(this.timerId);\r\n    this.timerId = setInterval(() => {\r\n      if (this.state.timeLeft > 0) {\r\n        this.updateState({ timeLeft: this.state.timeLeft - 1 });\r\n      } else {\r\n        this.stop();\r\n        this.updateState({ status: \"expired\" });\r\n      }\r\n    }, 1000);\r\n  }\r\n\r\n  private detectLoop = () => {\r\n    if (this.state.status !== \"capturing\" || !this.webcam || !this.models.face) return;\r\n\r\n    const now = performance.now();\r\n    try {\r\n      const faceRes = this.models.face.detectForVideo(this.webcam, now);\r\n      const handRes = this.models.hand?.detectForVideo(this.webcam, now);\r\n\r\n      const currentChallenge = this.state.sequence[this.currentStepRef];\r\n\r\n      if (this.checkAction(faceRes, handRes, currentChallenge)) {\r\n        this.handleStepSuccess();\r\n        return; // handleStepSuccess schedules the next frame after a delay\r\n      }\r\n    } catch (err) {\r\n      console.error(\"[LivenessEngine] Loop detection error:\", err);\r\n    }\r\n\r\n    this.requestId = requestAnimationFrame(this.detectLoop);\r\n  };\r\n\r\n  private handleStepSuccess() {\r\n    if (this.isStepTransitioningRef) return;\r\n    \r\n    this.isStepTransitioningRef = true;\r\n    this.updateState({ isStepTransitioning: true });\r\n\r\n    setTimeout(() => {\r\n      if (this.currentStepRef < this.state.sequence.length - 1) {\r\n        this.currentStepRef++;\r\n        this.isStepTransitioningRef = false;\r\n        this.updateState({\r\n          currentStep: this.currentStepRef,\r\n          isStepTransitioning: false,\r\n        });\r\n        this.requestId = requestAnimationFrame(this.detectLoop);\r\n      } else {\r\n        this.sendFinalProof();\r\n      }\r\n    }, 1500);\r\n  }\r\n\r\n  private checkAction(faceRes: any, handRes: any, challenge: Challenge): boolean {\r\n    if (this.isStepTransitioningRef) return false;\r\n\r\n    if (challenge === \"Thumbs_Up\" && handRes?.landmarks?.length > 0) {\r\n      const l = handRes.landmarks[0];\r\n      return l[4].y < l[2].y && [8, 12, 16, 20].every(i => l[i].y > l[i - 2].y);\r\n    }\r\n\r\n    if (faceRes?.faceLandmarks?.length > 0) {\r\n      const lms: NormalizedLandmark[] = faceRes.faceLandmarks[0];\r\n      switch (challenge) {\r\n        case \"Smile\":\r\n          return (lms[291].x - lms[61].x) > this.config.smileThreshold;\r\n        case \"Blink\":\r\n          const leftEar = Math.abs(lms[159].y - lms[145].y);\r\n          const rightEar = Math.abs(lms[386].y - lms[374].y);\r\n          return ((leftEar + rightEar) / 2) < this.config.blinkThreshold;\r\n        case \"Turn_Head\":\r\n          const yaw = (lms[1].x - lms[33].x) / (lms[263].x - lms[33].x);\r\n          return yaw < this.config.minturnHeadThreshold || yaw > this.config.maxturnHeadThreshold;\r\n        default: return false;\r\n      }\r\n    }\r\n    return false;\r\n  }\r\n\r\n  private async sendFinalProof() {\r\n    this.stop();\r\n    this.updateState({ status: \"verifying\" });\r\n\r\n    try {\r\n      const blobs: Blob[] = [];\r\n      let finalBase64 = \"\";\r\n\r\n      for (let i = 0; i < 5; i++) {\r\n        if (!this.webcam) break;\r\n        const faceRes = this.models.face?.detectForVideo(this.webcam, performance.now());\r\n        if (faceRes?.faceLandmarks?.[0]) {\r\n          const canvas = this.getFaceCrop(this.webcam, faceRes.faceLandmarks[0]);\r\n          const blob = await new Promise<Blob | null>(res => canvas.toBlob(res, \"image/jpeg\", 0.9));\r\n          if (blob) blobs.push(blob);\r\n          if (i === 4) finalBase64 = canvas.toDataURL(\"image/jpeg\");\r\n        }\r\n        await new Promise(r => setTimeout(r, 100));\r\n      }\r\n\r\n      const { verifyLiveness } = await import(\"../api\");\r\n      const result = await verifyLiveness(this.config.apiUrl, blobs, this.state.sequence);\r\n\r\n      if (result.is_live) {\r\n        this.updateState({ status: \"success\" });\r\n        this.config.onComplete({ success: true, image: finalBase64, skinConfidence: result.skin_confidence });\r\n      } else {\r\n        const reason = result.reason || \"Liveness check failed\";\r\n        this.updateState({ status: \"error\", errorMsg: reason });\r\n        this.config.onError({ success: false, reason });\r\n      }\r\n    } catch (err) {\r\n      this.updateState({ status: \"error\", errorMsg: \"Verification failed.\" });\r\n      this.config.onError({ success: false, reason: \"Network error\" });\r\n    }\r\n  }\r\n\r\n  private getFaceCrop(video: HTMLVideoElement, landmarks: NormalizedLandmark[]): HTMLCanvasElement {\r\n    const ctx = this.offscreenCanvas.getContext(\"2d\")!;\r\n    const xs = landmarks.map(l => l.x * video.videoWidth);\r\n    const ys = landmarks.map(l => l.y * video.videoHeight);\r\n    \r\n    const minX = Math.min(...xs);\r\n    const maxX = Math.max(...xs);\r\n    const minY = Math.min(...ys);\r\n    const maxY = Math.max(...ys);\r\n    \r\n    const width = maxX - minX;\r\n    const height = maxY - minY;\r\n    const margin = width * 0.3;\r\n\r\n    ctx.clearRect(0, 0, 224, 224);\r\n    ctx.drawImage(\r\n      video,\r\n      minX - margin, minY - margin, \r\n      width + margin * 2, height + margin * 2,\r\n      0, 0, 224, 224\r\n    );\r\n\r\n    return this.offscreenCanvas;\r\n  }\r\n}","import { Injectable, NgZone, OnDestroy } from '@angular/core';\r\nimport { BehaviorSubject, Observable } from 'rxjs';\r\nimport { LivenessEngine, LivenessState, LivenessEngineConfig } from '../core/LivenessEngine';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class LivenessService implements OnDestroy {\r\n  private engine!: LivenessEngine;\r\n  private stateSubject = new BehaviorSubject<LivenessState | null>(null);\r\n  \r\n  // Components will subscribe to this\r\n  public state$: Observable<LivenessState | null> = this.stateSubject.asObservable();\r\n\r\n  constructor(private ngZone: NgZone) {}\r\n\r\n  public init(config: LivenessEngineConfig) {\r\n    // Run inside runOutsideAngular to prevent 60fps change detection triggers\r\n    this.ngZone.runOutsideAngular(() => {\r\n      this.engine = new LivenessEngine({\r\n        ...config,\r\n        onStateChange: (state) => {\r\n          // Bring state changes BACK into the zone so the UI updates\r\n          this.ngZone.run(() => this.stateSubject.next(state));\r\n        }\r\n      });\r\n      this.engine.loadModels();\r\n    });\r\n  }\r\n\r\n  public attach(video: HTMLVideoElement) {\r\n    this.engine?.attachVideo(video);\r\n  }\r\n\r\n  public start() {\r\n    this.engine?.start();\r\n  }\r\n\r\n  public reset() {\r\n    this.engine?.reset();\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.engine?.stop();\r\n  }\r\n}","import { Component, ElementRef, ViewChild, AfterViewInit, Input, Output, EventEmitter, OnDestroy, OnInit } from '@angular/core';\r\nimport { LivenessService } from './liveness.service';\r\nimport { LivenessSDKResult, Challenge } from '../core/LivenessEngine';\r\nimport { CommonModule } from '@angular/common'\r\n\r\n@Component({\r\n  selector: 'LivenessCheck',\r\n  standalone: true, // Make it standalone\r\n  imports: [CommonModule], // Add CommonModule here to fix NG8002\r\n  templateUrl: './liveness.component.html',\r\n  styleUrls: ['./liveness.component.css']\r\n})\r\nexport class LivenessComponent implements OnInit, AfterViewInit, OnDestroy {\r\n  @ViewChild('webcam') webcamRef!: ElementRef<HTMLVideoElement>;\r\n\r\n  // --- Logic Configuration ---\r\n  @Input() apiUrl!: string;\r\n  @Input() duration = 60;\r\n  @Input() smileThreshold?: number;\r\n  @Input() blinkThreshold?: number;\r\n  @Input() minturnHeadThreshold?: number;\r\n  @Input() maxturnHeadThreshold?: number;\r\n\r\n  // --- Styling Configuration (Class Names) ---\r\n  @Input() containerClass = '';\r\n  @Input() videoWrapperClass = '';\r\n  @Input() videoClass = '';\r\n  @Input() timerClass = '';\r\n  @Input() challengeTextClass = '';\r\n  @Input() buttonClass = '';\r\n  @Input() retryButtonClass = '';\r\n  @Input() statusOverlayClass = '';\r\n  @Input() successMessageClass = '';\r\n  @Input() errorMessageClass = '';\r\n  @Input() instructionBoxClass = '';\r\n\r\n  @Output() onComplete = new EventEmitter<LivenessSDKResult>();\r\n  @Output() onError = new EventEmitter<any>();\r\n\r\n  constructor(public liveness: LivenessService) {}\r\n\r\n  ngOnInit() {\r\n    // Pass the custom thresholds directly to the service\r\n    this.liveness.init({\r\n      apiUrl: this.apiUrl,\r\n      duration: this.duration,\r\n      smileThreshold: this.smileThreshold,\r\n      blinkThreshold: this.blinkThreshold,\r\n      minturnHeadThreshold: this.minturnHeadThreshold,\r\n      maxturnHeadThreshold: this.maxturnHeadThreshold,\r\n      onComplete: (res) => this.onComplete.emit(res),\r\n      onError: (err) => this.onError.emit(err)\r\n    });\r\n  }\r\n\r\n  async ngAfterViewInit() {\r\n    try {\r\n      const stream = await navigator.mediaDevices.getUserMedia({ \r\n        video: { width: 640, height: 480, facingMode: 'user' } \r\n      });\r\n      const video = this.webcamRef.nativeElement;\r\n      video.srcObject = stream;\r\n      video.onloadedmetadata = () => {\r\n        video.play();\r\n        this.liveness.attach(video);\r\n      };\r\n    } catch (e) {\r\n      this.onError.emit({ success: false, reason: 'Camera access denied' });\r\n    }\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    const stream = this.webcamRef?.nativeElement?.srcObject as MediaStream;\r\n    stream?.getTracks().forEach(track => track.stop());\r\n  }\r\n}","<div class=\"liveness-sdk-container\" [ngClass]=\"containerClass\">\r\n  <div class=\"video-window\" [ngClass]=\"videoWrapperClass\">\r\n    <video #webcam \r\n           autoplay \r\n           playsinline \r\n           muted \r\n           [ngClass]=\"videoClass\" \r\n           style=\"transform: scaleX(-1);\">\r\n    </video>\r\n\r\n    <ng-container *ngIf=\"(liveness.state$ | async) as state\">\r\n      <div class=\"status-overlay\" [ngClass]=\"statusOverlayClass\">\r\n        \r\n        <div class=\"instruction-box\">\r\n          <h2 class=\"status-text\">{{ state.status | uppercase }}</h2>\r\n          \r\n          <p *ngIf=\"state.status === 'capturing'\" \r\n             class=\"challenge-text\" \r\n             [ngClass]=\"challengeTextClass\">\r\n             Challenge: {{ state.sequence[state.currentStep] }}\r\n          </p>\r\n\r\n          <p *ngIf=\"state.status === 'success'\" \r\n             class=\"success-msg\" \r\n             [ngClass]=\"successMessageClass\">\r\n             Verification Successful!\r\n          </p>\r\n          \r\n          <p *ngIf=\"state.status === 'error' || state.status === 'expired'\" \r\n             class=\"error-msg\" \r\n             [ngClass]=\"errorMessageClass\">\r\n             {{ state.errorMsg || 'Verification failed. Please try again.' }}\r\n          </p>\r\n        </div>\r\n\r\n        <div *ngIf=\"state.status === 'capturing'\" \r\n             class=\"timer-ring\" \r\n             [ngClass]=\"timerClass\">\r\n          {{ state.timeLeft }}s\r\n        </div>\r\n\r\n        <div class=\"action-area\">\r\n          <button *ngIf=\"state.status === 'ready'\" \r\n                  (click)=\"liveness.start()\" \r\n                  class=\"btn-start\" \r\n                  [ngClass]=\"buttonClass\">\r\n            Start Verification\r\n          </button>\r\n          \r\n          <button *ngIf=\"state.status === 'error' || state.status === 'expired'\" \r\n                  (click)=\"liveness.reset()\" \r\n                  class=\"btn-retry\"\r\n                  [ngClass]=\"retryButtonClass\">\r\n            Try Again\r\n          </button>\r\n        </div>\r\n\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>","// src/api.ts\r\n\r\nimport { Challenge } from \"./core/LivenessEngine\";\r\n\r\nexport interface LivenessResponse {\r\n  is_live: boolean;\r\n  reason?: string;\r\n  skin_confidence?: number;\r\n  [key: string]: any; // allow extra fields if backend returns more\r\n}\r\n\r\n/**\r\n * Sends captured frames to the backend API for liveness verification.\r\n * @param apiUrl - Base URL of the liveness backend\r\n * @param frameBlobs - Array of Blob objects representing captured frames\r\n * @param challenge - The current challenge string\r\n * @returns LivenessResponse from backend\r\n */\r\nexport const verifyLiveness = async (\r\n  apiUrl: string,\r\n  frameBlobs: Blob[],\r\n  challenge: Challenge[]\r\n): Promise<LivenessResponse> => {\r\n  const formData = new FormData();\r\n\r\n  frameBlobs.forEach((blob, i) => {\r\n    formData.append('files', blob, `frame_${i}.jpg`);\r\n  });\r\n  formData.append('challenge', JSON.stringify(challenge));\r\n\r\n  const response = await fetch(`${apiUrl}/v1/verify`, {\r\n    method: 'POST',\r\n    body: formData,\r\n  });\r\n\r\n  if (!response.ok) {\r\n    throw new Error(\"Network response was not ok\");\r\n  }\r\n\r\n  const data: LivenessResponse = await response.json();\r\n  return data;\r\n};","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.LivenessService"],"mappings":"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"}

package/dist/angular/types/richard.fadiora-liveness-detection.d.ts

@@ -0,0 +1,125 @@
+import * as i0 from '@angular/core';
+import { OnDestroy, NgZone, OnInit, AfterViewInit, ElementRef, EventEmitter } from '@angular/core';
+import { Observable } from 'rxjs';
+
+type Challenge = "Smile" | "Blink" | "Turn_Head" | "Thumbs_Up";
+interface LivenessSDKResult {
+    success: boolean;
+    image?: string;
+    reason?: string;
+    skinConfidence?: number;
+}
+interface LivenessState {
+    status: "loading" | "ready" | "capturing" | "verifying" | "success" | "error" | "expired";
+    sequence: Challenge[];
+    currentStep: number;
+    timeLeft: number;
+    isStepTransitioning: boolean;
+    errorMsg: string;
+}
+interface LivenessEngineConfig {
+    apiUrl: string;
+    duration?: number;
+    smileThreshold?: number;
+    blinkThreshold?: number;
+    minturnHeadThreshold?: number;
+    maxturnHeadThreshold?: number;
+    onStateChange?: (state: LivenessState) => void;
+    onComplete?: (result: LivenessSDKResult) => void;
+    onError?: (error: LivenessSDKResult) => void;
+}
+declare class LivenessEngine {
+    private config;
+    private models;
+    private webcam;
+    private state;
+    private currentStepRef;
+    private isStepTransitioningRef;
+    private timerId;
+    private requestId;
+    private offscreenCanvas;
+    private CHALLENGE_POOL;
+    constructor(config: LivenessEngineConfig);
+    /**
+     * Phase 1: Load AI Assets (Call this immediately on mount)
+     */
+    loadModels(): Promise<void>;
+    /**
+     * Phase 2: Attach Video (Call this once the Webcam is in the DOM)
+     */
+    attachVideo: (video: HTMLVideoElement) => void;
+    start: () => void;
+    stop: () => void;
+    reset: () => void;
+    private updateState;
+    private generateSequence;
+    private startTimer;
+    private detectLoop;
+    private handleStepSuccess;
+    private checkAction;
+    private sendFinalProof;
+    private getFaceCrop;
+}
+
+declare class LivenessService implements OnDestroy {
+    private ngZone;
+    private engine;
+    private stateSubject;
+    state$: Observable<LivenessState | null>;
+    constructor(ngZone: NgZone);
+    init(config: LivenessEngineConfig): void;
+    attach(video: HTMLVideoElement): void;
+    start(): void;
+    reset(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LivenessService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<LivenessService>;
+}
+
+declare class LivenessComponent implements OnInit, AfterViewInit, OnDestroy {
+    liveness: LivenessService;
+    webcamRef: ElementRef<HTMLVideoElement>;
+    apiUrl: string;
+    duration: number;
+    smileThreshold?: number;
+    blinkThreshold?: number;
+    minturnHeadThreshold?: number;
+    maxturnHeadThreshold?: number;
+    containerClass: string;
+    videoWrapperClass: string;
+    videoClass: string;
+    timerClass: string;
+    challengeTextClass: string;
+    buttonClass: string;
+    retryButtonClass: string;
+    statusOverlayClass: string;
+    successMessageClass: string;
+    errorMessageClass: string;
+    instructionBoxClass: string;
+    onComplete: EventEmitter<LivenessSDKResult>;
+    onError: EventEmitter<any>;
+    constructor(liveness: LivenessService);
+    ngOnInit(): void;
+    ngAfterViewInit(): Promise<void>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LivenessComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LivenessComponent, "LivenessCheck", never, { "apiUrl": { "alias": "apiUrl"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "smileThreshold": { "alias": "smileThreshold"; "required": false; }; "blinkThreshold": { "alias": "blinkThreshold"; "required": false; }; "minturnHeadThreshold": { "alias": "minturnHeadThreshold"; "required": false; }; "maxturnHeadThreshold": { "alias": "maxturnHeadThreshold"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "videoWrapperClass": { "alias": "videoWrapperClass"; "required": false; }; "videoClass": { "alias": "videoClass"; "required": false; }; "timerClass": { "alias": "timerClass"; "required": false; }; "challengeTextClass": { "alias": "challengeTextClass"; "required": false; }; "buttonClass": { "alias": "buttonClass"; "required": false; }; "retryButtonClass": { "alias": "retryButtonClass"; "required": false; }; "statusOverlayClass": { "alias": "statusOverlayClass"; "required": false; }; "successMessageClass": { "alias": "successMessageClass"; "required": false; }; "errorMessageClass": { "alias": "errorMessageClass"; "required": false; }; "instructionBoxClass": { "alias": "instructionBoxClass"; "required": false; }; }, { "onComplete": "onComplete"; "onError": "onError"; }, never, never, true, never>;
+}
+
+interface LivenessResponse {
+    is_live: boolean;
+    reason?: string;
+    skin_confidence?: number;
+    [key: string]: any;
+}
+/**
+ * Sends captured frames to the backend API for liveness verification.
+ * @param apiUrl - Base URL of the liveness backend
+ * @param frameBlobs - Array of Blob objects representing captured frames
+ * @param challenge - The current challenge string
+ * @returns LivenessResponse from backend
+ */
+declare const verifyLiveness: (apiUrl: string, frameBlobs: Blob[], challenge: Challenge[]) => Promise<LivenessResponse>;
+
+export { LivenessComponent, LivenessEngine, LivenessService, verifyLiveness };
+export type { Challenge, LivenessEngineConfig, LivenessResponse, LivenessSDKResult, LivenessState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@richard.fadiora/liveness-detection",
-  "version": "4.2.12",
+  "version": "4.2.14",
   "private": false,
   "type": "module",
   "files": [
@@ -11,15 +11,21 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./angular": {
+      "types": "./dist/angular/index.d.ts",
+      "import": "./dist/angular/fesm2022/richard.fadiora-liveness-detection.mjs",
+      "default": "./dist/angular/fesm2022/richard.fadiora-liveness-detection.mjs"
     }
   },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "build:react": "vite build",
+    "build:angular": "ng-packagr -p ng-package.json",
+    "build": "npm run build:react && npm run build:angular",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "@angular/common": ">=21.0.0",
@@ -39,6 +45,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "ng-packagr": "^21.2.0",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0"
   },