@daboss2003/liveness-web 1.0.1 → 1.0.3

package/dist/engine.js

@@ -110,14 +110,14 @@ const config = {
     // Number of frames averaged to produce the resting baseline per step
     baselineFrames: 8,
     // ── Head turns (relative to baseline) ─────────────────────────────────────
-    yawTurnDelta: 12, // degrees of YAW change needed from rest
+    yawTurnDelta: 9, // degrees of YAW change needed from rest
     yawWrongDirDelta: 16, // block if turned clearly the WRONG way
-    headTurnHoldMs: 120, // sustain the turned pose for this long
+    headTurnHoldMs: 80, // sustain the turned pose for this long
     // ── Nod (relative to baseline) ────────────────────────────────────────────
-    nodDownDelta: 8, // chin must DROP by this many degrees from baseline
-    nodReturnFraction: 0.40, // return to 40% of peak nod depth to complete
-    nodReturnMaxDelta: 5, // cap: never require returning past 5° from baseline
-    maxYawDuringNod: 22,
+    nodDownDelta: 4, // chin must DROP by this many degrees from baseline
+    nodReturnFraction: 0.75, // return to 75% of peak nod depth to complete
+    nodReturnMaxDelta: 9, // cap: never require returning past 9° from baseline
+    maxYawDuringNod: 32,
     // ── Blink ──────────────────────────────────────────────────────────────────
     blinkClosedThreshold: 0.35, // blendshape score = eyes closed
     blinkOpenThreshold: 0.20, // blendshape score = eyes open
@@ -127,11 +127,11 @@ const config = {
     maxYawDuringBlink: 25,
     maxPitchDuringBlink: 25,
     // ── Mouth ──────────────────────────────────────────────────────────────────
-    mouthOpenThreshold: 0.28, // jawOpen blendshape
-    mouthOpenMarThreshold: 0.28,
-    mouthHoldMs: 120,
-    maxYawDuringMouth: 25,
-    maxPitchDuringMouth: 25,
+    mouthOpenThreshold: 0.20, // jawOpen blendshape
+    mouthOpenMarThreshold: 0.20,
+    mouthHoldMs: 50,
+    maxYawDuringMouth: 35,
+    maxPitchDuringMouth: 35,
     // ── Face-in-oval ───────────────────────────────────────────────────────────
     ovalCx: 0.50,
     ovalCy: 0.42,

package/dist/ui.js

@@ -41,8 +41,9 @@ function createStyles() {
       display: flex;
       flex-direction: column;
       align-items: center;
-      --oval-w: min(72vmin, ${OVAL_W}px);
-      --oval-h: min(96vmin, ${OVAL_H}px);
+      /* Radii: keep oval inside viewport on mobile (diameter = 2× this), cap at desktop */
+      --oval-w: min(45vmin, ${OVAL_W}px);
+      --oval-h: min(60vmin, ${OVAL_H}px);
       /* Half-height of the visible oval for positioning (oval uses full w/h as radii) */
       --oval-half-h: var(--oval-h);
     }
@@ -63,8 +64,20 @@ function createStyles() {
       object-fit: cover;
       /* Mirror so it feels like a selfie camera */
       transform: scaleX(-1);
+      opacity: 0;
+      transition: opacity 0.2s ease;
       /* Clip the video to the oval using clip-path on the parent */
     }
+    .lv-video.is-playing { opacity: 1; }
+    .lv-video::-webkit-media-controls,
+    .lv-video::-webkit-media-controls-panel,
+    .lv-video::-webkit-media-controls-play-button,
+    .lv-video::-webkit-media-controls-start-playback-button,
+    .lv-video::-webkit-media-controls-overlay-play-button,
+    .lv-video::-webkit-media-controls-enclosure {
+      display: none !important;
+      -webkit-appearance: none;
+    }
 
     /* ── Dark overlay with oval cutout ──────────────────────────────────── */
     .lv-overlay {
@@ -265,6 +278,7 @@ export function startLivenessWithUI(options) {
     video.className = "lv-video";
     video.setAttribute("autoplay", "");
     video.setAttribute("playsinline", "");
+    video.setAttribute("webkit-playsinline", "");
     video.setAttribute("muted", "");
     videoBg.appendChild(video);
     root.appendChild(videoBg);
@@ -356,6 +370,9 @@ export function startLivenessWithUI(options) {
     }
     function cleanup() {
         engine.stop();
+        video.removeEventListener("playing", onVideoPlaying);
+        video.removeEventListener("pause", onVideoPause);
+        video.removeEventListener("waiting", onVideoPause);
         root.remove();
     }
     // ── Engine ─────────────────────────────────────────────────────────────────
@@ -363,6 +380,11 @@ export function startLivenessWithUI(options) {
     const sounds = options.sounds ?? {
         ...(Object.keys(DEFAULT_SOUND_DATA_URLS).length > 0 ? DEFAULT_SOUND_DATA_URLS : { baseUrl: "audios/" }),
     };
+    const onVideoPlaying = () => video.classList.add("is-playing");
+    const onVideoPause = () => video.classList.remove("is-playing");
+    video.addEventListener("playing", onVideoPlaying);
+    video.addEventListener("pause", onVideoPause);
+    video.addEventListener("waiting", onVideoPause);
     const engine = new LivenessEngine({
         videoElement: video,
         canvasElement: canvas,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daboss2003/liveness-web",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Web liveness detection using MediaPipe Face Landmarker (CDN)",
   "keywords": [
     "liveness",

package/src/engine.ts

@@ -188,15 +188,15 @@ const config = {
   baselineFrames: 8,
 
   // ── Head turns (relative to baseline) ─────────────────────────────────────
-  yawTurnDelta:           12,   // degrees of YAW change needed from rest
+  yawTurnDelta:            9,   // degrees of YAW change needed from rest
   yawWrongDirDelta:       16,   // block if turned clearly the WRONG way
-  headTurnHoldMs:        120,   // sustain the turned pose for this long
+  headTurnHoldMs:         80,   // sustain the turned pose for this long
 
   // ── Nod (relative to baseline) ────────────────────────────────────────────
-  nodDownDelta:            8,   // chin must DROP by this many degrees from baseline
-  nodReturnFraction:      0.40, // return to 40% of peak nod depth to complete
-  nodReturnMaxDelta:       5,   // cap: never require returning past 5° from baseline
-  maxYawDuringNod:        22,
+  nodDownDelta:            4,   // chin must DROP by this many degrees from baseline
+  nodReturnFraction:      0.75, // return to 75% of peak nod depth to complete
+  nodReturnMaxDelta:       9,   // cap: never require returning past 9° from baseline
+  maxYawDuringNod:        32,
 
   // ── Blink ──────────────────────────────────────────────────────────────────
   blinkClosedThreshold:  0.35,  // blendshape score = eyes closed
@@ -208,11 +208,11 @@ const config = {
   maxPitchDuringBlink:   25,
 
   // ── Mouth ──────────────────────────────────────────────────────────────────
-  mouthOpenThreshold:    0.28,  // jawOpen blendshape
-  mouthOpenMarThreshold: 0.28,
-  mouthHoldMs:          120,
-  maxYawDuringMouth:     25,
-  maxPitchDuringMouth:   25,
+  mouthOpenThreshold:    0.20,  // jawOpen blendshape
+  mouthOpenMarThreshold: 0.20,
+  mouthHoldMs:           50,
+  maxYawDuringMouth:     35,
+  maxPitchDuringMouth:   35,
 
   // ── Face-in-oval ───────────────────────────────────────────────────────────
   ovalCx:       0.50,

package/src/ui.ts

@@ -56,8 +56,9 @@ function createStyles(): HTMLStyleElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      --oval-w: min(72vmin, ${OVAL_W}px);
-      --oval-h: min(96vmin, ${OVAL_H}px);
+      /* Radii: keep oval inside viewport on mobile (diameter = 2× this), cap at desktop */
+      --oval-w: min(45vmin, ${OVAL_W}px);
+      --oval-h: min(60vmin, ${OVAL_H}px);
       /* Half-height of the visible oval for positioning (oval uses full w/h as radii) */
       --oval-half-h: var(--oval-h);
     }
@@ -78,8 +79,20 @@ function createStyles(): HTMLStyleElement {
       object-fit: cover;
       /* Mirror so it feels like a selfie camera */
       transform: scaleX(-1);
+      opacity: 0;
+      transition: opacity 0.2s ease;
       /* Clip the video to the oval using clip-path on the parent */
     }
+    .lv-video.is-playing { opacity: 1; }
+    .lv-video::-webkit-media-controls,
+    .lv-video::-webkit-media-controls-panel,
+    .lv-video::-webkit-media-controls-play-button,
+    .lv-video::-webkit-media-controls-start-playback-button,
+    .lv-video::-webkit-media-controls-overlay-play-button,
+    .lv-video::-webkit-media-controls-enclosure {
+      display: none !important;
+      -webkit-appearance: none;
+    }
 
     /* ── Dark overlay with oval cutout ──────────────────────────────────── */
     .lv-overlay {
@@ -286,6 +299,7 @@ export function startLivenessWithUI(options: StartLivenessOptions): LivenessEngi
   video.className = "lv-video";
   video.setAttribute("autoplay", "");
   video.setAttribute("playsinline", "");
+  video.setAttribute("webkit-playsinline", "");
   video.setAttribute("muted", "");
   videoBg.appendChild(video);
   root.appendChild(videoBg);
@@ -390,6 +404,9 @@ export function startLivenessWithUI(options: StartLivenessOptions): LivenessEngi
 
   function cleanup(): void {
     engine.stop();
+    video.removeEventListener("playing", onVideoPlaying);
+    video.removeEventListener("pause", onVideoPause);
+    video.removeEventListener("waiting", onVideoPause);
     root.remove();
   }
 
@@ -399,6 +416,12 @@ export function startLivenessWithUI(options: StartLivenessOptions): LivenessEngi
     ...(Object.keys(DEFAULT_SOUND_DATA_URLS).length > 0 ? DEFAULT_SOUND_DATA_URLS : { baseUrl: "audios/" }),
   };
 
+  const onVideoPlaying = () => video.classList.add("is-playing");
+  const onVideoPause = () => video.classList.remove("is-playing");
+  video.addEventListener("playing", onVideoPlaying);
+  video.addEventListener("pause", onVideoPause);
+  video.addEventListener("waiting", onVideoPause);
+
   const engine = new LivenessEngine({
     videoElement: video,
     canvasElement: canvas,