@koraidv/react 1.7.3 → 1.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +31 -4
  2. package/dist/index.mjs +31 -4
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1814,6 +1814,7 @@ function DocumentCaptureScreen({
1814
1814
  }) {
1815
1815
  const videoRef = (0, import_react5.useRef)(null);
1816
1816
  const canvasRef = (0, import_react5.useRef)(null);
1817
+ const guideRef = (0, import_react5.useRef)(null);
1817
1818
  const [stream, setStream] = (0, import_react5.useState)(null);
1818
1819
  const [isCapturing, setIsCapturing] = (0, import_react5.useState)(false);
1819
1820
  const [error, setError] = (0, import_react5.useState)(null);
@@ -1862,9 +1863,35 @@ function DocumentCaptureScreen({
1862
1863
  setIsCapturing(false);
1863
1864
  return;
1864
1865
  }
1865
- canvas.width = video.videoWidth;
1866
- canvas.height = video.videoHeight;
1867
- ctx.drawImage(video, 0, 0);
1866
+ const guideRect = guideRef.current?.getBoundingClientRect();
1867
+ const videoRect = video.getBoundingClientRect();
1868
+ let cropX = 0;
1869
+ let cropY = 0;
1870
+ let cropW = video.videoWidth;
1871
+ let cropH = video.videoHeight;
1872
+ if (guideRect && videoRect.width > 0 && videoRect.height > 0 && video.videoWidth > 0 && video.videoHeight > 0) {
1873
+ const scale = Math.max(
1874
+ videoRect.width / video.videoWidth,
1875
+ videoRect.height / video.videoHeight
1876
+ );
1877
+ const visibleSourceW = videoRect.width / scale;
1878
+ const visibleSourceH = videoRect.height / scale;
1879
+ const sourceLeftOffset = (video.videoWidth - visibleSourceW) / 2;
1880
+ const sourceTopOffset = (video.videoHeight - visibleSourceH) / 2;
1881
+ const guideOffsetX = guideRect.left - videoRect.left;
1882
+ const guideOffsetY = guideRect.top - videoRect.top;
1883
+ const sx = sourceLeftOffset + guideOffsetX / scale;
1884
+ const sy = sourceTopOffset + guideOffsetY / scale;
1885
+ const sw = guideRect.width / scale;
1886
+ const sh = guideRect.height / scale;
1887
+ cropX = Math.max(0, Math.min(Math.round(sx), video.videoWidth - 1));
1888
+ cropY = Math.max(0, Math.min(Math.round(sy), video.videoHeight - 1));
1889
+ cropW = Math.max(1, Math.min(Math.round(sw), video.videoWidth - cropX));
1890
+ cropH = Math.max(1, Math.min(Math.round(sh), video.videoHeight - cropY));
1891
+ }
1892
+ canvas.width = cropW;
1893
+ canvas.height = cropH;
1894
+ ctx.drawImage(video, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
1868
1895
  const dataUrl = canvas.toDataURL("image/jpeg", 0.85);
1869
1896
  canvas.toBlob(
1870
1897
  (blob) => {
@@ -1994,7 +2021,7 @@ function DocumentCaptureScreen({
1994
2021
  ] }),
1995
2022
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.cameraContainer, children: [
1996
2023
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, style: styles.cameraVideo }),
1997
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.documentOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles.documentFrame, children: [
2024
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles.documentOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: guideRef, style: styles.documentFrame, children: [
1998
2025
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...styles.corner, top: 0, left: 0 } }),
1999
2026
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...styles.corner, top: 0, right: 0, transform: "rotate(90deg)" } }),
2000
2027
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { ...styles.corner, bottom: 0, right: 0, transform: "rotate(180deg)" } }),
package/dist/index.mjs CHANGED
@@ -1765,6 +1765,7 @@ function DocumentCaptureScreen({
1765
1765
  }) {
1766
1766
  const videoRef = useRef(null);
1767
1767
  const canvasRef = useRef(null);
1768
+ const guideRef = useRef(null);
1768
1769
  const [stream, setStream] = useState3(null);
1769
1770
  const [isCapturing, setIsCapturing] = useState3(false);
1770
1771
  const [error, setError] = useState3(null);
@@ -1813,9 +1814,35 @@ function DocumentCaptureScreen({
1813
1814
  setIsCapturing(false);
1814
1815
  return;
1815
1816
  }
1816
- canvas.width = video.videoWidth;
1817
- canvas.height = video.videoHeight;
1818
- ctx.drawImage(video, 0, 0);
1817
+ const guideRect = guideRef.current?.getBoundingClientRect();
1818
+ const videoRect = video.getBoundingClientRect();
1819
+ let cropX = 0;
1820
+ let cropY = 0;
1821
+ let cropW = video.videoWidth;
1822
+ let cropH = video.videoHeight;
1823
+ if (guideRect && videoRect.width > 0 && videoRect.height > 0 && video.videoWidth > 0 && video.videoHeight > 0) {
1824
+ const scale = Math.max(
1825
+ videoRect.width / video.videoWidth,
1826
+ videoRect.height / video.videoHeight
1827
+ );
1828
+ const visibleSourceW = videoRect.width / scale;
1829
+ const visibleSourceH = videoRect.height / scale;
1830
+ const sourceLeftOffset = (video.videoWidth - visibleSourceW) / 2;
1831
+ const sourceTopOffset = (video.videoHeight - visibleSourceH) / 2;
1832
+ const guideOffsetX = guideRect.left - videoRect.left;
1833
+ const guideOffsetY = guideRect.top - videoRect.top;
1834
+ const sx = sourceLeftOffset + guideOffsetX / scale;
1835
+ const sy = sourceTopOffset + guideOffsetY / scale;
1836
+ const sw = guideRect.width / scale;
1837
+ const sh = guideRect.height / scale;
1838
+ cropX = Math.max(0, Math.min(Math.round(sx), video.videoWidth - 1));
1839
+ cropY = Math.max(0, Math.min(Math.round(sy), video.videoHeight - 1));
1840
+ cropW = Math.max(1, Math.min(Math.round(sw), video.videoWidth - cropX));
1841
+ cropH = Math.max(1, Math.min(Math.round(sh), video.videoHeight - cropY));
1842
+ }
1843
+ canvas.width = cropW;
1844
+ canvas.height = cropH;
1845
+ ctx.drawImage(video, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
1819
1846
  const dataUrl = canvas.toDataURL("image/jpeg", 0.85);
1820
1847
  canvas.toBlob(
1821
1848
  (blob) => {
@@ -1945,7 +1972,7 @@ function DocumentCaptureScreen({
1945
1972
  ] }),
1946
1973
  /* @__PURE__ */ jsxs5("div", { style: styles.cameraContainer, children: [
1947
1974
  /* @__PURE__ */ jsx6("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, style: styles.cameraVideo }),
1948
- /* @__PURE__ */ jsx6("div", { style: styles.documentOverlay, children: /* @__PURE__ */ jsxs5("div", { style: styles.documentFrame, children: [
1975
+ /* @__PURE__ */ jsx6("div", { style: styles.documentOverlay, children: /* @__PURE__ */ jsxs5("div", { ref: guideRef, style: styles.documentFrame, children: [
1949
1976
  /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, top: 0, left: 0 } }),
1950
1977
  /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, top: 0, right: 0, transform: "rotate(90deg)" } }),
1951
1978
  /* @__PURE__ */ jsx6("div", { style: { ...styles.corner, bottom: 0, right: 0, transform: "rotate(180deg)" } }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@koraidv/react",
3
- "version": "1.7.3",
3
+ "version": "1.7.4",
4
4
  "description": "Kora IDV React Components for Identity Verification",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -21,7 +21,7 @@
21
21
  "test": "vitest run"
22
22
  },
23
23
  "dependencies": {
24
- "@koraidv/core": "^1.7.3"
24
+ "@koraidv/core": "^1.7.4"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@types/react": "^18.2.0",