@neofaceid/web-sdk 1.19.0 → 1.23.0

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

@@ -3430,14 +3430,14 @@ const CALIBRATION = {
   CAPTURE_HOLD_TIME: 1500,
   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
+  MIN_FACE_PERCENT: 0.35,
+  // Rosto deve ocupar pelo menos 35% da largura do vídeo
+  MAX_FACE_PERCENT: 0.65,
+  // Rosto pode ocupar até 65% da largura do vídeo
+  CENTER_X_THRESHOLD: 0.18,
+  // Ligeiramente mais tolerante na centralização
+  CENTER_Y_THRESHOLD: 0.22,
+  STEP_TIMEOUT: 2e4
 };
 function BiometricRegistrationModal({
   personData,
@@ -3455,6 +3455,7 @@ 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);
@@ -3482,6 +3483,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,
@@ -3522,9 +3535,14 @@ 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 checkFacePosition = (detection) => {
+    if (!detection || !videoRef.current) return "not-detected";
+    const { box } = detection.detection;
+    const videoWidth = videoRef.current.videoWidth || 640;
+    const videoHeight = videoRef.current.videoHeight || 480;
+    const faceWidthRatio = box.width / videoWidth;
+    if (faceWidthRatio < CALIBRATION.MIN_FACE_PERCENT) return "too-far";
+    if (faceWidthRatio > CALIBRATION.MAX_FACE_PERCENT) 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;
@@ -3627,6 +3645,10 @@ function BiometricRegistrationModal({
         clearInterval(progressIntervalRef.current);
         progressIntervalRef.current = null;
       }
+      if (stepTimeoutTimerRef.current) {
+        clearTimeout(stepTimeoutTimerRef.current);
+        stepTimeoutTimerRef.current = null;
+      }
     };
   }, []);
   useEffect(() => {
@@ -3740,21 +3762,20 @@ 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 video2 = videoRef.current;
-          const positionStatus = checkFacePosition(
-            detection.detection.box,
-            video2.videoWidth,
-            video2.videoHeight
-          );
-          setFaceDistance(positionStatus);
+          const positionStatus = checkFacePosition(detection);
+          if (positionStatus !== "not-detected") {
+            setFaceDistance(positionStatus);
+          }
           if (positionStatus !== "ok") {
             manageHoldAndCapture(false);
             requestAnimationFrame(detectFace2);
@@ -3940,40 +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 }) }),
-      faceDetected && faceDistance !== "ok" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `face-badge ${faceDistance === "not-centered" ? "warning" : "error"}`, children: [
+      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" && "Rosto muito perto",
+        faceDistance === "too-close" && "Afaste-se um pouco",
         faceDistance === "not-centered" && "Centralize seu rosto"
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "video-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__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 ${cameraReady ? "ready" : ""}`,
-                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: [
@@ -4458,11 +4464,14 @@ function BiometricRegistrationModal({
         }
 
         .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;
@@ -4473,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;
         }
 
-        .face-badge.warning {
+        .status-badge.info {
+          background: rgba(255, 255, 255, 0.15);
+          color: white;
+          border-color: rgba(255, 255, 255, 0.1);
+        }
+
+        .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 {
@@ -6885,7 +6902,7 @@ const biometricDetection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   initializeBiometricDetection,
   isAdvancedDetectionAvailable
 }, Symbol.toStringTag, { value: "Module" }));
-const VERSION = "1.19.0";
+const VERSION = "1.23.0";
 const RELEASE_DATE = "2026-03-13";
 class OnboardingCaptureModal {
   constructor(options) {