@koraidv/react 1.7.3 → 1.7.5

package/dist/index.js

@@ -1814,6 +1814,7 @@ function DocumentCaptureScreen({
 }) {
   const videoRef = (0, import_react5.useRef)(null);
   const canvasRef = (0, import_react5.useRef)(null);
+  const guideRef = (0, import_react5.useRef)(null);
   const [stream, setStream] = (0, import_react5.useState)(null);
   const [isCapturing, setIsCapturing] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.useState)(null);
@@ -1862,9 +1863,39 @@ function DocumentCaptureScreen({
       setIsCapturing(false);
       return;
     }
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    ctx.drawImage(video, 0, 0);
+    const guideRect = guideRef.current?.getBoundingClientRect();
+    const videoRect = video.getBoundingClientRect();
+    let cropX = 0;
+    let cropY = 0;
+    let cropW = video.videoWidth;
+    let cropH = video.videoHeight;
+    if (guideRect && videoRect.width > 0 && videoRect.height > 0 && video.videoWidth > 0 && video.videoHeight > 0) {
+      const scale = Math.max(
+        videoRect.width / video.videoWidth,
+        videoRect.height / video.videoHeight
+      );
+      const visibleSourceW = videoRect.width / scale;
+      const visibleSourceH = videoRect.height / scale;
+      const sourceLeftOffset = (video.videoWidth - visibleSourceW) / 2;
+      const sourceTopOffset = (video.videoHeight - visibleSourceH) / 2;
+      const guideOffsetX = guideRect.left - videoRect.left;
+      const guideOffsetY = guideRect.top - videoRect.top;
+      const sx = sourceLeftOffset + guideOffsetX / scale;
+      const sy = sourceTopOffset + guideOffsetY / scale;
+      const sw = guideRect.width / scale;
+      const sh = guideRect.height / scale;
+      cropX = Math.max(0, Math.min(Math.round(sx), video.videoWidth - 1));
+      cropY = Math.max(0, Math.min(Math.round(sy), video.videoHeight - 1));
+      cropW = Math.max(1, Math.min(Math.round(sw), video.videoWidth - cropX));
+      cropH = Math.max(1, Math.min(Math.round(sh), video.videoHeight - cropY));
+    }
+    const TARGET_MIN_WIDTH = 1600;
+    const upscale = cropW < TARGET_MIN_WIDTH ? TARGET_MIN_WIDTH / cropW : 1;
+    const outW = Math.round(cropW * upscale);
+    const outH = Math.round(cropH * upscale);
+    canvas.width = outW;
+    canvas.height = outH;
+    ctx.drawImage(video, cropX, cropY, cropW, cropH, 0, 0, outW, outH);
     const dataUrl = canvas.toDataURL("image/jpeg", 0.85);
     canvas.toBlob(
       (blob) => {
@@ -1994,7 +2025,7 @@ function DocumentCaptureScreen({
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.cameraContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, style: styles.cameraVideo }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.documentOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.documentFrame, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.documentOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: guideRef, style: styles.documentFrame, children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...styles.corner, top: 0, left: 0 } }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...styles.corner, top: 0, right: 0, transform: "rotate(90deg)" } }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...styles.corner, bottom: 0, right: 0, transform: "rotate(180deg)" } }),

package/dist/index.mjs

@@ -1765,6 +1765,7 @@ function DocumentCaptureScreen({
 }) {
   const videoRef = useRef(null);
   const canvasRef = useRef(null);
+  const guideRef = useRef(null);
   const [stream, setStream] = useState3(null);
   const [isCapturing, setIsCapturing] = useState3(false);
   const [error, setError] = useState3(null);
@@ -1813,9 +1814,39 @@ function DocumentCaptureScreen({
       setIsCapturing(false);
       return;
     }
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    ctx.drawImage(video, 0, 0);
+    const guideRect = guideRef.current?.getBoundingClientRect();
+    const videoRect = video.getBoundingClientRect();
+    let cropX = 0;
+    let cropY = 0;
+    let cropW = video.videoWidth;
+    let cropH = video.videoHeight;
+    if (guideRect && videoRect.width > 0 && videoRect.height > 0 && video.videoWidth > 0 && video.videoHeight > 0) {
+      const scale = Math.max(
+        videoRect.width / video.videoWidth,
+        videoRect.height / video.videoHeight
+      );
+      const visibleSourceW = videoRect.width / scale;
+      const visibleSourceH = videoRect.height / scale;
+      const sourceLeftOffset = (video.videoWidth - visibleSourceW) / 2;
+      const sourceTopOffset = (video.videoHeight - visibleSourceH) / 2;
+      const guideOffsetX = guideRect.left - videoRect.left;
+      const guideOffsetY = guideRect.top - videoRect.top;
+      const sx = sourceLeftOffset + guideOffsetX / scale;
+      const sy = sourceTopOffset + guideOffsetY / scale;
+      const sw = guideRect.width / scale;
+      const sh = guideRect.height / scale;
+      cropX = Math.max(0, Math.min(Math.round(sx), video.videoWidth - 1));
+      cropY = Math.max(0, Math.min(Math.round(sy), video.videoHeight - 1));
+      cropW = Math.max(1, Math.min(Math.round(sw), video.videoWidth - cropX));
+      cropH = Math.max(1, Math.min(Math.round(sh), video.videoHeight - cropY));
+    }
+    const TARGET_MIN_WIDTH = 1600;
+    const upscale = cropW < TARGET_MIN_WIDTH ? TARGET_MIN_WIDTH / cropW : 1;
+    const outW = Math.round(cropW * upscale);
+    const outH = Math.round(cropH * upscale);
+    canvas.width = outW;
+    canvas.height = outH;
+    ctx.drawImage(video, cropX, cropY, cropW, cropH, 0, 0, outW, outH);
     const dataUrl = canvas.toDataURL("image/jpeg", 0.85);
     canvas.toBlob(
       (blob) => {
@@ -1945,7 +1976,7 @@ function DocumentCaptureScreen({
     ] }),
     /* @__PURE__ */ jsxs5("div", { style: styles.cameraContainer, children: [
       /* @__PURE__ */ jsx6("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, style: styles.cameraVideo }),
-      /* @__PURE__ */ jsx6("div", { style: styles.documentOverlay, children: /* @__PURE__ */ jsxs5("div", { style: styles.documentFrame, children: [
+      /* @__PURE__ */ jsx6("div", { style: styles.documentOverlay, children: /* @__PURE__ */ jsxs5("div", { ref: guideRef, style: styles.documentFrame, children: [
         /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, top: 0, left: 0 } }),
         /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, top: 0, right: 0, transform: "rotate(90deg)" } }),
         /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, bottom: 0, right: 0, transform: "rotate(180deg)" } }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koraidv/react",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "description": "Kora IDV React Components for Identity Verification",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -21,7 +21,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@koraidv/core": "^1.7.3"
+    "@koraidv/core": "^1.7.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",