@neofaceid/web-sdk 1.17.0 → 1.21.0

package/dist/neoface-id-sdk.es.js

@@ -3428,7 +3428,18 @@ const CALIBRATION = {
   YAW_LEFT_THRESHOLD: 15,
   YAW_RIGHT_THRESHOLD: -15,
   CAPTURE_HOLD_TIME: 1500,
-  DETECTION_INTERVAL: 200
+  DETECTION_INTERVAL: 150,
+  // Um pouco mais rápido para melhor resposta
+  MIN_FACE_WIDTH: 160,
+  // Rosto deve ocupar boa parte do oval (era ~120 implícito)
+  MAX_FACE_WIDTH: 280,
+  // Evita rosto "colado" na câmera
+  CENTER_X_THRESHOLD: 0.15,
+  // Rosto deve estar centralizado (desvio max 15%)
+  CENTER_Y_THRESHOLD: 0.2,
+  // Rosto deve estar centralizado verticalmente
+  STEP_TIMEOUT: 2e4
+  // 20 segundos para realizar cada movimento
 };
 function BiometricRegistrationModal({
   personData,
@@ -3446,11 +3457,13 @@ function BiometricRegistrationModal({
   const isCapturingRef = useRef(false);
   const currentStepRef = useRef("center");
   const watchdogTimerRef = useRef(null);
+  const stepTimeoutTimerRef = useRef(null);
   const detectionStartedRef = useRef(false);
   const captureStateRef = useRef(null);
   const [state, dispatch] = useReducer(modalReducer, initialState);
   const [faceDetected, setFaceDetected] = useState(false);
-  const [_faceDistance, setFaceDistance] = useState("ok");
+  const [faceDistance, setFaceDistance] = useState("ok");
+  const [cameraReady, setCameraReady] = useState(false);
   useEffect(() => {
     if (state.status === "liveness") {
       const newStep = state.step;
@@ -3472,6 +3485,18 @@ function BiometricRegistrationModal({
         currentStepIndex: state.currentStepIndex,
         capturedPhotos: state.capturedPhotos
       };
+      if (stepTimeoutTimerRef.current) {
+        clearTimeout(stepTimeoutTimerRef.current);
+      }
+      if (state.step !== "complete") {
+        stepTimeoutTimerRef.current = window.setTimeout(() => {
+          dispatch({
+            type: "ERROR",
+            message: "Tempo limite atingido para o movimento. Por favor, tente novamente em um ambiente bem iluminado.",
+            retryable: true
+          });
+        }, CALIBRATION.STEP_TIMEOUT);
+      }
     }
   }, [
     state.status,
@@ -3512,6 +3537,18 @@ function BiometricRegistrationModal({
       return null;
     }
   };
+  const checkFacePosition = (box, videoWidth, videoHeight) => {
+    if (box.width < CALIBRATION.MIN_FACE_WIDTH) return "too-far";
+    if (box.width > CALIBRATION.MAX_FACE_WIDTH) return "too-close";
+    const faceCenterX = box.x + box.width / 2;
+    const faceCenterY = box.y + box.height / 2;
+    const deviationX = Math.abs(faceCenterX - videoWidth / 2) / videoWidth;
+    const deviationY = Math.abs(faceCenterY - videoHeight / 2) / videoHeight;
+    if (deviationX > CALIBRATION.CENTER_X_THRESHOLD || deviationY > CALIBRATION.CENTER_Y_THRESHOLD) {
+      return "not-centered";
+    }
+    return "ok";
+  };
   const checkPositionMatch = (pitch, yaw, step) => {
     switch (step) {
       case "center":
@@ -3605,6 +3642,10 @@ function BiometricRegistrationModal({
         clearInterval(progressIntervalRef.current);
         progressIntervalRef.current = null;
       }
+      if (stepTimeoutTimerRef.current) {
+        clearTimeout(stepTimeoutTimerRef.current);
+        stepTimeoutTimerRef.current = null;
+      }
     };
   }, []);
   useEffect(() => {
@@ -3652,7 +3693,11 @@ function BiometricRegistrationModal({
         }
         video.srcObject = stream;
         streamRef.current = stream;
-        await video.play();
+        video.onloadedmetadata = () => {
+          video.play().then(() => {
+            if (mounted) setCameraReady(true);
+          });
+        };
       } catch (error) {
         if (!mounted) return;
         if (watchdogTimerRef.current) {
@@ -3714,22 +3759,27 @@ function BiometricRegistrationModal({
         const detection = await faceapi.detectSingleFace(
           videoRef.current,
           new faceapi.TinyFaceDetectorOptions({
-            inputSize: 160,
-            scoreThreshold: 0.4
+            inputSize: 224,
+            // Aumentado para detectar rostos menores/mais distantes
+            scoreThreshold: 0.35
+            // Ligeiramente mais sensível
           })
         ).withFaceLandmarks();
         if (!isRunning) return;
         const hasFace = !!detection;
         setFaceDetected(hasFace);
         if (hasFace && detection.detection) {
-          const box = detection.detection.box;
-          const faceWidth = box.width;
-          if (faceWidth > 250) {
-            setFaceDistance("too-close");
-          } else if (faceWidth < 120) {
-            setFaceDistance("too-far");
-          } else {
-            setFaceDistance("ok");
+          const video2 = videoRef.current;
+          const positionStatus = checkFacePosition(
+            detection.detection.box,
+            video2.videoWidth,
+            video2.videoHeight
+          );
+          setFaceDistance(positionStatus);
+          if (positionStatus !== "ok") {
+            manageHoldAndCapture(false);
+            requestAnimationFrame(detectFace2);
+            return;
           }
         }
         if (hasFace && detection.landmarks) {
@@ -3911,26 +3961,25 @@ function BiometricRegistrationModal({
     const stepProgress = state.stepProgress;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "liveness-container", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "progress-indicator", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "progress-text", children: progress }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "video-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      faceDetected && faceDistance !== "ok" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `status-badge ${faceDistance === "not-centered" ? "warning" : "error"}`, children: [
+        faceDistance === "too-far" && "Aproxime-se mais",
+        faceDistance === "too-close" && "Afaste-se um pouco",
+        faceDistance === "not-centered" && "Centralize seu rosto"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "video-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         "div",
         {
-          className: `video-circle ${faceDetected ? "face-detected" : ""} ${stepProgress > 0 ? "capturing" : ""}`,
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("video", { ref: videoRef, className: "video-feed", autoPlay: true, muted: true, playsInline: true }),
-            faceDetected && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "face-badge", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "path",
-                {
-                  d: "M5 10 L8 13 L15 6",
-                  stroke: "currentColor",
-                  strokeWidth: "2.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Rosto detectado" })
-            ] })
-          ]
+          className: `video-circle ${faceDetected && faceDistance === "ok" ? "face-detected" : ""} ${stepProgress > 0 ? "capturing" : ""}`,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "video",
+            {
+              ref: videoRef,
+              className: `video-feed ${cameraReady ? "ready" : ""}`,
+              autoPlay: true,
+              muted: true,
+              playsInline: true
+            }
+          )
         }
       ) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "instruction-box", children: [
@@ -4387,8 +4436,9 @@ function BiometricRegistrationModal({
           border-radius: 50%;
           overflow: hidden;
           position: relative;
-          transition: all 0.3s ease;
+          /* Removida transição 'all' para evitar salto de zoom no início */
           box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.3);
+          background: #000;
         }
 
         .video-circle.face-detected {
@@ -4405,14 +4455,23 @@ function BiometricRegistrationModal({
           height: 100%;
           object-fit: cover;
           transform: scaleX(-1);
+          opacity: 0;
+          transition: opacity 0.4s ease;
+        }
+
+        .video-feed.ready {
+          opacity: 1;
         }
 
         .face-badge {
+          display: none; /* Removido por ser redundante com o oval verde */
+        }
+
+        .status-badge {
           position: absolute;
-          top: 20px;
+          top: 72px; /* Logo abaixo do progress-indicator */
           left: 50%;
           transform: translateX(-50%);
-          background: rgba(16, 185, 129, 0.95);
           backdrop-filter: blur(10px);
           border-radius: 20px;
           padding: 8px 16px;
@@ -4423,22 +4482,30 @@ function BiometricRegistrationModal({
           font-size: 13px;
           font-weight: 600;
           border: 1px solid rgba(255, 255, 255, 0.3);
-          box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
           animation: slideDown 0.3s ease-out;
+          z-index: 10;
+          white-space: nowrap;
+        }
+
+        .status-badge.info {
+          background: rgba(255, 255, 255, 0.15);
+          color: white;
+          border-color: rgba(255, 255, 255, 0.1);
         }
 
-        .face-badge.warning {
+        .status-badge.warning {
           background: rgba(251, 191, 36, 0.95);
-          border: 1px solid rgba(255, 255, 255, 0.3);
-          box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
           color: #78350f;
+          border-color: rgba(0, 0, 0, 0.1);
+          box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2);
         }
 
-        .face-badge.error {
+        .status-badge.error {
           background: rgba(239, 68, 68, 0.95);
-          border: 1px solid rgba(255, 255, 255, 0.3);
-          box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
           color: white;
+          border-color: rgba(255, 255, 255, 0.2);
+          box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
         }
 
         .instruction-box {
@@ -6835,7 +6902,7 @@ const biometricDetection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   initializeBiometricDetection,
   isAdvancedDetectionAvailable
 }, Symbol.toStringTag, { value: "Module" }));
-const VERSION = "1.17.0";
+const VERSION = "1.21.0";
 const RELEASE_DATE = "2026-03-13";
 class OnboardingCaptureModal {
   constructor(options) {