@neofaceid/web-sdk 1.25.5 → 1.25.7

package/dist/index.d.ts

@@ -496,6 +496,7 @@ export declare const ENVIRONMENT_URLS: Record<Environment, string>;
  */
 export declare enum ErrorType {
     NETWORK = "NetworkError",
+    /** @deprecated Use `ErrorType.NETWORK`. Mantido para compatibilidade com consumidores existentes do SDK. */
     NETWORK_ERROR = "NetworkError",
     INVALID_TOKEN = "InvalidTokenError",
     RECOGNITION_FAILED = "RecognitionFailedError",
@@ -1362,6 +1363,6 @@ export declare const validateToken: (applicationToken: string) => Promise<boolea
  * MINOR: Incrementado quando adicionamos funcionalidades mantendo compatibilidade
  * PATCH: Incrementado quando corrigimos bugs mantendo compatibilidade
  */
-export declare const VERSION = "1.25.5";
+export declare const VERSION = "1.25.7";
 
 export { }

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

@@ -5337,10 +5337,14 @@ function init(options = {}) {
   if (applicationToken) {
     globalConfig.applicationToken = applicationToken;
   } else if (applicationToken === "") {
-    console.warn("[NeoFaceID SDK] applicationToken vazio em init() — 401 esperado em chamadas autenticadas.");
+    console.warn(
+      "[NeoFaceID SDK] applicationToken vazio em init() — 401 esperado em chamadas autenticadas."
+    );
   }
   globalConfig.initialized = true;
-  console.log(`[NeoFaceID SDK] Inicializado - Ambiente: ${globalConfig.environment}, URL: ${globalConfig.baseUrl}`);
+  console.log(
+    `[NeoFaceID SDK] Inicializado - Ambiente: ${globalConfig.environment}, URL: ${globalConfig.baseUrl}`
+  );
 }
 function getBaseUrl() {
   if (!globalConfig.initialized) {
@@ -5410,8 +5414,8 @@ const compressDocumentImage = async (imageBlob) => new Promise((resolve, reject)
   const img = new Image();
   img.onload = () => {
     const MAX_SIZE = 1280;
-    let width = img.width;
-    let height = img.height;
+    let { width } = img;
+    let { height } = img;
     if (width > height && width > MAX_SIZE) {
       height = height * MAX_SIZE / width;
       width = MAX_SIZE;
@@ -6030,7 +6034,9 @@ const registerPersonWithoutFace = async (personData, applicationToken, options)
       ];
     }
     if (!applicationToken) {
-      console.warn("[NeoFaceID SDK] registerPersonWithoutFace sem applicationToken — 401 esperado.");
+      console.warn(
+        "[NeoFaceID SDK] registerPersonWithoutFace sem applicationToken — 401 esperado."
+      );
     }
     const response = await fetch(`${getApiBaseUrl()}/api/v1/signup/donor/`, {
       method: "POST",
@@ -6167,7 +6173,9 @@ const registerPersonWithBiometric = async (personData, facePhotos, applicationTo
       ];
     }
     if (!applicationToken) {
-      console.warn("[NeoFaceID SDK] registerPersonWithBiometric sem applicationToken — 401 esperado.");
+      console.warn(
+        "[NeoFaceID SDK] registerPersonWithBiometric sem applicationToken — 401 esperado."
+      );
     }
     const response = await fetch(`${getApiBaseUrl()}/api/v1/signup/donor/`, {
       method: "POST",
@@ -6709,18 +6717,16 @@ const startProofOfLife = async (videoBase64, applicationToken) => {
     throw new NeoFaceError("Unknown error occurred", ErrorType.NETWORK_ERROR);
   }
 };
-const videoToBase64 = async (videoBlob) => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const result = reader.result;
-      const base642 = result.includes(",") ? result.split(",")[1] : result;
-      resolve(base642);
-    };
-    reader.onerror = () => reject(new NeoFaceError("Failed to convert video to base64", ErrorType.CAPTURE_ERROR));
-    reader.readAsDataURL(videoBlob);
-  });
-};
+const videoToBase64 = async (videoBlob) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => {
+    const result = reader.result;
+    const base642 = result.includes(",") ? result.split(",")[1] : result;
+    resolve(base642);
+  };
+  reader.onerror = () => reject(new NeoFaceError("Failed to convert video to base64", ErrorType.CAPTURE_ERROR));
+  reader.readAsDataURL(videoBlob);
+});
 const blobToBase64 = (blob) => new Promise((resolve, reject) => {
   const reader = new FileReader();
   reader.onload = () => {
@@ -6786,7 +6792,9 @@ const registerDocumentByImage = async (personId, jwtToken, images) => {
 const getTaskStatus = async (taskId, applicationToken) => {
   const controller = createTimeoutController();
   {
-    console.warn("[NeoFaceID SDK] getTaskStatus sem applicationToken — /tasks/status/ vai responder 401.");
+    console.warn(
+      "[NeoFaceID SDK] getTaskStatus sem applicationToken — /tasks/status/ vai responder 401."
+    );
   }
   try {
     const response = await fetch(`${getApiBaseUrl()}/api/v1/tasks/status/?task_id=${taskId}`, {
@@ -6825,7 +6833,7 @@ const identifyPersonAsync = async (image, applicationToken, options = {}) => {
       person: initialResponse.person
     };
   }
-  const taskId = initialResponse.taskId;
+  const { taskId } = initialResponse;
   if (!taskId) {
     return { personFound: false };
   }
@@ -7659,7 +7667,9 @@ function BiometricRegistrationModal({
   const captureStateRef = useRef(null);
   const [state, dispatch] = useReducer(modalReducer, void 0, createInitialState);
   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") {
@@ -7790,15 +7800,13 @@ function BiometricRegistrationModal({
           }
         }, 50);
       }
-    } else {
-      if (holdStartTimeRef.current) {
-        holdStartTimeRef.current = null;
-        if (progressIntervalRef.current) {
-          clearInterval(progressIntervalRef.current);
-          progressIntervalRef.current = null;
-        }
-        dispatch({ type: "UPDATE_PROGRESS", progress: 0 });
+    } else if (holdStartTimeRef.current) {
+      holdStartTimeRef.current = null;
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
       }
+      dispatch({ type: "UPDATE_PROGRESS", progress: 0 });
     }
   };
   useEffect(() => {
@@ -7825,8 +7833,8 @@ function BiometricRegistrationModal({
     };
     loadModels();
   }, []);
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (streamRef.current) {
         streamRef.current.getTracks().forEach((track) => {
           track.stop();
@@ -7848,8 +7856,9 @@ function BiometricRegistrationModal({
         clearTimeout(stepTimeoutTimerRef.current);
         stepTimeoutTimerRef.current = null;
       }
-    };
-  }, []);
+    },
+    []
+  );
   useEffect(() => {
     let mounted = true;
     const initCamera = async () => {
@@ -7991,15 +8000,13 @@ function BiometricRegistrationModal({
             );
             manageHoldAndCapture(positionCorrect);
           }
-        } else {
-          if (holdStartTimeRef.current) {
-            holdStartTimeRef.current = null;
-            if (progressIntervalRef.current) {
-              clearInterval(progressIntervalRef.current);
-              progressIntervalRef.current = null;
-            }
-            dispatch({ type: "UPDATE_PROGRESS", progress: 0 });
+        } else if (holdStartTimeRef.current) {
+          holdStartTimeRef.current = null;
+          if (progressIntervalRef.current) {
+            clearInterval(progressIntervalRef.current);
+            progressIntervalRef.current = null;
           }
+          dispatch({ type: "UPDATE_PROGRESS", progress: 0 });
         }
       } catch (error) {
       }
@@ -8028,38 +8035,37 @@ function BiometricRegistrationModal({
         }
         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;
-      };
     }
+    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) {
@@ -8163,7 +8169,7 @@ function BiometricRegistrationModal({
   const renderLivenessDetection = () => {
     if (state.status !== "liveness") return null;
     const progress = `${state.currentStepIndex + 1}/${state.stepSequence.length - 1}`;
-    const stepProgress = state.stepProgress;
+    const { stepProgress } = state;
     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: `status-badge ${faceDistance === "not-centered" ? "warning" : "error"}`, children: [
@@ -8192,7 +8198,14 @@ function BiometricRegistrationModal({
         stepProgress > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "progress-bar", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "progress-fill", style: { width: `${stepProgress}%` } }) })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "branding-small", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "brand-logo-small", style: { display: "inline-flex", width: 18, height: 18, color: "currentColor" }, dangerouslySetInnerHTML: { __html: NEOFACEID_MARK_MONO_SVG } }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
+          {
+            className: "brand-logo-small",
+            style: { display: "inline-flex", width: 18, height: 18, color: "currentColor" },
+            dangerouslySetInnerHTML: { __html: NEOFACEID_MARK_MONO_SVG }
+          }
+        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "NeoFaceId by" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "brand-name", children: "OCTA" })
       ] })
@@ -8239,8 +8252,16 @@ function BiometricRegistrationModal({
       /* @__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: [
-        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" })
+        state.retryable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "secondary-button",
+            onClick: () => dispatch({ type: "RESET" }),
+            children: "Tentar Novamente"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ghost-button", onClick: onClose, children: "Cancelar" })
       ] })
     ] });
   };
@@ -8283,7 +8304,7 @@ function BiometricRegistrationModal({
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: onPhotosCaptured ? "Captura concluída!" : "Verificação concluída!" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: onPhotosCaptured ? "Suas capturas faciais foram realizadas" : "Sua biometria foi registrada com sucesso" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "primary-button", onClick: onClose, children: "Continuar" })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "primary-button", onClick: onClose, children: "Continuar" })
   ] });
   const renderDuplicate = () => {
     if (state.status !== "duplicate") return null;
@@ -8295,6 +8316,7 @@ function BiometricRegistrationModal({
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
+            type: "button",
             className: "primary-button",
             onClick: () => {
               onClose();
@@ -8306,6 +8328,7 @@ function BiometricRegistrationModal({
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
+            type: "button",
             className: "secondary-button",
             style: { marginTop: "12px" },
             onClick: () => {
@@ -8320,6 +8343,7 @@ function BiometricRegistrationModal({
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
+              type: "button",
               className: "ghost-button",
               onClick: () => window.open("https://support.neofaceid.com", "_blank"),
               children: "Falar com Suporte"
@@ -8987,7 +9011,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: "×" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "close-button", onClick: onClose, children: "×" }),
       state.status === "liveness" && renderLivenessDetection(),
       state.status === "camera-loading" && renderCameraLoading(),
       state.status === "processing" && renderProcessing(),
@@ -9253,7 +9277,7 @@ class BiometricCaptureModal {
     } catch (error) {
       this.options.onError(
         new NeoFaceError(
-          "Erro ao inicializar câmera: " + error.message,
+          `Erro ao inicializar câmera: ${error.message}`,
           ErrorType.CAMERA_ERROR
         )
       );
@@ -9335,7 +9359,7 @@ class BiometricCaptureModal {
       this.canvas.width = this.video.videoWidth;
       this.canvas.height = this.video.videoHeight;
     } catch (error) {
-      throw new Error("Não foi possível acessar a câmera: " + error.message);
+      throw new Error(`Não foi possível acessar a câmera: ${error.message}`);
     }
   }
   /**
@@ -9389,13 +9413,13 @@ class BiometricCaptureModal {
       const imageData = this.canvas.toDataURL("image/jpeg", 0.8);
       const base64Data = imageData.split(",")[1];
       const dataUrl = `data:image/jpeg;base64,${base64Data}`;
-      let detectedType = this.options.mode === "auto" ? await this.detectBiometricType(base64Data) : this.options.mode;
+      const detectedType = this.options.mode === "auto" ? await this.detectBiometricType(base64Data) : this.options.mode;
       this.close();
       this.options.onSuccess(dataUrl, detectedType);
     } catch (error) {
       this.options.onError(
         new NeoFaceError(
-          "Erro ao capturar imagem: " + error.message,
+          `Erro ao capturar imagem: ${error.message}`,
           ErrorType.CAPTURE_ERROR
         )
       );
@@ -10699,7 +10723,7 @@ async function captureFaceSilently() {
           cleanup();
           reject(
             new NeoFaceError(
-              "Erro ao reproduzir câmera: " + err.message,
+              `Erro ao reproduzir câmera: ${err.message}`,
               ErrorType.CAMERA_ERROR
             )
           );
@@ -10715,7 +10739,7 @@ async function captureFaceSilently() {
       cleanup();
       reject(
         new NeoFaceError(
-          "Não foi possível acessar a câmera: " + error.message,
+          `Não foi possível acessar a câmera: ${error.message}`,
           ErrorType.CAMERA_ERROR
         )
       );
@@ -11216,9 +11240,12 @@ async function detectBiometricType(imageData) {
 async function detectFace(img) {
   try {
     if (typeof window !== "undefined" && window.faceapi) {
-      const faceapi2 = window.faceapi;
+      const { faceapi: faceapi2 } = window;
       await loadFaceApiModels();
-      const tinyOptions = new faceapi2.TinyFaceDetectorOptions({ inputSize: 320, scoreThreshold: 0.5 });
+      const tinyOptions = new faceapi2.TinyFaceDetectorOptions({
+        inputSize: 320,
+        scoreThreshold: 0.5
+      });
       const detections = await faceapi2.detectAllFaces(img, tinyOptions).withFaceLandmarks();
       if (detections && detections.length > 0) {
         const bestDetection = detections.reduce(
@@ -11317,7 +11344,7 @@ async function loadFaceApiModels() {
   if (typeof window === "undefined" || !window.faceapi) {
     return;
   }
-  const faceapi2 = window.faceapi;
+  const { faceapi: faceapi2 } = window;
   if (faceapi2.nets.tinyFaceDetector.isLoaded) {
     return;
   }
@@ -11348,7 +11375,7 @@ const biometricDetection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   initializeBiometricDetection,
   isAdvancedDetectionAvailable
 }, Symbol.toStringTag, { value: "Module" }));
-const VERSION = "1.25.5";
+const VERSION = "1.25.7";
 const RELEASE_DATE = "2026-08-29";
 class OnboardingCaptureModal {
   constructor(options) {
@@ -11376,7 +11403,10 @@ class OnboardingCaptureModal {
     await this.runFaceCaptureCountdown();
     this.faceBlob = await this.captureFrame();
     this.step = "document";
-    this.updateTexts("Captura do Documento", 'Posicione seu documento visível e clique em "Capturar"');
+    this.updateTexts(
+      "Captura do Documento",
+      'Posicione seu documento visível e clique em "Capturar"'
+    );
     await this.waitForUserCaptureClick();
     this.documentBlob = await this.captureFrame();
     await this.close();
@@ -11474,7 +11504,9 @@ class OnboardingCaptureModal {
   async runFaceCaptureCountdown() {
     if (!this.overlay) return;
     const countdownEl = this.overlay.querySelector(".neofaceid-countdown");
-    const countdownNumberEl = this.overlay.querySelector(".neofaceid-countdown-number");
+    const countdownNumberEl = this.overlay.querySelector(
+      ".neofaceid-countdown-number"
+    );
     const statusText = this.overlay.querySelector(".neofaceid-status-text");
     countdownEl.style.display = "flex";
     statusText.textContent = "Prepare-se! Capturando seu rosto...";
@@ -11521,7 +11553,11 @@ class OnboardingCaptureModal {
     this.canvas.height = this.video.videoHeight;
     ctx.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
     const blob = await new Promise((resolve, reject) => {
-      this.canvas.toBlob((b) => b ? resolve(b) : reject(new Error("Falha ao gerar imagem")), "image/jpeg", 0.92);
+      this.canvas.toBlob(
+        (b) => b ? resolve(b) : reject(new Error("Falha ao gerar imagem")),
+        "image/jpeg",
+        0.92
+      );
     });
     return blob;
   }
@@ -12151,13 +12187,15 @@ class DocumentCaptureModal {
       
       <div class="neoface-doc-body">
         <div class="neoface-doc-select-grid">
-          ${Object.entries(DOCUMENT_INFO).filter(([type]) => type !== "CPF").map(([type, info]) => `
+          ${Object.entries(DOCUMENT_INFO).filter(([type]) => type !== "CPF").map(
+      ([type, info]) => `
             <button class="neoface-doc-select-option" data-type="${type}">
               <span class="neoface-doc-select-icon">${info.icon}</span>
               <span class="neoface-doc-select-name">${info.name}</span>
               <svg class="neoface-doc-select-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
             </button>
-          `).join("")}
+          `
+    ).join("")}
         </div>
         
         <div class="neoface-doc-tips">
@@ -12375,8 +12413,8 @@ class DocumentCaptureModal {
       const img = new Image();
       img.onload = () => {
         const MAX_SIZE = 1280;
-        let width = img.width;
-        let height = img.height;
+        let { width } = img;
+        let { height } = img;
         if (width > height && width > MAX_SIZE) {
           height = height * MAX_SIZE / width;
           width = MAX_SIZE;
@@ -12396,7 +12434,9 @@ class DocumentCaptureModal {
         canvas.toBlob(
           (blob) => {
             if (blob) {
-              console.log(`[DocumentCapture] Compressed image from ${(file.size / 1024).toFixed(0)}KB to ${(blob.size / 1024).toFixed(0)}KB`);
+              console.log(
+                `[DocumentCapture] Compressed image from ${(file.size / 1024).toFixed(0)}KB to ${(blob.size / 1024).toFixed(0)}KB`
+              );
               resolve(blob);
             } else {
               reject(new Error("Failed to compress image"));
@@ -12417,7 +12457,9 @@ class DocumentCaptureModal {
     const retakeBtn = (_b = this.overlay) == null ? void 0 : _b.querySelector(".neoface-doc-retake-btn");
     confirmBtn == null ? void 0 : confirmBtn.addEventListener("click", () => this.handleConfirm());
     retakeBtn == null ? void 0 : retakeBtn.addEventListener("click", () => this.handleRetake());
-    const previewImg = (_c = this.overlay) == null ? void 0 : _c.querySelector(".neoface-doc-preview-current");
+    const previewImg = (_c = this.overlay) == null ? void 0 : _c.querySelector(
+      ".neoface-doc-preview-current"
+    );
     if (previewImg) {
       const blob = this.currentStep === "preview-front" ? this.frontBlob : this.backBlob;
       if (blob) previewImg.src = URL.createObjectURL(blob);
@@ -12486,8 +12528,8 @@ class DocumentCaptureModal {
     if (loading) loading.style.display = "flex";
     const ctx = this.canvas.getContext("2d");
     if (!ctx) return;
-    const videoWidth = this.video.videoWidth;
-    const videoHeight = this.video.videoHeight;
+    const { videoWidth } = this.video;
+    const { videoHeight } = this.video;
     const frameWidthPercent = 0.75;
     const frameHeightPercent = 0.65;
     const cropWidth = Math.floor(videoWidth * frameWidthPercent);