npm - react-native-rectangle-doc-scanner - Versions diffs - 0.3.0 → 0.5.0 - Mend

react-native-rectangle-doc-scanner 0.3.0 → 0.5.0

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 (4) hide show

package/dist/DocScanner.js CHANGED Viewed

@@ -38,10 +38,32 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_vision_camera_1 = require("react-native-vision-camera");
 const vision_camera_resize_plugin_1 = require("vision-camera-resize-plugin");
-const react_native_reanimated_1 = require("react-native-reanimated");
+const react_native_worklets_core_1 = require("react-native-worklets-core");
 const react_native_fast_opencv_1 = require("react-native-fast-opencv");
 const overlay_1 = require("./utils/overlay");
 const stability_1 = require("./utils/stability");
+const isConvexQuadrilateral = (points) => {
+    if (points.length !== 4) {
+        return false;
+    }
+    let previous = 0;
+    for (let i = 0; i < 4; i++) {
+        const p0 = points[i];
+        const p1 = points[(i + 1) % 4];
+        const p2 = points[(i + 2) % 4];
+        const cross = (p1.x - p0.x) * (p2.y - p1.y) - (p1.y - p0.y) * (p2.x - p1.x);
+        if (Math.abs(cross) < 1e-3) {
+            return false;
+        }
+        if (i === 0) {
+            previous = cross;
+        }
+        else if (previous * cross < 0) {
+            return false;
+        }
+    }
+    return true;
+};
 const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, minStableFrames = 8, cameraProps, children, }) => {
     const device = (0, react_native_vision_camera_1.useCameraDevice)('back');
     const { hasPermission, requestPermission } = (0, react_native_vision_camera_1.useCameraPermission)();
@@ -55,52 +77,89 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
     (0, react_1.useEffect)(() => {
         requestPermission();
     }, [requestPermission]);
+    const updateQuad = (0, react_native_worklets_core_1.useRunOnJS)((value) => {
+        setQuad(value);
+    }, []);
+    const reportError = (0, react_native_worklets_core_1.useRunOnJS)((step, error) => {
+        const message = error instanceof Error ? error.message : `${error}`;
+        console.warn(`[DocScanner] frame error at ${step}: ${message}`);
+    }, []);
     const frameProcessor = (0, react_native_vision_camera_1.useFrameProcessor)((frame) => {
         'worklet';
-        const ratio = 480 / frame.width;
-        const w = Math.floor(frame.width * ratio);
-        const h = Math.floor(frame.height * ratio);
-        const resized = resize(frame, {
-            dataType: 'uint8',
-            pixelFormat: 'bgr',
-            scale: { width: w, height: h },
-        });
-        const mat = react_native_fast_opencv_1.OpenCV.frameBufferToMat(h, w, 3, resized);
-        react_native_fast_opencv_1.OpenCV.invoke('cvtColor', mat, mat, react_native_fast_opencv_1.ColorConversionCodes.COLOR_BGR2GRAY);
-        const kernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 4, 4);
-        const element = react_native_fast_opencv_1.OpenCV.invoke('getStructuringElement', react_native_fast_opencv_1.MorphShapes.MORPH_RECT, kernel);
-        react_native_fast_opencv_1.OpenCV.invoke('morphologyEx', mat, mat, react_native_fast_opencv_1.MorphTypes.MORPH_OPEN, element);
-        react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', mat, mat, kernel, 0);
-        react_native_fast_opencv_1.OpenCV.invoke('Canny', mat, mat, 75, 100);
-        const contours = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVectorOfVectors);
-        react_native_fast_opencv_1.OpenCV.invoke('findContours', mat, contours, react_native_fast_opencv_1.RetrievalModes.RETR_LIST, react_native_fast_opencv_1.ContourApproximationModes.CHAIN_APPROX_SIMPLE);
-        let best = null;
-        let maxArea = 0;
-        const arr = react_native_fast_opencv_1.OpenCV.toJSValue(contours).array;
-        for (let i = 0; i < arr.length; i++) {
-            const c = react_native_fast_opencv_1.OpenCV.copyObjectFromVector(contours, i);
-            const { value: area } = react_native_fast_opencv_1.OpenCV.invoke('contourArea', c, false);
-            if (area < w * h * 0.1) {
-                continue;
-            }
-            const { value: peri } = react_native_fast_opencv_1.OpenCV.invoke('arcLength', c, true);
-            const approx = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVector);
-            react_native_fast_opencv_1.OpenCV.invoke('approxPolyDP', c, approx, 0.02 * peri, true);
-            const size = react_native_fast_opencv_1.OpenCV.invokeWithOutParam('size', approx);
-            const { value: convex } = react_native_fast_opencv_1.OpenCV.invoke('isContourConvex', approx);
-            if (convex && size === 4 && area > maxArea) {
-                const pts = [];
-                for (let j = 0; j < 4; j++) {
-                    const p = react_native_fast_opencv_1.OpenCV.invoke('atPoint', approx, j, 0);
-                    pts.push({ x: p.x / ratio, y: p.y / ratio });
+        let step = 'start';
+        try {
+            const ratio = 480 / frame.width;
+            const width = Math.floor(frame.width * ratio);
+            const height = Math.floor(frame.height * ratio);
+            step = 'resize';
+            const resized = resize(frame, {
+                dataType: 'uint8',
+                pixelFormat: 'bgr',
+                scale: { width: width, height: height },
+            });
+            step = 'frameBufferToMat';
+            const mat = react_native_fast_opencv_1.OpenCV.frameBufferToMat(height, width, 3, resized);
+            step = 'cvtColor';
+            react_native_fast_opencv_1.OpenCV.invoke('cvtColor', mat, mat, react_native_fast_opencv_1.ColorConversionCodes.COLOR_BGR2GRAY);
+            const morphologyKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 5, 5);
+            step = 'getStructuringElement';
+            const element = react_native_fast_opencv_1.OpenCV.invoke('getStructuringElement', react_native_fast_opencv_1.MorphShapes.MORPH_RECT, morphologyKernel);
+            step = 'morphologyEx';
+            react_native_fast_opencv_1.OpenCV.invoke('morphologyEx', mat, mat, react_native_fast_opencv_1.MorphTypes.MORPH_OPEN, element);
+            const gaussianKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 5, 5);
+            step = 'GaussianBlur';
+            react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', mat, mat, gaussianKernel, 0);
+            step = 'Canny';
+            react_native_fast_opencv_1.OpenCV.invoke('Canny', mat, mat, 75, 100);
+            step = 'createContours';
+            const contours = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVectorOfVectors);
+            react_native_fast_opencv_1.OpenCV.invoke('findContours', mat, contours, react_native_fast_opencv_1.RetrievalModes.RETR_LIST, react_native_fast_opencv_1.ContourApproximationModes.CHAIN_APPROX_SIMPLE);
+            let best = null;
+            let maxArea = 0;
+            step = 'toJSValue';
+            const contourVector = react_native_fast_opencv_1.OpenCV.toJSValue(contours);
+            const contourArray = Array.isArray(contourVector?.array) ? contourVector.array : [];
+            for (let i = 0; i < contourArray.length; i += 1) {
+                step = `contour_${i}_copy`;
+                const contour = react_native_fast_opencv_1.OpenCV.copyObjectFromVector(contours, i);
+                step = `contour_${i}_area`;
+                const { value: area } = react_native_fast_opencv_1.OpenCV.invoke('contourArea', contour, false);
+                if (area < width * height * 0.1) {
+                    continue;
+                }
+                step = `contour_${i}_arcLength`;
+                const { value: perimeter } = react_native_fast_opencv_1.OpenCV.invoke('arcLength', contour, true);
+                const approx = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVector);
+                step = `contour_${i}_approxPolyDP`;
+                react_native_fast_opencv_1.OpenCV.invoke('approxPolyDP', contour, approx, 0.02 * perimeter, true);
+                step = `contour_${i}_toJS`;
+                const approxValue = react_native_fast_opencv_1.OpenCV.toJSValue(approx);
+                const approxArray = Array.isArray(approxValue?.array) ? approxValue.array : [];
+                if (approxArray.length !== 4) {
+                    continue;
+                }
+                step = `contour_${i}_convex`;
+                const points = approxArray.map((pt) => ({
+                    x: pt.x / ratio,
+                    y: pt.y / ratio,
+                }));
+                if (!isConvexQuadrilateral(points)) {
+                    continue;
+                }
+                if (area > maxArea) {
+                    best = points;
+                    maxArea = area;
                 }
-                best = pts;
-                maxArea = area;
             }
