gbc-kyc-kit 2.3.5 → 2.3.6

package/dist/gbc-kyc-kit.es.js

@@ -39414,6 +39414,109 @@ const DocumentReaderController = (dataDocument, clientId, authorize, eventId, so
 const validateErrorMessageOCR = (message) => {
   return message === "Tipo de documento no v\xE1lido" || message === "Datos de la imagen no reconocidas" || message === "Dato no reconocido(Primer Nombre)" || message == "Dato no reconocido(Primer Apellido)" || message == "";
 };
+const DocumentGuide = ({
+  documentType = "id"
+}) => {
+  const getGuideDimensions = () => {
+    switch (documentType) {
+      case "passport":
+        return {
+          width: "85%",
+          height: "60%",
+          aspectRatio: "1.4"
+        };
+      case "driverLicense":
+        return {
+          width: "85%",
+          height: "55%",
+          aspectRatio: "1.6"
+        };
+      case "id":
+      default:
+        return {
+          width: "85%",
+          height: "55%",
+          aspectRatio: "1.6"
+        };
+    }
+  };
+  const dimensions = getGuideDimensions();
+  return /* @__PURE__ */ jsxs(Box$1, {
+    sx: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: dimensions.width,
+      height: dimensions.height,
+      border: "2px dashed rgba(255, 255, 255, 0.7)",
+      borderRadius: "8px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 5,
+      pointerEvents: "none"
+    },
+    children: [/* @__PURE__ */ jsx$1(Box$1, {
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "20px",
+        height: "20px",
+        borderTop: "3px solid #4CAF50",
+        borderLeft: "3px solid #4CAF50",
+        borderTopLeftRadius: "8px"
+      }
+    }), /* @__PURE__ */ jsx$1(Box$1, {
+      sx: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        width: "20px",
+        height: "20px",
+        borderTop: "3px solid #4CAF50",
+        borderRight: "3px solid #4CAF50",
+        borderTopRightRadius: "8px"
+      }
+    }), /* @__PURE__ */ jsx$1(Box$1, {
+      sx: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        width: "20px",
+        height: "20px",
+        borderBottom: "3px solid #4CAF50",
+        borderLeft: "3px solid #4CAF50",
+        borderBottomLeftRadius: "8px"
+      }
+    }), /* @__PURE__ */ jsx$1(Box$1, {
+      sx: {
+        position: "absolute",
+        bottom: 0,
+        right: 0,
+        width: "20px",
+        height: "20px",
+        borderBottom: "3px solid #4CAF50",
+        borderRight: "3px solid #4CAF50",
+        borderBottomRightRadius: "8px"
+      }
+    }), /* @__PURE__ */ jsx$1(Typography$1, {
+      variant: "body2",
+      sx: {
+        color: "white",
+        textShadow: "0px 0px 3px rgba(0,0,0,0.8)",
+        textAlign: "center",
+        padding: "0 10px",
+        backgroundColor: "rgba(0,0,0,0.5)",
+        borderRadius: "4px",
+        marginTop: "10px"
+      },
+      children: "Coloca el documento dentro del marco"
+    })]
+  });
+};
 function UploadDocument2({
   setActivateCamera,
   activateCamera,
@@ -39422,13 +39525,25 @@ function UploadDocument2({
   videoRef,
   streamRef,
   onTapToFocus,
-  title
+  title,
+  documentType = "id"
 }) {
+  const [focusing, setFocusing] = useState(false);
+  const [focusIndicator, setFocusIndicator] = useState(false);
   useEffect(() => {
     if (activateCamera && videoRef.current) {
       navigator.mediaDevices.getUserMedia({
-        video: videoConstraints || {
-          facingMode: "environment"
+        video: {
+          ...videoConstraints || {
+            facingMode: "environment"
+          },
+          advanced: [{
+            focusMode: "continuous"
+          }, {
+            exposureMode: "continuous"
+          }, {
+            whiteBalanceMode: "continuous"
+          }]
         },
         audio: false
       }).then((stream) => {
@@ -39448,6 +39563,20 @@ function UploadDocument2({
       }
     };
   }, [activateCamera, videoConstraints]);
+  const handleTapToFocus = async (e2) => {
+    setFocusing(true);
+    setFocusIndicator(true);
+    const rect = e2.currentTarget.getBoundingClientRect();
+    (e2.clientX - rect.left) / rect.width;
+    (e2.clientY - rect.top) / rect.height;
+    await onTapToFocus();
+    setTimeout(() => {
+      setFocusing(false);
+      setTimeout(() => {
+        setFocusIndicator(false);
+      }, 500);
+    }, 1e3);
+  };
   return /* @__PURE__ */ jsx$1("div", {
     className: "drag-zone",
     children: /* @__PURE__ */ jsx$1(Box$1, {
@@ -39462,8 +39591,11 @@ function UploadDocument2({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        children: activateCamera ? /* @__PURE__ */ jsx$1(Box$1, {
-          children: /* @__PURE__ */ jsx$1("video", {
+        children: activateCamera ? /* @__PURE__ */ jsxs(Box$1, {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          children: [/* @__PURE__ */ jsx$1("video", {
             ref: videoRef,
             style: {
               width: "100%",
@@ -39475,11 +39607,61 @@ function UploadDocument2({
               transform: "translate(-50%, -50%)",
               borderRadius: "5px"
             },
-            onClick: onTapToFocus,
+            onClick: handleTapToFocus,
             playsInline: true,
             muted: true,
             autoPlay: true
-          })
+          }), /* @__PURE__ */ jsx$1(DocumentGuide, {
+            documentType
+          }), focusIndicator && /* @__PURE__ */ jsx$1(Box$1, {
+            sx: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: "80px",
+              height: "80px",
+              border: "2px solid white",
+              borderRadius: "50%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              zIndex: 10,
+              animation: focusing ? "pulse 1s" : "none",
+              "@keyframes pulse": {
+                "0%": {
+                  transform: "translate(-50%, -50%) scale(1)",
+                  opacity: 1
+                },
+                "50%": {
+                  transform: "translate(-50%, -50%) scale(1.2)",
+                  opacity: 0.7
+                },
+                "100%": {
+                  transform: "translate(-50%, -50%) scale(1)",
+                  opacity: 1
+                }
+              }
+            },
+            children: focusing && /* @__PURE__ */ jsx$1(CircularProgress$1, {
+              size: 40,
+              color: "primary"
+            })
+          }), /* @__PURE__ */ jsx$1(Box$1, {
+            sx: {
+              position: "absolute",
+              bottom: "10px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              backgroundColor: "rgba(0, 0, 0, 0.6)",
+              color: "white",
+              padding: "8px 16px",
+              borderRadius: "20px",
+              fontSize: "14px",
+              zIndex: 10
+            },
+            children: "Toca la pantalla para enfocar en el documento"
+          })]
         }) : /* @__PURE__ */ jsxs(Box$1, {
           children: [/* @__PURE__ */ jsx$1(CloudUploadIcon, {}), /* @__PURE__ */ jsx$1(Typography$1, {
             variant: "h6",
@@ -39618,6 +39800,46 @@ const createCanvasFromSource = (source2) => {
   ctx == null ? void 0 : ctx.drawImage(source2, 0, 0, width2, height2);
   return { canvas, ctx };
 };
+const analyzeFocusQuality = async (imageData) => {
+  return new Promise((resolve) => {
+    if (typeof imageData === "string") {
+      const img = new Image();
+      img.onload = () => {
+        const { canvas, ctx } = createCanvasFromSource(img);
+        const result = calculateSharpness(canvas, ctx);
+        resolve(result);
+      };
+      img.src = imageData;
+    } else {
+      const result = calculateSharpness(imageData, imageData.getContext("2d"));
+      resolve(result);
+    }
+  });
+};
+const calculateSharpness = (canvas, ctx) => {
+  if (!ctx) {
+    return { isFocused: false, sharpness: 0 };
+  }
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data2 = imageData.data;
+  let sum = 0;
+  let sumSquared = 0;
+  let count = 0;
+  for (let i = 0; i < data2.length; i += 4) {
+    const luminance = (data2[i] + data2[i + 1] + data2[i + 2]) / 3;
+    sum += luminance;
+    sumSquared += luminance * luminance;
+    count++;
+  }
+  const mean = sum / count;
+  const variance = sumSquared / count - mean * mean;
+  const normalizedVariance = Math.min(variance / 1e3, 1);
+  const isFocused = normalizedVariance > 0.3;
+  return {
+    isFocused,
+    sharpness: normalizedVariance
+  };
+};
 const isLowEndDevice = () => {
   const cores = navigator.hardwareConcurrency || 2;
   const memory = navigator.deviceMemory || 2;
@@ -39681,11 +39903,12 @@ function SideDocsSelector({
   uploadDocumentByPhone,
   uploadByGallery,
   setUploadDocumentByPhone,
-  onSendSubmitDocument
+  onSendSubmitDocument,
+  documentType = "id"
 }) {
   const [value, setValue] = React$2.useState(0);
   const [showZoom, setShowZoom] = React$2.useState(false);
-  useState(0);
+  const [countAnalyzedImage, setCountAnalyzedImage] = useState(0);
   const [hideCaptureButton, setHideCaptureButton] = useState(false);
   const [startUpload, setStartUpload] = useState(false);
   const handleChange = (event, newValue) => {
@@ -39703,16 +39926,6 @@ function SideDocsSelector({
   };
   const videoRef = useRef(null);
   const streamRef = useRef(null);
-  const takeScreenshot = async (side) => {
-    const video = videoRef.current;
-    if (!video)
-      return;
-    const {
-      canvas
-    } = createCanvasFromSource(video);
-    const imageData = canvas.toDataURL("image/jpeg");
-    onUploadImage2(side, imageData);
-  };
   const handleTapToFocus = async () => {
     var _a, _b;
     if (!streamRef.current)
@@ -39722,12 +39935,12 @@ function SideDocsSelector({
     const settings = (_b = track.getSettings) == null ? void 0 : _b.call(track);
     console.log("focus capabilities:", capabilities);
     console.log("focus settings:", settings);
-    if (!capabilities || !capabilities.focusMode) {
-      console.warn("No se puede acceder a las capacidades de enfoque");
+    if (!capabilities) {
+      console.warn("No se puede acceder a las capacidades de la c\xE1mara");
       return;
     }
     try {
-      if (capabilities.focusMode.includes("continuous")) {
+      if (capabilities.focusMode && capabilities.focusMode.includes("continuous")) {
         await track.applyConstraints({
           frameRate: {
             ideal: 30
@@ -39736,7 +39949,8 @@ function SideDocsSelector({
             focusMode: "continuous"
           }]
         });
-      } else if (capabilities.focusMode.includes("single-shot")) {
+        console.log("Enfoque continuo aplicado");
+      } else if (capabilities.focusMode && capabilities.focusMode.includes("single-shot")) {
         await track.applyConstraints({
           frameRate: {
             ideal: 30
@@ -39745,23 +39959,77 @@ function SideDocsSelector({
             focusMode: "single-shot"
           }]
         });
-      } else if (capabilities.focusMode.includes("manual") && capabilities.focusDistance) {
+        console.log("Enfoque de disparo \xFAnico aplicado");
+      } else if (capabilities.focusMode && capabilities.focusMode.includes("manual") && capabilities.focusDistance) {
+        const midDistance = (capabilities.focusDistance.min + capabilities.focusDistance.max) / 2;
         await track.applyConstraints({
           frameRate: {
             ideal: 30
           },
           advanced: [{
             focusMode: "manual",
-            focusDistance: capabilities.focusDistance.min
+            focusDistance: midDistance
           }]
         });
+        console.log("Enfoque manual aplicado a distancia media");
       } else {
         console.warn("No hay modo de enfoque compatible");
       }
+      if (capabilities.exposureMode && capabilities.exposureMode.includes("continuous")) {
+        await track.applyConstraints({
+          advanced: [{
+            exposureMode: "continuous"
+          }]
+        });
+        console.log("Exposici\xF3n continua aplicada");
+      }
+      if (capabilities.whiteBalanceMode && capabilities.whiteBalanceMode.includes("continuous")) {
+        await track.applyConstraints({
+          advanced: [{
+            whiteBalanceMode: "continuous"
+          }]
+        });
+        console.log("Balance de blancos continuo aplicado");
+      }
+      setTimeout(async () => {
+        var _a2;
+        const newSettings = (_a2 = track.getSettings) == null ? void 0 : _a2.call(track);
+        console.log("Nuevos ajustes despu\xE9s del enfoque:", newSettings);
+      }, 1e3);
     } catch (err) {
       console.error("Error al aplicar constraints de enfoque:", err);
     }
   };
+  const checkFocusQuality = async (imageData) => {
+    return await analyzeFocusQuality(imageData);
+  };
+  const takeScreenshot = async (side) => {
+    const video = videoRef.current;
+    if (!video)
+      return;
+    const {
+      canvas
+    } = createCanvasFromSource(video);
+    const imageData = canvas.toDataURL("image/jpeg");
+    const {
+      isFocused,
+      sharpness
+    } = await checkFocusQuality(imageData);
+    if (isFocused && sharpness > 0.3) {
+      onUploadImage2(side, imageData);
+    } else {
+      setCountAnalyzedImage((prevState) => {
+        return prevState + 1;
+      });
+      if (countAnalyzedImage >= 1) {
+        setUploadDocumentByPhone(true);
+        setHideCaptureButton(true);
+        setCountAnalyzedImage(0);
+      } else {
+        alert("La imagen no est\xE1 bien enfocada. Por favor, toca la pantalla para enfocar en el documento y vuelve a intentarlo.");
+      }
+    }
+  };
   const fileInputRef = useRef(null);
   const handleFileChange = async (e2) => {
     const imageData = e2.target.files[0];
@@ -39900,7 +40168,8 @@ function SideDocsSelector({
               videoConstraints,
               detail: "Subir frontal del documento",
               onTapToFocus: handleTapToFocus,
-              title: "Cargar documento"
+              title: "Cargar documento",
+              documentType
             }), /* @__PURE__ */ jsxs(Box$1, {
               width: "100%",
               children: [activateCamera && !hideCaptureButton && /* @__PURE__ */ jsx$1(CustomButton, {
@@ -40015,7 +40284,8 @@ function SideDocsSelector({
               videoConstraints,
               title: "Bien ahora carguemos el reverso",
               detail: "Asegurate de que sea legible",
-              onTapToFocus: handleTapToFocus
+              onTapToFocus: handleTapToFocus,
+              documentType
             }), /* @__PURE__ */ jsxs(Box$1, {
               width: "100%",
               children: [activateCamera && !hideCaptureButton && /* @__PURE__ */ jsx$1(CustomButton, {