@neofaceid/web-sdk 1.11.1 → 1.13.2

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

@@ -2288,13 +2288,30 @@ const registerApplication = async (jwtToken, consumerId, applicationData) => {
 };
 const recordFaceVideo = async (options = {}) => {
   ensureSecureContext();
-  const { durationMs = 3e3, mimeType = "video/webm", onProgress } = options;
+  const { durationMs = 3e3, onProgress } = options;
+  const getSupportedMimeType = () => {
+    const types = [
+      "video/mp4;codecs=avc1",
+      // iOS Safari (prioritário quando disponível)
+      "video/mp4",
+      // iOS Safari fallback
+      "video/webm;codecs=vp9",
+      // Chrome/Firefox
+      "video/webm;codecs=vp8",
+      // Chrome/Firefox fallback
+      "video/webm"
+      // Android Chrome
+    ];
+    for (const type of types) {
+      if (MediaRecorder.isTypeSupported(type)) return type;
+    }
+    return "";
+  };
   return new Promise(async (resolve, reject) => {
-    let stream = null;
-    let mediaRecorder = null;
+    let cameraStream = null;
     const chunks = [];
     try {
-      stream = await navigator.mediaDevices.getUserMedia({
+      cameraStream = await navigator.mediaDevices.getUserMedia({
         video: {
           facingMode: "user",
           width: { ideal: 640 },
@@ -2302,38 +2319,33 @@ const recordFaceVideo = async (options = {}) => {
         },
         audio: false
       });
-      let selectedMimeType = mimeType;
-      const mimeTypes = ["video/webm;codecs=vp9", "video/webm;codecs=vp8", "video/webm", "video/mp4"];
-      for (const type of mimeTypes) {
-        if (MediaRecorder.isTypeSupported(type)) {
-          selectedMimeType = type;
-          break;
-        }
-      }
-      mediaRecorder = new MediaRecorder(stream, {
-        mimeType: selectedMimeType,
-        videoBitsPerSecond: 1e6
-        // 1 Mbps
-      });
-      mediaRecorder.ondataavailable = (event) => {
+      const selectedMimeType = getSupportedMimeType();
+      let recorder;
+      try {
+        recorder = selectedMimeType ? new MediaRecorder(cameraStream, { mimeType: selectedMimeType, videoBitsPerSecond: 1e6 }) : new MediaRecorder(cameraStream, { videoBitsPerSecond: 1e6 });
+      } catch {
+        recorder = new MediaRecorder(cameraStream);
+      }
+      const finalMimeType = recorder.mimeType || selectedMimeType;
+      recorder.ondataavailable = (event) => {
         if (event.data.size > 0) {
           chunks.push(event.data);
         }
       };
-      mediaRecorder.onstop = () => {
-        if (stream) {
-          stream.getTracks().forEach((track) => track.stop());
+      recorder.onstop = () => {
+        if (cameraStream) {
+          cameraStream.getTracks().forEach((track) => track.stop());
         }
-        const videoBlob = new Blob(chunks, { type: selectedMimeType });
+        const videoBlob = new Blob(chunks, { type: finalMimeType });
         resolve(videoBlob);
       };
-      mediaRecorder.onerror = (event) => {
-        if (stream) {
-          stream.getTracks().forEach((track) => track.stop());
+      recorder.onerror = (event) => {
+        if (cameraStream) {
+          cameraStream.getTracks().forEach((track) => track.stop());
         }
         reject(new NeoFaceError(`Recording error: ${event}`, ErrorType.CAPTURE_ERROR));
       };
-      mediaRecorder.start(100);
+      recorder.start(100);
       if (onProgress) {
         const progressInterval = 100;
         let elapsed = 0;
@@ -2347,13 +2359,13 @@ const recordFaceVideo = async (options = {}) => {
         }, progressInterval);
       }
       setTimeout(() => {
-        if (mediaRecorder && mediaRecorder.state === "recording") {
-          mediaRecorder.stop();
+        if (recorder && recorder.state === "recording") {
+          recorder.stop();
         }
       }, durationMs);
     } catch (error) {
-      if (stream) {
-        stream.getTracks().forEach((track) => track.stop());
+      if (cameraStream) {
+        cameraStream.getTracks().forEach((track) => track.stop());
       }
       if (error instanceof Error) {
         if (error.name === "NotAllowedError") {
@@ -2808,12 +2820,14 @@ const modalReducer = (state, action) => {
         };
       }
       return state;
+    case "CAMERA_LOADING":
+      return { status: "camera-loading" };
     case "START_PROCESSING":
       return { status: "processing" };
     case "SUCCESS":
       return { status: "success" };
     case "ERROR":
-      return { status: "error", message: action.message };
+      return { status: "error", message: action.message, retryable: action.retryable ?? true };
     case "RESET":
       return initialState;
     default:
@@ -2859,9 +2873,7 @@ function BiometricRegistrationModal({
   onClose,
   onSuccess,
   onPhotosCaptured,
-  onError,
-  useRealApi = true
-  // Sempre usa API real em produção
+  onError
 }) {
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
@@ -2870,10 +2882,12 @@ function BiometricRegistrationModal({
   const progressIntervalRef = useRef(null);
   const isCapturingRef = useRef(false);
   const currentStepRef = useRef("center");
+  const watchdogTimerRef = 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");
   useEffect(() => {
     if (state.status === "liveness") {
       const newStep = state.step;
@@ -2989,20 +3003,66 @@ function BiometricRegistrationModal({
     const loadModels = async () => {
       try {
         const MODEL_URL = "https://cdn.jsdelivr.net/npm/@vladmandic/face-api/model";
-        await Promise.all([
-          faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
-          faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL)
+        const timeout = new Promise(
+          (_, reject) => setTimeout(() => reject(new Error("Timeout ao carregar modelos")), 1e4)
+        );
+        await Promise.race([
+          Promise.all([
+            faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
+            faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL)
+          ]),
+          timeout
         ]);
       } catch (error) {
-        dispatch({ type: "ERROR", message: "Erro ao carregar modelos de IA" });
+        dispatch({
+          type: "ERROR",
+          message: "Não foi possível carregar os modelos de IA. Verifique sua conexão e tente novamente.",
+          retryable: true
+        });
       }
     };
     loadModels();
   }, []);
+  useEffect(() => {
+    return () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => {
+          track.stop();
+        });
+        streamRef.current = null;
+      }
+      if (videoRef.current) {
+        videoRef.current.srcObject = null;
+      }
+      if (watchdogTimerRef.current) {
+        clearTimeout(watchdogTimerRef.current);
+        watchdogTimerRef.current = null;
+      }
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
+    };
+  }, []);
   useEffect(() => {
     let mounted = true;
     const initCamera = async () => {
       if (state.status !== "liveness" || streamRef.current) return;
+      detectionStartedRef.current = false;
+      if (watchdogTimerRef.current) {
+        clearTimeout(watchdogTimerRef.current);
+        watchdogTimerRef.current = null;
+      }
+      watchdogTimerRef.current = window.setTimeout(() => {
+        if (!mounted) return;
+        if (detectionStartedRef.current === false) {
+          dispatch({
+            type: "ERROR",
+            message: "A câmera não respondeu a tempo. Verifique se ela está disponível e tente novamente.",
+            retryable: true
+          });
+        }
+      }, 2e4);
       try {
         const stream = await navigator.mediaDevices.getUserMedia({
           video: {
@@ -3032,13 +3092,30 @@ function BiometricRegistrationModal({
         await video.play();
       } catch (error) {
         if (!mounted) return;
-        const errorMessage = error instanceof Error ? error.message : "Erro ao acessar câmera";
-        dispatch({ type: "ERROR", message: errorMessage });
+        if (watchdogTimerRef.current) {
+          clearTimeout(watchdogTimerRef.current);
+          watchdogTimerRef.current = null;
+        }
+        let errorMessage = error instanceof Error ? error.message : "Erro ao acessar câmera";
+        if (error instanceof DOMException) {
+          if (error.name === "NotAllowedError" || error.name === "PermissionDeniedError") {
+            errorMessage = "Permissão de câmera negada. Permita o acesso à câmera nas configurações do navegador e tente novamente.";
+          } else if (error.name === "NotFoundError" || error.name === "DevicesNotFoundError") {
+            errorMessage = "Nenhuma câmera encontrada. Conecte uma câmera e tente novamente.";
+          } else if (error.name === "NotReadableError") {
+            errorMessage = "A câmera está sendo usada por outro programa. Feche-o e tente novamente.";
+          }
+        }
+        dispatch({ type: "ERROR", message: errorMessage, retryable: true });
       }
     };
     initCamera();
     return () => {
       mounted = false;
+      if (watchdogTimerRef.current) {
+        clearTimeout(watchdogTimerRef.current);
+        watchdogTimerRef.current = null;
+      }
       if (streamRef.current) {
         streamRef.current.getTracks().forEach((track) => track.stop());
         streamRef.current = null;
@@ -3118,21 +3195,59 @@ function BiometricRegistrationModal({
         requestAnimationFrame(detectFace2);
       }
     };
-    const startTimer = setTimeout(() => {
-      var _a;
-      if (isRunning && ((_a = videoRef.current) == null ? void 0 : _a.readyState) === 4) {
-        detectFace2();
-      }
-    }, 1e3);
-    return () => {
-      isRunning = false;
-      clearTimeout(startTimer);
-      if (progressIntervalRef.current) {
-        clearInterval(progressIntervalRef.current);
-        progressIntervalRef.current = null;
-      }
-      holdStartTimeRef.current = null;
+    const startDetection = () => {
+      if (!isRunning || !videoRef.current) return;
+      detectionStartedRef.current = true;
+      if (watchdogTimerRef.current) {
+        clearTimeout(watchdogTimerRef.current);
+        watchdogTimerRef.current = null;
+      }
+      detectFace2();
     };
+    const video = videoRef.current;
+    if (video && video.readyState >= 2) {
+      const startTimer = setTimeout(startDetection, 200);
+      return () => {
+        isRunning = false;
+        clearTimeout(startTimer);
+        if (progressIntervalRef.current) {
+          clearInterval(progressIntervalRef.current);
+          progressIntervalRef.current = null;
+        }
+        holdStartTimeRef.current = null;
+      };
+    } else {
+      const onCanPlay = () => {
+        if (isRunning) startDetection();
+      };
+      let pollCount = 0;
+      const MAX_POLLS = 50;
+      const pollTimer = window.setInterval(() => {
+        pollCount++;
+        if (!isRunning) {
+          clearInterval(pollTimer);
+          return;
+        }
+        if (videoRef.current && videoRef.current.readyState >= 2) {
+          clearInterval(pollTimer);
+          videoRef.current.removeEventListener("canplay", onCanPlay);
+          startDetection();
+        } else if (pollCount >= MAX_POLLS) {
+          clearInterval(pollTimer);
+        }
+      }, 300);
+      video == null ? void 0 : video.addEventListener("canplay", onCanPlay, { once: true });
+      return () => {
+        isRunning = false;
+        clearInterval(pollTimer);
+        video == null ? void 0 : video.removeEventListener("canplay", onCanPlay);
+        if (progressIntervalRef.current) {
+          clearInterval(progressIntervalRef.current);
+          progressIntervalRef.current = null;
+        }
+        holdStartTimeRef.current = null;
+      };
+    }
   }, [state.status]);
   const capturePhoto = async () => {
     if (!videoRef.current || !canvasRef.current || isCapturingRef.current) {
@@ -3287,14 +3402,37 @@ function BiometricRegistrationModal({
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Não foi possível concluir" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Não foi possível processar" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: state.message }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "button-group", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "secondary-button", onClick: () => dispatch({ type: "RESET" }), children: "Tentar Novamente" }),
+        state.retryable && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "secondary-button", onClick: () => dispatch({ type: "RESET" }), children: "Tentar Novamente" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ghost-button", onClick: onClose, children: "Cancelar" })
       ] })
     ] });
   };
+  const renderCameraLoading = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "processing-container", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "spinner-wrapper", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spinner" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spinner-ring" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: "Inicializando câmera" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Aguarde enquanto preparamos a câmera..." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "branding",
+        style: {
+          marginTop: "40px",
+          paddingTop: "24px",
+          borderTop: "1px solid rgba(255, 255, 255, 0.1)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "NeoFaceId by" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "brand-name", children: "OCTA" })
+        ]
+      }
+    )
+  ] });
   const renderSuccess = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "result-container success", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "result-icon success-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "30", cy: "30", r: "28", stroke: "currentColor", strokeWidth: "3" }),
@@ -3876,6 +4014,7 @@ function BiometricRegistrationModal({
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "modal-overlay", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "modal-content", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "close-button", onClick: onClose, children: "×" }),
       state.status === "liveness" && renderLivenessDetection(),
+      state.status === "camera-loading" && renderCameraLoading(),
       state.status === "processing" && renderProcessing(),
       state.status === "error" && renderError(),
       state.status === "success" && renderSuccess()
@@ -5194,14 +5333,15 @@ async function captureFaceSilently() {
     video.style.width = "1px";
     video.style.height = "1px";
     video.style.opacity = "0";
+    video.muted = true;
+    video.playsInline = true;
     video.setAttribute("autoplay", "");
-    video.setAttribute("muted", "");
     video.setAttribute("playsinline", "");
     const canvas = document.createElement("canvas");
     canvas.style.display = "none";
     let stream = null;
     let faceDetectionAttempts = 0;
-    const MAX_FACE_DETECTION_ATTEMPTS = 10;
+    const MAX_FACE_DETECTION_ATTEMPTS = 30;
     const cleanup = () => {
       if (stream) {
         stream.getTracks().forEach((track) => track.stop());
@@ -5215,22 +5355,27 @@ async function captureFaceSilently() {
     };
     document.body.appendChild(video);
     document.body.appendChild(canvas);
-    navigator.mediaDevices.getUserMedia({
-      video: {
-        width: { ideal: 640 },
-        height: { ideal: 480 },
-        facingMode: "user"
-      },
-      audio: false
-    }).then((mediaStream) => {
+    const tryGetUserMedia = (withConstraints) => {
+      if (withConstraints) {
+        return navigator.mediaDevices.getUserMedia({
+          video: {
+            width: { ideal: 640 },
+            height: { ideal: 480 },
+            facingMode: "user"
+          },
+          audio: false
+        });
+      }
+      return navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });
+    };
+    tryGetUserMedia(true).catch(() => tryGetUserMedia(false)).then((mediaStream) => {
       stream = mediaStream;
       video.srcObject = stream;
-      video.play();
       const tryCapture = () => {
         if (!video.videoWidth || !video.videoHeight) {
           if (faceDetectionAttempts < MAX_FACE_DETECTION_ATTEMPTS) {
             faceDetectionAttempts++;
-            setTimeout(tryCapture, 100);
+            setTimeout(tryCapture, 150);
             return;
           }
           cleanup();
@@ -5260,7 +5405,7 @@ async function captureFaceSilently() {
         detectFace2().then((hasFace) => {
           if (!hasFace && faceDetectionAttempts < MAX_FACE_DETECTION_ATTEMPTS) {
             faceDetectionAttempts++;
-            setTimeout(tryCapture, 100);
+            setTimeout(tryCapture, 150);
             return;
           }
           ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
@@ -5278,9 +5423,26 @@ async function captureFaceSilently() {
           );
         });
       };
-      video.onloadedmetadata = () => {
-        setTimeout(tryCapture, CAMERA_READY_DELAY);
-      };
+      const playPromise = video.play();
+      if (playPromise !== void 0) {
+        playPromise.then(() => {
+          if (video.videoWidth && video.videoHeight) {
+            setTimeout(tryCapture, CAMERA_READY_DELAY);
+          } else {
+            video.onloadedmetadata = () => setTimeout(tryCapture, CAMERA_READY_DELAY);
+            setTimeout(() => {
+              if (video.videoWidth && video.videoHeight) {
+                tryCapture();
+              }
+            }, 1500);
+          }
+        }).catch((err) => {
+          cleanup();
+          reject(new NeoFaceError("Erro ao reproduzir câmera: " + err.message, ErrorType.CAMERA_ERROR));
+        });
+      } else {
+        video.onloadedmetadata = () => setTimeout(tryCapture, CAMERA_READY_DELAY);
+      }
       video.onerror = () => {
         cleanup();
         reject(new NeoFaceError("Erro ao acessar câmera", ErrorType.CAMERA_ERROR));
@@ -5354,27 +5516,55 @@ async function attemptLogin(applicationToken, overlay, fastMode = false, isRetry
   video.style.width = "1px";
   video.style.height = "1px";
   video.style.opacity = "0";
+  video.muted = true;
+  video.playsInline = true;
   video.setAttribute("autoplay", "");
-  video.setAttribute("muted", "");
   video.setAttribute("playsinline", "");
   document.body.appendChild(video);
   let stream = null;
   try {
-    stream = await navigator.mediaDevices.getUserMedia({
-      video: {
-        width: { ideal: 640 },
-        height: { ideal: 480 },
-        facingMode: "user"
-      },
-      audio: false
-    });
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: 640 },
+          height: { ideal: 480 },
+          facingMode: "user"
+        },
+        audio: false
+      });
+    } catch {
+      stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "user" },
+        audio: false
+      });
+    }
     video.srcObject = stream;
+    await new Promise((resolve) => {
+      if (video.readyState >= 1) {
+        resolve();
+      } else {
+        const handler = () => {
+          video.removeEventListener("loadedmetadata", handler);
+          resolve();
+        };
+        video.addEventListener("loadedmetadata", handler);
+        setTimeout(resolve, 2e3);
+      }
+    });
     await video.play();
     await new Promise((resolve) => {
-      if (video.readyState >= 2) {
-        resolve(void 0);
+      if (video.videoWidth && video.videoHeight) {
+        resolve();
       } else {
-        video.onloadedmetadata = () => resolve(void 0);
+        const checkSize = () => {
+          if (video.videoWidth && video.videoHeight) {
+            resolve();
+          } else {
+            setTimeout(checkSize, 100);
+          }
+        };
+        setTimeout(resolve, 3e3);
+        checkSize();
       }
     });
     overlay.updateStatus("detecting");
@@ -5844,8 +6034,8 @@ const biometricDetection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   initializeBiometricDetection,
   isAdvancedDetectionAvailable
 }, Symbol.toStringTag, { value: "Module" }));
-const VERSION = "1.11.1";
-const RELEASE_DATE = "2026-02-12";
+const VERSION = "1.13.2";
+const RELEASE_DATE = "2026-02-21";
 class OnboardingCaptureModal {
   constructor(options) {
     __publicField(this, "overlay", null);
@@ -5896,7 +6086,7 @@ class OnboardingCaptureModal {
         <div class="neofaceid-modal-body">
           <p class="neofaceid-subtitle">${this.subtitle ?? "Vamos capturar sua face e documento"}</p>
           <div class="neofaceid-camera-container">
-            <video class="neofaceid-video" autoplay playsinline></video>
+            <video class="neofaceid-video" autoplay muted playsinline></video>
             <canvas class="neofaceid-canvas"></canvas>
             <div class="neofaceid-overlay">
               <div class="neofaceid-frame"></div>
@@ -5947,12 +6137,20 @@ class OnboardingCaptureModal {
    * Inicia a câmera do usuário com resolução adequada.
    */
   async startCamera() {
-    const constraints = {
-      video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } },
-      audio: false
-    };
-    this.stream = await navigator.mediaDevices.getUserMedia(constraints);
     if (!this.video) throw new Error("Elemento de vídeo não encontrado");
+    this.video.muted = true;
+    this.video.playsInline = true;
+    try {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } },
+        audio: false
+      });
+    } catch {
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "user" },
+        audio: false
+      });
+    }
     this.video.srcObject = this.stream;
     await this.video.play();
   }
@@ -6071,11 +6269,9 @@ class NeoFaceID {
    */
   constructor(config) {
     __publicField(this, "appToken");
-    __publicField(this, "baseUrl");
     __publicField(this, "signature");
     __publicField(this, "sessionData");
     this.appToken = config.appToken;
-    this.baseUrl = config.baseUrl || getBaseUrl();
     this.signature = config.signature;
     this.sessionData = config.sessionData;
     if (this.signature && !this.validateSignatureFormat(this.signature)) {
@@ -6164,7 +6360,7 @@ class NeoFaceID {
    * ```
    */
   async loginRecognition(options) {
-    const { biometricData, typeOfIdentification, purpose, confidenceThreshold = 0.8 } = options;
+    const { biometricData, purpose, confidenceThreshold = 0.8 } = options;
     const imageBlobs = Array.isArray(biometricData) ? biometricData : [biometricData];
     if (imageBlobs.length === 0) {
       throw new NeoFaceError(
@@ -6634,7 +6830,7 @@ class DocumentCaptureModal {
       
       <div class="neoface-doc-body">
         <div class="neoface-doc-camera-container">
-          <video class="neoface-doc-video" autoplay playsinline></video>
+          <video class="neoface-doc-video" autoplay muted playsinline></video>
           <canvas class="neoface-doc-canvas"></canvas>
           
           <div class="neoface-doc-guide">
@@ -6886,6 +7082,8 @@ class DocumentCaptureModal {
       this.video = (_a = this.overlay) == null ? void 0 : _a.querySelector(".neoface-doc-video");
       this.canvas = (_b = this.overlay) == null ? void 0 : _b.querySelector(".neoface-doc-canvas");
       if (this.video) {
+        this.video.muted = true;
+        this.video.playsInline = true;
         this.video.srcObject = this.stream;
         await this.video.play();
       }
@@ -7507,7 +7705,12 @@ function startBiometricRegistration(personData, applicationToken, callbacks, opt
   const container = document.createElement("div");
   container.id = "neoface-biometric-registration-container";
   document.body.appendChild(container);
+  let rootRef = null;
   const cleanup = () => {
+    if (rootRef) {
+      rootRef.unmount();
+      rootRef = null;
+    }
     if (document.body.contains(container)) {
       document.body.removeChild(container);
     }
@@ -7517,7 +7720,6 @@ function startBiometricRegistration(personData, applicationToken, callbacks, opt
       personData,
       applicationToken,
       useRealApi: (options == null ? void 0 : options.useRealApi) ?? true,
-      // Sempre usa API real em produção
       onClose: cleanup,
       onSuccess: (result) => {
         cleanup();
@@ -7528,8 +7730,8 @@ function startBiometricRegistration(personData, applicationToken, callbacks, opt
         callbacks.onError("BIOMETRIC_REGISTRATION_ERROR", error);
       }
     });
-    const root = clientExports.createRoot(container);
-    root.render(modalElement);
+    rootRef = clientExports.createRoot(container);
+    rootRef.render(modalElement);
   }).catch((error) => {
     cleanup();
     callbacks.onError("TOKEN_VALIDATION_ERROR", error.message || "Failed to validate token");
@@ -7539,16 +7741,29 @@ function startLivenessCapture(applicationToken, callbacks) {
   const container = document.createElement("div");
   container.id = "neoface-liveness-capture-container";
   document.body.appendChild(container);
+  let completed = false;
+  let rootRef = null;
   const cleanup = () => {
+    if (rootRef) {
+      rootRef.unmount();
+      rootRef = null;
+    }
     if (document.body.contains(container)) {
       document.body.removeChild(container);
     }
   };
+  const handleClose = () => {
+    cleanup();
+    if (!completed && callbacks.onCancel) {
+      callbacks.onCancel();
+    }
+  };
   validateToken(applicationToken).then(() => {
     const modalElement = React.createElement(BiometricRegistrationModal, {
       applicationToken,
-      onClose: cleanup,
+      onClose: handleClose,
       onPhotosCaptured: (photos) => {
+        completed = true;
         callbacks.onSuccess(photos);
       },
       onError: (error) => {
@@ -7556,8 +7771,8 @@ function startLivenessCapture(applicationToken, callbacks) {
         callbacks.onError("LIVENESS_CAPTURE_ERROR", error);
       }
     });
-    const root = clientExports.createRoot(container);
-    root.render(modalElement);
+    rootRef = clientExports.createRoot(container);
+    rootRef.render(modalElement);
   }).catch((error) => {
     cleanup();
     callbacks.onError("TOKEN_VALIDATION_ERROR", error.message || "Failed to validate token");