🛡️ SDK Demo

Liveness Detection
SDK

Drop-in face liveness verification for any website.
No server. No data sent. Everything runs locally in the browser via MediaPipe.

Live Demos

Click any button below to open the liveness modal

⚡
Minimal Integration
2 lines of code

The simplest possible integration. Creates an SDK instance and opens the modal. Callbacks handle the result.

👤
Waiting for verification
Click the button below to start
🎯
Custom Challenges
Specify exact challenge sequence

Pass a fixed list of challenge IDs. The user will be asked to perform exactly these actions in order.

👤
Waiting for verification
Challenges: blink → smile → look_up
📡
All Events
onReady, onChallengePass/Fail, onCancel

Demonstrates every available callback. Watch the event log update in real-time as you complete challenges.

📋
Event log will appear here
No events yet
⚙️
Custom Thresholds
Easier or harder liveness

Adjust sensitivity for your use case. Lower thresholds = easier; higher = stricter. Useful for accessibility.

👤
Waiting for verification
Using relaxed thresholds
🎨
Custom Branding
Your title, your footer

Replace the default title and footer branding with your own. Pass an empty string to hide the footer entirely.

👤
Waiting for verification
Custom title and branding
🎛️
Programmatic Control
open() / close() / destroy()

Create a persistent SDK instance and control it with open / close / destroy methods for fine-grained lifecycle management.

👤
Waiting for action
Instance not created yet

Integration Example

Copy and paste this into your own page

<link rel="stylesheet" href="liveness-sdk.css" /> <script src="liveness-sdk.js">script> <script> const sdk = new LivenessSDK({ // Required: handle the result onSuccess: (result) => { console.log('✅ Verified!', result); }, onFailure: (result) => { console.log('❌ Failed', result); }, // Optional: customise behaviour numChallenges: 3, // 1–8 challenges per session title: 'Identity Check', // modal header title challenges: ['blink', 'smile'], // fixed challenge order (optional) branding: 'Secured by Acme', // footer text ('' to hide) }); // Open when user clicks verify document.getElementById('verifyBtn').addEventListener('click', () => { sdk.open(); }); script>

Constructor Options

Pass these to new LivenessSDK(options)

Option Type Default Description
onSuccess function — Called with result object when user passes all challenges
onFailure function — Called with result object when verification fails
onCancel function — Called when user closes the modal without completing
onReady function — Called after camera & FaceMesh are loaded and ready
onChallengePass function — Called after each challenge passes. Receives { id, index }
onChallengeFail function — Called after each challenge times out. Receives { id, index }
numChallenges number 3 Number of random challenges per session (1–8)
challenges string[] — Fixed ordered list of challenge IDs. Overrides numChallenges. Valid IDs: blink, turn_left, turn_right, nod, smile, mouth_open, look_up, look_down
title string "Face Verification" Text shown in the modal header
branding string NinjaTech AI link HTML string for the footer. Pass '' to hide the footer.
injectCSS boolean true Auto-resolve and inject the CSS file (sibling to liveness-sdk.js)
cssUrl string — Explicit URL to liveness-sdk.css (used when auto-resolve fails)
thresholds object — Override individual detection thresholds. Keys: EAR_CLOSED, EAR_OPEN, SMILE_RATIO, SMILE_HOLD, HEAD_TURN_DEG, MOUTH_OPEN_RATIO, MOUTH_HOLD, LOOK_HOLD, LOOK_THRESH, BLINK_COOLDOWN, CHALLENGE_TIMEOUT, CALIB_FRAMES

Result Object

Passed to onSuccess and onFailure callbacks

// result object shape { verified: true, // boolean — did the user pass? passed: 3, // number — how many challenges passed total: 3, // number — total challenges in session challenges: [ // array — per-challenge results { id: 'blink', passed: true }, { id: 'turn_left', passed: true }, { id: 'smile', passed: true }, ] }