@neofaceid/web-sdk 1.17.0 → 1.19.0

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

@@ -3428,7 +3428,16 @@ 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
 };
 function BiometricRegistrationModal({
   personData,
@@ -3450,7 +3459,8 @@ function BiometricRegistrationModal({
   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;
@@ -3512,6 +3522,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":
@@ -3652,7 +3674,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) {
@@ -3722,14 +3748,17 @@ function BiometricRegistrationModal({
         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,12 +3940,26 @@ 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: [
+        faceDistance === "too-far" && "Aproxime-se mais",
+        faceDistance === "too-close" && "Rosto muito perto",
+        faceDistance === "not-centered" && "Centralize seu rosto"
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "video-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "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 }),
+            /* @__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",
@@ -4387,8 +4430,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,6 +4449,12 @@ function BiometricRegistrationModal({
           height: 100%;
           object-fit: cover;
           transform: scaleX(-1);
+          opacity: 0;
+          transition: opacity 0.4s ease;
+        }
+
+        .video-feed.ready {
+          opacity: 1;
         }
 
         .face-badge {
@@ -6835,7 +6885,7 @@ const biometricDetection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   initializeBiometricDetection,
   isAdvancedDetectionAvailable
 }, Symbol.toStringTag, { value: "Module" }));
-const VERSION = "1.17.0";
+const VERSION = "1.19.0";
 const RELEASE_DATE = "2026-03-13";
 class OnboardingCaptureModal {
   constructor(options) {