react-native-rectangle-doc-scanner 0.35.0 → 0.37.0

package/dist/DocScanner.js

@@ -92,36 +92,58 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
         requestPermission();
     }, [requestPermission]);
     const lastQuadRef = (0, react_1.useRef)(null);
-    const noQuadFramesRef = (0, react_1.useRef)(0);
+    const smoothingBufferRef = (0, react_1.useRef)([]);
     const updateQuad = (0, react_native_worklets_core_1.useRunOnJS)((value) => {
         if (__DEV__) {
             console.log('[DocScanner] quad', value);
         }
-        if (value) {
-            // Found a quad, reset counter and update
-            noQuadFramesRef.current = 0;
+        // Add to smoothing buffer
+        smoothingBufferRef.current.push(value);
+        // Keep only last 3 frames for smoothing
+        if (smoothingBufferRef.current.length > 3) {
+            smoothingBufferRef.current.shift();
+        }
+        // If we have a valid quad, smooth it
+        if (value && value.length === 4) {
+            // Average with previous frames if available
+            if (smoothingBufferRef.current.length >= 2) {
+                const validQuads = smoothingBufferRef.current.filter(q => q !== null && q.length === 4);
+                if (validQuads.length >= 2) {
+                    // Average the positions
+                    const smoothed = value.map((_, idx) => {
+                        let sumX = 0;
+                        let sumY = 0;
+                        validQuads.forEach(quad => {
+                            sumX += quad[idx].x;
+                            sumY += quad[idx].y;
+                        });
+                        return {
+                            x: sumX / validQuads.length,
+                            y: sumY / validQuads.length,
+                        };
+                    });
+                    lastQuadRef.current = smoothed;
+                    setQuad(smoothed);
+                    return;
+                }
+            }
             lastQuadRef.current = value;
             setQuad(value);
         }
+        else if (lastQuadRef.current) {
+            // Keep showing last quad for 1 frame to reduce flickering
+            setQuad(lastQuadRef.current);
+        }
         else {
-            // No quad found, keep the last one for a few frames
-            noQuadFramesRef.current += 1;
-            // Keep the last quad for up to 3 frames
-            if (noQuadFramesRef.current > 3) {
-                lastQuadRef.current = null;
-                setQuad(null);
-            }
-            // Otherwise, keep showing the last quad
+            setQuad(null);
         }
     }, []);
     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 reportStage = (0, react_native_worklets_core_1.useRunOnJS)((stage) => {
-        if (__DEV__) {
-            console.log('[DocScanner] stage', stage);
-        }
+    const reportStage = (0, react_native_worklets_core_1.useRunOnJS)((_stage) => {
+        // Disabled for performance
     }, []);
     const [frameSize, setFrameSize] = (0, react_1.useState)(null);
     const updateFrameSize = (0, react_native_worklets_core_1.useRunOnJS)((width, height) => {
@@ -133,8 +155,8 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
         try {
             // Report frame size for coordinate transformation
             updateFrameSize(frame.width, frame.height);
-            // Use higher resolution for better accuracy - 720p instead of 480p
-            const ratio = 720 / frame.width;
+            // Use higher resolution for better accuracy - 960p
+            const ratio = 960 / frame.width;
             const width = Math.floor(frame.width * ratio);
             const height = Math.floor(frame.height * ratio);
             step = 'resize';
@@ -163,7 +185,7 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
             react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', mat, mat, gaussianKernel, 0);
             step = 'Canny';
             reportStage(step);
-            react_native_fast_opencv_1.OpenCV.invoke('Canny', mat, mat, 50, 150);
+            react_native_fast_opencv_1.OpenCV.invoke('Canny', mat, mat, 30, 100);
             step = 'createContours';
             reportStage(step);
             const contours = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVectorOfVectors);
@@ -205,8 +227,8 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
                 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);
                 let approxArray = [];
-                // Try epsilon values from 0.2% to 8% of perimeter
-                const epsilonValues = [0.002, 0.004, 0.006, 0.008, 0.01, 0.015, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08];
+                // Try epsilon values from 0.3% to 6% of perimeter for better corner detection
+                const epsilonValues = [0.003, 0.005, 0.007, 0.009, 0.011, 0.013, 0.015, 0.018, 0.02, 0.025, 0.03, 0.04, 0.05, 0.06];
                 for (let attempt = 0; attempt < epsilonValues.length; attempt += 1) {
                     const epsilon = epsilonValues[attempt] * perimeter;
                     step = `contour_${i}_approxPolyDP_attempt_${attempt}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/DocScanner.tsx

@@ -97,28 +97,55 @@ export const DocScanner: React.FC<Props> = ({
   }, [requestPermission]);
 
   const lastQuadRef = useRef<Point[] | null>(null);
-  const noQuadFramesRef = useRef(0);
+  const smoothingBufferRef = useRef<(Point[] | null)[]>([]);
 
   const updateQuad = useRunOnJS((value: Point[] | null) => {
     if (__DEV__) {
       console.log('[DocScanner] quad', value);
     }
 
-    if (value) {
-      // Found a quad, reset counter and update
-      noQuadFramesRef.current = 0;
+    // Add to smoothing buffer
+    smoothingBufferRef.current.push(value);
+
+    // Keep only last 3 frames for smoothing
+    if (smoothingBufferRef.current.length > 3) {
+      smoothingBufferRef.current.shift();
+    }
+
+    // If we have a valid quad, smooth it
+    if (value && value.length === 4) {
+      // Average with previous frames if available
+      if (smoothingBufferRef.current.length >= 2) {
+        const validQuads = smoothingBufferRef.current.filter(q => q !== null && q.length === 4) as Point[][];
+
+        if (validQuads.length >= 2) {
+          // Average the positions
+          const smoothed: Point[] = value.map((_, idx) => {
+            let sumX = 0;
+            let sumY = 0;
+            validQuads.forEach(quad => {
+              sumX += quad[idx].x;
+              sumY += quad[idx].y;
+            });
+            return {
+              x: sumX / validQuads.length,
+              y: sumY / validQuads.length,
+            };
+          });
+
+          lastQuadRef.current = smoothed;
+          setQuad(smoothed);
+          return;
+        }
+      }
+
       lastQuadRef.current = value;
       setQuad(value);
+    } else if (lastQuadRef.current) {
+      // Keep showing last quad for 1 frame to reduce flickering
+      setQuad(lastQuadRef.current);
     } else {
-      // No quad found, keep the last one for a few frames
-      noQuadFramesRef.current += 1;
-
-      // Keep the last quad for up to 3 frames
-      if (noQuadFramesRef.current > 3) {
-        lastQuadRef.current = null;
-        setQuad(null);
-      }
-      // Otherwise, keep showing the last quad
+      setQuad(null);
     }
   }, []);
 
@@ -127,10 +154,8 @@ export const DocScanner: React.FC<Props> = ({
     console.warn(`[DocScanner] frame error at ${step}: ${message}`);
   }, []);
 
-  const reportStage = useRunOnJS((stage: string) => {
-    if (__DEV__) {
-      console.log('[DocScanner] stage', stage);
-    }
+  const reportStage = useRunOnJS((_stage: string) => {
+    // Disabled for performance
   }, []);
 
   const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
@@ -147,8 +172,8 @@ export const DocScanner: React.FC<Props> = ({
       // Report frame size for coordinate transformation
       updateFrameSize(frame.width, frame.height);
 
-      // Use higher resolution for better accuracy - 720p instead of 480p
-      const ratio = 720 / frame.width;
+      // Use higher resolution for better accuracy - 960p
+      const ratio = 960 / frame.width;
       const width = Math.floor(frame.width * ratio);
       const height = Math.floor(frame.height * ratio);
       step = 'resize';
@@ -181,7 +206,7 @@ export const DocScanner: React.FC<Props> = ({
       OpenCV.invoke('GaussianBlur', mat, mat, gaussianKernel, 0);
       step = 'Canny';
       reportStage(step);
-      OpenCV.invoke('Canny', mat, mat, 50, 150);
+      OpenCV.invoke('Canny', mat, mat, 30, 100);
 
       step = 'createContours';
       reportStage(step);
@@ -236,8 +261,8 @@ export const DocScanner: React.FC<Props> = ({
 
         let approxArray: Array<{ x: number; y: number }> = [];
 
-        // Try epsilon values from 0.2% to 8% of perimeter
-        const epsilonValues = [0.002, 0.004, 0.006, 0.008, 0.01, 0.015, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08];
+        // Try epsilon values from 0.3% to 6% of perimeter for better corner detection
+        const epsilonValues = [0.003, 0.005, 0.007, 0.009, 0.011, 0.013, 0.015, 0.018, 0.02, 0.025, 0.03, 0.04, 0.05, 0.06];
 
         for (let attempt = 0; attempt < epsilonValues.length; attempt += 1) {
           const epsilon = epsilonValues[attempt] * perimeter;