react-native-rectangle-doc-scanner 0.71.0 → 1.1.0

package/android/src/main/java/com/reactnativerectangledocscanner/RNRDocScannerView.kt

@@ -35,6 +35,7 @@ import org.opencv.core.MatOfPoint2f
 import org.opencv.core.Point
 import org.opencv.core.Size as MatSize
 import org.opencv.imgproc.Imgproc
+import org.opencv.photo.Photo
 import java.io.File
 import java.nio.ByteBuffer
 import java.text.SimpleDateFormat
@@ -73,6 +74,8 @@ class RNRDocScannerView @JvmOverloads constructor(
   private var currentStableCounter: Int = 0
   private var lastQuad: QuadPoints? = null
   private var lastFrameSize: AndroidSize? = null
+  private var missedDetections: Int = 0
+  private val maxMissedDetections = 4
   private var capturePromise: Promise? = null
   private var captureInFlight: Boolean = false
 
@@ -198,25 +201,43 @@ class RNRDocScannerView @JvmOverloads constructor(
 
   private fun emitDetectionResult(quad: QuadPoints?, frameSize: AndroidSize) {
     val reactContext = context as? ReactContext ?: return
+
+    val effectiveQuad: QuadPoints? = when {
+      quad != null -> {
+        missedDetections = 0
+        lastQuad = quad
+        quad
+      }
+      lastQuad != null && missedDetections < maxMissedDetections -> {
+        missedDetections += 1
+        lastQuad
+      }
+      else -> {
+        missedDetections = 0
+        lastQuad = null
+        null
+      }
+    }
+
+    val sizeForEvent = if (effectiveQuad === quad) frameSize else lastFrameSize ?: frameSize
+
     val event: WritableMap = Arguments.createMap().apply {
-      if (quad != null) {
+      if (effectiveQuad != null) {
         val quadMap = Arguments.createMap().apply {
-          putMap("topLeft", quad.topLeft.toWritable())
-          putMap("topRight", quad.topRight.toWritable())
-          putMap("bottomRight", quad.bottomRight.toWritable())
-          putMap("bottomLeft", quad.bottomLeft.toWritable())
+          putMap("topLeft", effectiveQuad.topLeft.toWritable())
+          putMap("topRight", effectiveQuad.topRight.toWritable())
+          putMap("bottomRight", effectiveQuad.bottomRight.toWritable())
+          putMap("bottomLeft", effectiveQuad.bottomLeft.toWritable())
         }
         putMap("rectangleCoordinates", quadMap)
         currentStableCounter = (currentStableCounter + 1).coerceAtMost(detectionCountBeforeCapture)
-        lastQuad = quad
       } else {
         putNull("rectangleCoordinates")
         currentStableCounter = 0
-        lastQuad = null
       }
       putInt("stableCounter", currentStableCounter)
-      putDouble("frameWidth", frameSize.width.toDouble())
-      putDouble("frameHeight", frameSize.height.toDouble())
+      putDouble("frameWidth", sizeForEvent.width.toDouble())
+      putDouble("frameHeight", sizeForEvent.height.toDouble())
     }
 
     reactContext
@@ -387,11 +408,20 @@ class RNRDocScannerView @JvmOverloads constructor(
     val gray = Mat()
     Imgproc.cvtColor(mat, gray, Imgproc.COLOR_BGR2GRAY)
 
+    // Improve contrast for low-light or glossy surfaces
+    val clahe = Photo.createCLAHE(2.0, MatSize(8.0, 8.0))
+    val enhanced = Mat()
+    clahe.apply(gray, enhanced)
+    clahe.collectGarbage()
+
     val blurred = Mat()
-    Imgproc.GaussianBlur(gray, blurred, MatSize(5.0, 5.0), 0.0)
+    Imgproc.GaussianBlur(enhanced, blurred, MatSize(5.0, 5.0), 0.0)
 
     val edges = Mat()
-    Imgproc.Canny(blurred, edges, 50.0, 150.0)
+    Imgproc.Canny(blurred, edges, 40.0, 140.0)
+
+    val morphKernel = Imgproc.getStructuringElement(Imgproc.MORPH_RECT, MatSize(5.0, 5.0))
+    Imgproc.morphologyEx(edges, edges, Imgproc.MORPH_CLOSE, morphKernel)
 
     val contours = ArrayList<MatOfPoint>()
     val hierarchy = Mat()
@@ -415,7 +445,7 @@ class RNRDocScannerView @JvmOverloads constructor(
       }
 
       val area = abs(Imgproc.contourArea(approxCurve))
-      if (area < frameArea * 0.10 || area > frameArea * 0.95) {
+      if (area < frameArea * 0.05 || area > frameArea * 0.98) {
         contour.release()
         contour2f.release()
         continue
@@ -437,8 +467,10 @@ class RNRDocScannerView @JvmOverloads constructor(
     }
 
     gray.release()
+    enhanced.release()
     blurred.release()
     edges.release()
+    morphKernel.release()
     hierarchy.release()
     approxCurve.release()
     mat.release()

package/dist/utils/overlay.js

@@ -62,6 +62,15 @@ const buildPath = (points) => {
     path.close();
     return path;
 };
+const orderQuad = (points) => {
+    if (points.length !== 4) {
+        return points;
+    }
+    const sorted = [...points].sort((a, b) => (a.y === b.y ? a.x - b.x : a.y - b.y));
+    const top = sorted.slice(0, 2).sort((a, b) => a.x - b.x);
+    const bottom = sorted.slice(2, 4).sort((a, b) => a.x - b.x);
+    return [top[0], top[1], bottom[1], bottom[0]];
+};
 const Overlay = ({ quad, color = '#e7a649', frameSize, showGrid = true, gridColor = 'rgba(231, 166, 73, 0.35)', gridLineWidth = 2, }) => {
     const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
     const fillColor = (0, react_1.useMemo)(() => withAlpha(color, 0.2), [color]);
@@ -106,10 +115,11 @@ const Overlay = ({ quad, color = '#e7a649', frameSize, showGrid = true, gridColo
         if (!transformedQuad) {
             return { outlinePath: null, gridPaths: [] };
         }
-        const skPath = buildPath(transformedQuad);
+        const normalizedQuad = orderQuad(transformedQuad);
+        const skPath = buildPath(normalizedQuad);
         const grid = [];
         if (showGrid) {
-            const [topLeft, topRight, bottomRight, bottomLeft] = transformedQuad;
+            const [topLeft, topRight, bottomRight, bottomLeft] = normalizedQuad;
             const steps = [1 / 3, 2 / 3];
             steps.forEach((t) => {
                 const start = lerp(topLeft, topRight, t);

package/ios/RNRDocScannerView.swift

@@ -33,6 +33,8 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
   private var isProcessingFrame = false
   private var isCaptureInFlight = false
   private var lastObservation: VNRectangleObservation?
+  private var missedDetectionFrames: Int = 0
+  private let maxMissedDetections = 4
   private var lastFrameSize: CGSize = .zero
   private var photoCaptureCompletion: ((Result<RNRDocScannerCaptureResult, Error>) -> Void)?
 
@@ -87,6 +89,9 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
       if session.canAddOutput(photoOutput) {
         photoOutput.isHighResolutionCaptureEnabled = true
         session.addOutput(photoOutput)
+        if let connection = photoOutput.connection(with: .video), connection.isVideoOrientationSupported {
+          connection.videoOrientation = .portrait
+        }
       }
 
       videoOutput.videoSettings = [
@@ -97,6 +102,9 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
 
       if session.canAddOutput(videoOutput) {
         session.addOutput(videoOutput)
+        if let connection = videoOutput.connection(with: .video), connection.isVideoOrientationSupported {
+          connection.videoOrientation = .portrait
+        }
       }
     }
   }
@@ -104,6 +112,9 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
   override func layoutSubviews() {
     super.layoutSubviews()
     previewLayer?.frame = bounds
+    if let connection = previewLayer?.connection, connection.isVideoOrientationSupported {
+      connection.videoOrientation = .portrait
+    }
   }
 
   private func updateTorchMode() {
@@ -164,21 +175,27 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
         return
       }
 
-      guard let observation = (request.results as? [VNRectangleObservation])?.first else {
-        self.lastObservation = nil
-        self.handleDetectedRectangle(nil, frameSize: frameSize)
-        return
-      }
+        guard let observations = request.results as? [VNRectangleObservation], let observation = observations.max(by: { lhs, rhs in
+          lhs.boundingBox.width * lhs.boundingBox.height < rhs.boundingBox.width * rhs.boundingBox.height
+        }) else {
+          self.lastObservation = nil
+          self.handleDetectedRectangle(nil, frameSize: frameSize)
+          return
+        }
 
-      self.lastObservation = observation
-      self.handleDetectedRectangle(observation, frameSize: frameSize)
-    }
+        self.lastObservation = observation
+        self.missedDetectionFrames = 0
+        self.handleDetectedRectangle(observation, frameSize: frameSize)
+      }
 
-    request.maximumObservations = 1
-    request.minimumConfidence = 0.6
-    request.minimumAspectRatio = 0.3
-    request.maximumAspectRatio = 1.0
-    request.minimumSize = 0.15
+      request.maximumObservations = 1
+      request.minimumConfidence = 0.5
+      request.minimumAspectRatio = 0.15
+      request.maximumAspectRatio = 1.75
+      request.minimumSize = 0.08
+      if #available(iOS 13.0, *) {
+        request.quadratureTolerance = 45
+      }
 
     let handler = VNImageRequestHandler(cvPixelBuffer: pixelBuffer, orientation: orientation, options: [:])
     do {
@@ -193,13 +210,27 @@ class RNRDocScannerView: UIView, AVCaptureVideoDataOutputSampleBufferDelegate, A
   func handleDetectedRectangle(_ rectangle: VNRectangleObservation?, frameSize: CGSize) {
     guard let onRectangleDetect else { return }
 
+    let effectiveObservation: VNRectangleObservation?
+    if let rect = rectangle {
+      effectiveObservation = rect
+      lastObservation = rect
+      missedDetectionFrames = 0
+    } else if missedDetectionFrames < maxMissedDetections, let cached = lastObservation {
+      missedDetectionFrames += 1
+      effectiveObservation = cached
+    } else {
+      lastObservation = nil
+      missedDetectionFrames = 0
+      effectiveObservation = nil
+    }
+
     let payload: [String: Any?]
-    if let rectangle {
+    if let observation = effectiveObservation {
       let points = [
-        pointForOverlay(from: rectangle.topLeft, frameSize: frameSize),
-        pointForOverlay(from: rectangle.topRight, frameSize: frameSize),
-        pointForOverlay(from: rectangle.bottomRight, frameSize: frameSize),
-        pointForOverlay(from: rectangle.bottomLeft, frameSize: frameSize),
+        pointForOverlay(from: observation.topLeft, frameSize: frameSize),
+        pointForOverlay(from: observation.topRight, frameSize: frameSize),
+        pointForOverlay(from: observation.bottomRight, frameSize: frameSize),
+        pointForOverlay(from: observation.bottomLeft, frameSize: frameSize),
       ]
 
       currentStableCounter = min(currentStableCounter + 1, Int(truncating: detectionCountBeforeCapture))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.71.0",
+  "version": "1.1.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",

package/src/utils/overlay.tsx

@@ -47,6 +47,18 @@ const buildPath = (points: Point[]) => {
   return path;
 };
 
+const orderQuad = (points: Point[]): Point[] => {
+  if (points.length !== 4) {
+    return points;
+  }
+
+  const sorted = [...points].sort((a, b) => (a.y === b.y ? a.x - b.x : a.y - b.y));
+  const top = sorted.slice(0, 2).sort((a, b) => a.x - b.x);
+  const bottom = sorted.slice(2, 4).sort((a, b) => a.x - b.x);
+
+  return [top[0], top[1], bottom[1], bottom[0]];
+};
+
 export const Overlay: React.FC<OverlayProps> = ({
   quad,
   color = '#e7a649',
@@ -105,11 +117,12 @@ export const Overlay: React.FC<OverlayProps> = ({
       return { outlinePath: null, gridPaths: [] };
     }
 
-    const skPath = buildPath(transformedQuad);
+    const normalizedQuad = orderQuad(transformedQuad);
+    const skPath = buildPath(normalizedQuad);
     const grid: ReturnType<typeof Skia.Path.Make>[] = [];
 
     if (showGrid) {
-      const [topLeft, topRight, bottomRight, bottomLeft] = transformedQuad;
+      const [topLeft, topRight, bottomRight, bottomLeft] = normalizedQuad;
       const steps = [1 / 3, 2 / 3];
 
       steps.forEach((t) => {