react-native-rectangle-doc-scanner 0.4.0 → 0.6.0

package/dist/DocScanner.js

@@ -38,7 +38,7 @@ 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");
@@ -77,57 +77,92 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
     (0, react_1.useEffect)(() => {
         requestPermission();
     }, [requestPermission]);
+    const updateQuad = (0, react_native_worklets_core_1.useRunOnJS)((value) => {
+        if (__DEV__) {
+            console.log('[DocScanner] quad', 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);
-            if (size !== 4) {
-                continue;
-            }
-            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 });
-            }
-            if (!isConvexQuadrilateral(pts)) {
-                continue;
-            }
-            if (area > maxArea) {
-                best = pts;
-                maxArea = area;
+        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;
+                }
             }
+            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

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.4.0",
+  "version": "0.6.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

@@ -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,
@@ -82,72 +82,113 @@ 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 mat = OpenCV.frameBufferToMat(h, w, 3, resized);
-
-    OpenCV.invoke('cvtColor', mat, mat, ColorConversionCodes.COLOR_BGR2GRAY);
-
-    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);
-
-    OpenCV.invoke('GaussianBlur', mat, mat, kernel, 0);
-    OpenCV.invoke('Canny', mat, mat, 75, 100);
-
-    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;
-
-    const arr = OpenCV.toJSValue(contours).array;
-
-    for (let i = 0; i < arr.length; i++) {
-      const c = OpenCV.copyObjectFromVector(contours, i);
-      const { value: area } = OpenCV.invoke('contourArea', c, false);
-
-      if (area < w * h * 0.1) {
-        continue;
-      }
+  const updateQuad = useRunOnJS((value: Point[] | null) => {
+    if (__DEV__) {
+      console.log('[DocScanner] quad', value);
+    }
+    setQuad(value);
+  }, []);
 
-      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);
-      if (size !== 4) {
-        continue;
-      }
+  const reportError = useRunOnJS((step: string, error: unknown) => {
+    const message = error instanceof Error ? error.message : `${error}`;
+    console.warn(`[DocScanner] frame error at ${step}: ${message}`);
+  }, []);
 
-      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 });
-      }
+  const frameProcessor = useFrameProcessor((frame) => {
+    'worklet';
 
-      if (!isConvexQuadrilateral(pts)) {
-        continue;
+    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;
+        }
+
+        step = `contour_${i}_arcLength`;
+        const { value: perimeter } = OpenCV.invoke('arcLength', contour, true);
+        const approx = OpenCV.createObject(ObjectType.PointVector);
+
+        step = `contour_${i}_approxPolyDP`;
+        OpenCV.invoke('approxPolyDP', contour, approx, 0.02 * perimeter, true);
+
+        step = `contour_${i}_toJS`;
+        const approxValue = OpenCV.toJSValue(approx);
+        const approxArray = Array.isArray(approxValue?.array) ? approxValue.array : [];
+
+        if (approxArray.length !== 4) {
+          continue;
+        }
+
+        step = `contour_${i}_convex`;
+        const points: Point[] = approxArray.map((pt: { x: number; y: number }) => ({
+          x: pt.x / ratio,
+          y: pt.y / ratio,
+        }));
+
+        if (!isConvexQuadrilateral(points)) {
+          continue;
+        }
+
+        if (area > maxArea) {
+          best = points;
+          maxArea = area;
+        }
       }
 
-      if (area > maxArea) {
-        best = pts;
-        maxArea = area;
-      }
+      step = 'clearBuffers';
+      OpenCV.clearBuffers();
+      step = 'updateQuad';
+      updateQuad(best);
+    } catch (error) {
+      reportError(step, error);
     }
-
-    OpenCV.clearBuffers();
-    runOnJS(setQuad)(best);
-  }, [resize]);
+  }, [resize, reportError, updateQuad]);
 
   useEffect(() => {
     const s = checkStability(quad);

package/src/worklets-core.d.ts

@@ -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;
+}