+            step = 'clearBuffers';
+            react_native_fast_opencv_1.OpenCV.clearBuffers();
+            step = 'updateQuad';
+            updateQuad(best);
+        }
+        catch (error) {
+            reportError(step, error);
         }
-        react_native_fast_opencv_1.OpenCV.clearBuffers();
-        (0, react_native_reanimated_1.runOnJS)(setQuad)(best);
-    }, [resize]);
+    }, [resize, reportError, updateQuad]);
     (0, react_1.useEffect)(() => {
         const s = (0, stability_1.checkStability)(quad);
         setStable(s);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {
@@ -29,5 +29,8 @@
     "@types/react": "^18.2.41",
     "@types/react-native": "0.73.0",
     "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "react-native-worklets-core": "^1.6.2"
   }
 }

package/src/DocScanner.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import { Camera, useCameraDevice, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
 import { useResizePlugin } from 'vision-camera-resize-plugin';
-import { runOnJS } from 'react-native-reanimated';
+import { useRunOnJS } from 'react-native-worklets-core';
 import {
   OpenCV,
   ColorConversionCodes,
@@ -16,6 +16,33 @@ import { Overlay } from './utils/overlay';
 import { checkStability } from './utils/stability';
 import type { Point } from './types';
+const isConvexQuadrilateral = (points: Point[]) => {
+  if (points.length !== 4) {
+    return false;
+  }
+  let previous = 0;
+  for (let i = 0; i < 4; i++) {
+    const p0 = points[i];
+    const p1 = points[(i + 1) % 4];
+    const p2 = points[(i + 2) % 4];
+    const cross = (p1.x - p0.x) * (p2.y - p1.y) - (p1.y - p0.y) * (p2.x - p1.x);
+    if (Math.abs(cross) < 1e-3) {
+      return false;
+    }
+    if (i === 0) {
+      previous = cross;
+    } else if (previous * cross < 0) {
+      return false;
+    }
+  }
+  return true;
+};
 type CameraRef = {
   takePhoto: (options: { qualityPrioritization: 'balanced' | 'quality' | 'speed' }) => Promise<{
     path: string;
@@ -55,65 +82,110 @@ export const DocScanner: React.FC<Props> = ({
     requestPermission();
   }, [requestPermission]);
-  const frameProcessor = useFrameProcessor((frame) => {
-    'worklet';
-    const ratio = 480 / frame.width;
-    const w = Math.floor(frame.width * ratio);
-    const h = Math.floor(frame.height * ratio);
-    const resized = resize(frame, {
-      dataType: 'uint8',
-      pixelFormat: 'bgr',
-      scale: { width: w, height: h },
-    });
+  const updateQuad = useRunOnJS((value: Point[] | null) => {
+    setQuad(value);
+  }, []);
-    const mat = OpenCV.frameBufferToMat(h, w, 3, resized);
+  const reportError = useRunOnJS((step: string, error: unknown) => {
+    const message = error instanceof Error ? error.message : `${error}`;
+    console.warn(`[DocScanner] frame error at ${step}: ${message}`);
+  }, []);
-    OpenCV.invoke('cvtColor', mat, mat, ColorConversionCodes.COLOR_BGR2GRAY);
+  const frameProcessor = useFrameProcessor((frame) => {
+    'worklet';
-    const kernel = OpenCV.createObject(ObjectType.Size, 4, 4);
-    const element = OpenCV.invoke('getStructuringElement', MorphShapes.MORPH_RECT, kernel);
-    OpenCV.invoke('morphologyEx', mat, mat, MorphTypes.MORPH_OPEN, element);
+    let step = 'start';
+    try {
+      const ratio = 480 / frame.width;
+      const width = Math.floor(frame.width * ratio);
+      const height = Math.floor(frame.height * ratio);
+      step = 'resize';
+      const resized = resize(frame, {
+        dataType: 'uint8',
+        pixelFormat: 'bgr',
+        scale: { width: width, height: height },
+      });
+      step = 'frameBufferToMat';
+      const mat = OpenCV.frameBufferToMat(height, width, 3, resized);
+      step = 'cvtColor';
+      OpenCV.invoke('cvtColor', mat, mat, ColorConversionCodes.COLOR_BGR2GRAY);
+      const morphologyKernel = OpenCV.createObject(ObjectType.Size, 5, 5);
+      step = 'getStructuringElement';
+      const element = OpenCV.invoke('getStructuringElement', MorphShapes.MORPH_RECT, morphologyKernel);
+      step = 'morphologyEx';
+      OpenCV.invoke('morphologyEx', mat, mat, MorphTypes.MORPH_OPEN, element);
+      const gaussianKernel = OpenCV.createObject(ObjectType.Size, 5, 5);
+      step = 'GaussianBlur';
+      OpenCV.invoke('GaussianBlur', mat, mat, gaussianKernel, 0);
+      step = 'Canny';
+      OpenCV.invoke('Canny', mat, mat, 75, 100);
+      step = 'createContours';
+      const contours = OpenCV.createObject(ObjectType.PointVectorOfVectors);
+      OpenCV.invoke('findContours', mat, contours, RetrievalModes.RETR_LIST, ContourApproximationModes.CHAIN_APPROX_SIMPLE);
+      let best: Point[] | null = null;
+      let maxArea = 0;
+      step = 'toJSValue';
+      const contourVector = OpenCV.toJSValue(contours);
+      const contourArray = Array.isArray(contourVector?.array) ? contourVector.array : [];
+      for (let i = 0; i < contourArray.length; i += 1) {
+        step = `contour_${i}_copy`;
+        const contour = OpenCV.copyObjectFromVector(contours, i);
+        step = `contour_${i}_area`;
+        const { value: area } = OpenCV.invoke('contourArea', contour, false);
+        if (area < width * height * 0.1) {
+          continue;
+        }
-    OpenCV.invoke('GaussianBlur', mat, mat, kernel, 0);
-    OpenCV.invoke('Canny', mat, mat, 75, 100);
+        step = `contour_${i}_arcLength`;
+        const { value: perimeter } = OpenCV.invoke('arcLength', contour, true);
+        const approx = OpenCV.createObject(ObjectType.PointVector);
-    const contours = OpenCV.createObject(ObjectType.PointVectorOfVectors);
-    OpenCV.invoke('findContours', mat, contours, RetrievalModes.RETR_LIST, ContourApproximationModes.CHAIN_APPROX_SIMPLE);
+        step = `contour_${i}_approxPolyDP`;
+        OpenCV.invoke('approxPolyDP', contour, approx, 0.02 * perimeter, true);
-    let best: Point[] | null = null;
-    let maxArea = 0;
+        step = `contour_${i}_toJS`;
+        const approxValue = OpenCV.toJSValue(approx);
+        const approxArray = Array.isArray(approxValue?.array) ? approxValue.array : [];
-    const arr = OpenCV.toJSValue(contours).array;
+        if (approxArray.length !== 4) {
+          continue;
+        }
-    for (let i = 0; i < arr.length; i++) {
-      const c = OpenCV.copyObjectFromVector(contours, i);
-      const { value: area } = OpenCV.invoke('contourArea', c, false);
+        step = `contour_${i}_convex`;
+        const points: Point[] = approxArray.map((pt: { x: number; y: number }) => ({
+          x: pt.x / ratio,
+          y: pt.y / ratio,
+        }));
-      if (area < w * h * 0.1) {
-        continue;
-      }
+        if (!isConvexQuadrilateral(points)) {
+          continue;
+        }
-      const { value: peri } = OpenCV.invoke('arcLength', c, true);
-      const approx = OpenCV.createObject(ObjectType.PointVector);
-      OpenCV.invoke('approxPolyDP', c, approx, 0.02 * peri, true);
-      const size = OpenCV.invokeWithOutParam('size', approx);
-      const { value: convex } = OpenCV.invoke('isContourConvex', approx);
-      if (convex && size === 4 && area > maxArea) {
-        const pts: Point[] = [];
-        for (let j = 0; j < 4; j++) {
-          const p = OpenCV.invoke('atPoint', approx, j, 0);
-          pts.push({ x: p.x / ratio, y: p.y / ratio });
+        if (area > maxArea) {
+          best = points;
+          maxArea = area;
         }
-        best = pts;
-        maxArea = area;
       }
-    }
-    OpenCV.clearBuffers();
-    runOnJS(setQuad)(best);
-  }, [resize]);
+      step = 'clearBuffers';
+      OpenCV.clearBuffers();
+      step = 'updateQuad';
+      updateQuad(best);
+    } catch (error) {
+      reportError(step, error);
+    }
+  }, [resize, reportError, updateQuad]);
   useEffect(() => {
     const s = checkStability(quad);

package/src/worklets-core.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { DependencyList } from 'react';
+declare module 'react-native-worklets-core' {
+  export function useRunOnJS<T extends (...args: any[]) => any>(
+    callback: T,
+    deps: DependencyList
+  ): (...args: Parameters<T>) => void;
+}