gbc-kyc-kit 2.2.2 → 2.2.4

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

@@ -18487,7 +18487,7 @@ function CustomButton({
   href
 }) {
   return /* @__PURE__ */ jsx$1("div", {
-    className: `button-container m-0 mt-2`,
+    className: `button-container m-0 mt-2 testing`,
     children: /* @__PURE__ */ jsx$1("button", {
       type,
       name,
@@ -39051,6 +39051,14 @@ const DocumentReaderController = (dataDocument, clientId, authorize, eventId, so
     setBase64(newImage);
     setActivateCamera(false);
   };
+  const onUploadImage2 = async (side, image) => {
+    const newImage = Object.assign(base64, {
+      [side]: image
+    });
+    console.log(newImage);
+    setBase64(newImage);
+    setActivateCamera(false);
+  };
   const usePortrait = () => {
     const [isPortrait2, setIsPortrait] = useState(window.innerHeight > window.innerWidth);
     useEffect(() => {
@@ -39103,26 +39111,53 @@ const DocumentReaderController = (dataDocument, clientId, authorize, eventId, so
     webcamRef,
     activateCamera,
     setActivateCamera,
-    videoConstraints
+    videoConstraints,
+    onUploadImage2
   };
 };
 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 == "";
 };
-function UploadDocument({
+function UploadDocument2({
   setActivateCamera,
   activateCamera,
-  webcamRef,
-  Webcam: Webcam2,
   videoConstraints,
   base64,
-  detail
+  detail,
+  videoRef,
+  streamRef,
+  onTapToFocus
 }) {
+  console.log(videoConstraints);
+  useEffect(() => {
+    if (activateCamera && videoRef.current) {
+      navigator.mediaDevices.getUserMedia({
+        video: videoConstraints || {
+          facingMode: "environment"
+        },
+        audio: false
+      }).then((stream) => {
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream;
+          videoRef.current.play();
+          streamRef.current = stream;
+        }
+      }).catch((err) => {
+        console.error("Error al acceder a la c\xE1mara:", err);
+      });
+    }
+    return () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+      }
+    };
+  }, [activateCamera, videoConstraints]);
   return /* @__PURE__ */ jsx$1("div", {
     className: "drag-zone",
     children: /* @__PURE__ */ jsx$1(Box$1, {
       className: "drag-and-drop-container",
-      children: /* @__PURE__ */ jsxs(Box$1, {
+      children: /* @__PURE__ */ jsx$1(Box$1, {
         onClick: () => setActivateCamera(true),
         position: "relative",
         zIndex: 1,
@@ -39132,12 +39167,8 @@ function UploadDocument({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        children: [activateCamera && /* @__PURE__ */ jsx$1(Webcam2, {
-          ref: webcamRef,
-          videoConstraints,
-          screenshotFormat: "image/jpeg",
-          forceScreenshotSourceSize: true,
-          audio: false,
+        children: activateCamera ? /* @__PURE__ */ jsx$1("video", {
+          ref: videoRef,
           style: {
             width: "100%",
             height: "100%",
@@ -39147,8 +39178,12 @@ function UploadDocument({
             left: "50%",
             transform: "translate(-50%, -50%)",
             borderRadius: "5px"
-          }
-        }), !activateCamera && /* @__PURE__ */ jsxs(Box$1, {
+          },
+          onClick: onTapToFocus,
+          playsInline: true,
+          muted: true,
+          autoPlay: true
+        }) : /* @__PURE__ */ jsxs(Box$1, {
           children: [/* @__PURE__ */ jsx$1(CloudUploadIcon, {}), /* @__PURE__ */ jsx$1(Typography$1, {
             variant: "h6",
             className: "title",
@@ -39158,7 +39193,7 @@ function UploadDocument({
             variant: "body2",
             children: detail
           })]
-        })]
+        })
       })
     })
   });
@@ -39179,6 +39214,7 @@ function CustomTabPanel(props) {
     onUploadImage,
     dualModeRequired,
     status,
+    onUploadImage2,
     ...other
   } = props;
   return /* @__PURE__ */ jsx$1("div", {
@@ -39213,7 +39249,8 @@ function SideDocsSelector({
   videoConstraints,
   onUploadImage,
   dualModeRequired,
-  status
+  status,
+  onUploadImage2
 }) {
   const [value, setValue] = React$2.useState(0);
   const [showZoom, setShowZoom] = React$2.useState(false);
@@ -39230,6 +39267,63 @@ function SideDocsSelector({
   const toggleZoom = () => {
     setShowZoom(!showZoom);
   };
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const takeScreenshot = (side) => {
+    const video = videoRef.current;
+    if (!video)
+      return;
+    const canvas = document.createElement("canvas");
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext("2d");
+    ctx && ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const imageData = canvas.toDataURL("image/jpeg");
+    onUploadImage2(side, imageData);
+  };
+  const handleTapToFocus = async () => {
+    var _a, _b;
+    if (!streamRef.current)
+      return;
+    const [track] = streamRef.current.getVideoTracks();
+    const capabilities = (_a = track.getCapabilities) == null ? void 0 : _a.call(track);
+    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");
+      return;
+    }
+    try {
+      if (capabilities.focusMode.includes("continuous")) {
+        await track.applyConstraints({
+          advanced: [{
+            focusMode: "continuous"
+          }]
+        });
+        console.log("Reiniciado enfoque autom\xE1tico (continuous)");
+      } else if (capabilities.focusMode.includes("single-shot")) {
+        await track.applyConstraints({
+          advanced: [{
+            focusMode: "single-shot"
+          }]
+        });
+        console.log("Aplicado enfoque tipo single-shot");
+      } else if (capabilities.focusMode.includes("manual") && capabilities.focusDistance) {
+        await track.applyConstraints({
+          advanced: [{
+            focusMode: "manual",
+            focusDistance: capabilities.focusDistance.min
+          }]
+        });
+        console.log("Aplicado enfoque manual al m\xEDnimo");
+      } else {
+        console.warn("No hay modo de enfoque compatible");
+      }
+    } catch (err) {
+      console.error("Error al aplicar constraints de enfoque:", err);
+    }
+  };
   return /* @__PURE__ */ jsxs(Box$1, {
     sx: {
       width: "100%"
@@ -39278,7 +39372,8 @@ function SideDocsSelector({
                 alt: "thumbnail",
                 style: {
                   width: "100%",
-                  height: "100%"
+                  height: "100%",
+                  objectFit: "cover"
                 }
               }), /* @__PURE__ */ jsxs(Box$1, {
                 style: {
@@ -39334,19 +39429,20 @@ function SideDocsSelector({
                   })
                 })]
               })]
-            }) : /* @__PURE__ */ jsx$1(UploadDocument, {
+            }) : /* @__PURE__ */ jsx$1(UploadDocument2, {
+              videoRef,
+              streamRef,
               setActivateCamera,
               activateCamera,
-              webcamRef,
-              Webcam: Webcam2,
               videoConstraints,
               base64,
-              detail: "Subir frontal del documento"
+              detail: "Subir frontal del documento",
+              onTapToFocus: handleTapToFocus
             }), /* @__PURE__ */ jsxs(Box$1, {
               width: "100%",
               children: [activateCamera && /* @__PURE__ */ jsx$1(CustomButton, {
                 type: "button",
-                onClick: () => onUploadImage("firstImage"),
+                onClick: () => takeScreenshot("firstImage"),
                 children: "Capturar"
               }), !status && Object.keys(base64).length > 0 && !activateCamera && lib$1(status) && (!dualModeRequired && base64.firstImage || dualModeRequired && base64.firstImage && base64.secondImage) && /* @__PURE__ */ jsx$1(CustomButton, {
                 type: "submit",
@@ -39383,7 +39479,8 @@ function SideDocsSelector({
                 alt: "thumbnail",
                 style: {
                   width: "100%",
-                  height: "100%"
+                  height: "100%",
+                  objectFit: "cover"
                 }
               }), /* @__PURE__ */ jsxs(Box$1, {
                 style: {
@@ -39439,19 +39536,20 @@ function SideDocsSelector({
                   })
                 })]
               })]
-            }) : /* @__PURE__ */ jsx$1(UploadDocument, {
+            }) : /* @__PURE__ */ jsx$1(UploadDocument2, {
+              videoRef,
+              streamRef,
               setActivateCamera,
               activateCamera,
-              webcamRef,
-              Webcam: Webcam2,
               videoConstraints,
               base64,
-              detail: "Subir reverso del documento"
+              detail: "Subir reverso del documento",
+              onTapToFocus: handleTapToFocus
             }), /* @__PURE__ */ jsxs(Box$1, {
               width: "100%",
               children: [activateCamera && /* @__PURE__ */ jsx$1(CustomButton, {
                 type: "button",
-                onClick: () => onUploadImage("secondImage"),
+                onClick: () => takeScreenshot("secondImage"),
                 children: "Capturar"
               }), !status && Object.keys(base64).length > 0 && !activateCamera && lib$1(status) && (!dualModeRequired && base64.secondImage && base64.firstImage || dualModeRequired && base64.firstImage && base64.secondImage) && /* @__PURE__ */ jsx$1(CustomButton, {
                 type: "submit",
@@ -39914,6 +40012,7 @@ function DocumentReader({
     base64,
     countryCode,
     onUploadImage,
+    onUploadImage2,
     activateCamera,
     setActivateCamera,
     webcamRef,
@@ -39959,7 +40058,8 @@ function DocumentReader({
           videoConstraints,
           onUploadImage,
           dualModeRequired,
-          status
+          status,
+          onUploadImage2
         })]
       })
     })]