react-native-rectangle-doc-scanner 3.144.0 → 3.145.0

package/android/src/main/kotlin/com/reactnativerectangledocscanner/CameraView.kt

@@ -0,0 +1,277 @@
+package com.reactnativerectangledocscanner
+
+import android.Manifest
+import android.content.Context
+import android.content.pm.PackageManager
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Path
+import android.util.Log
+import android.view.View
+import android.widget.FrameLayout
+import androidx.camera.core.Camera
+import androidx.camera.core.CameraSelector
+import androidx.camera.core.ImageAnalysis
+import androidx.camera.core.ImageProxy
+import androidx.camera.core.Preview
+import androidx.camera.lifecycle.ProcessCameraProvider
+import androidx.camera.view.PreviewView
+import androidx.core.content.ContextCompat
+import androidx.lifecycle.LifecycleOwner
+import com.google.common.util.concurrent.ListenableFuture
+import java.util.concurrent.ExecutorService
+import java.util.concurrent.Executors
+
+/**
+ * CameraView with real-time document detection, grid overlay, and rectangle overlay
+ * Matches iOS implementation behavior
+ */
+class CameraView(context: Context) : FrameLayout(context) {
+    private val TAG = "CameraView"
+
+    private val previewView: PreviewView
+    private val overlayView: OverlayView
+
+    private var cameraProviderFuture: ListenableFuture<ProcessCameraProvider>? = null
+    private var cameraProvider: ProcessCameraProvider? = null
+    private var preview: Preview? = null
+    private var imageAnalysis: ImageAnalysis? = null
+    private var camera: Camera? = null
+
+    private val cameraExecutor: ExecutorService = Executors.newSingleThreadExecutor()
+    // Callback for detected rectangles
+    var onRectangleDetected: ((Rectangle?) -> Unit)? = null
+
+    init {
+        // Create preview view
+        previewView = PreviewView(context).apply {
+            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+            implementationMode = PreviewView.ImplementationMode.COMPATIBLE
+        }
+        addView(previewView)
+
+        // Create overlay view for grid and rectangle
+        overlayView = OverlayView(context)
+        addView(overlayView)
+
+        Log.d(TAG, "CameraView initialized")
+    }
+
+    /**
+     * Start camera and document detection
+     */
+    fun startCamera() {
+        if (!hasPermissions()) {
+            Log.e(TAG, "Camera permissions not granted")
+            return
+        }
+
+        cameraProviderFuture = ProcessCameraProvider.getInstance(context)
+        cameraProviderFuture?.addListener({
+            try {
+                cameraProvider = cameraProviderFuture?.get()
+                bindCamera()
+            } catch (e: Exception) {
+                Log.e(TAG, "Failed to get camera provider", e)
+            }
+        }, ContextCompat.getMainExecutor(context))
+    }
+
+    /**
+     * Stop camera and release resources
+     */
+    fun stopCamera() {
+        cameraProvider?.unbindAll()
+        cameraExecutor.shutdown()
+    }
+
+    /**
+     * Bind camera use cases
+     */
+    private fun bindCamera() {
+        val lifecycleOwner = context as? LifecycleOwner
+        if (lifecycleOwner == null) {
+            Log.e(TAG, "Context is not a LifecycleOwner")
+            return
+        }
+
+        val provider = cameraProvider ?: return
+
+        // Unbind all before rebinding
+        provider.unbindAll()
+
+        // Preview use case
+        preview = Preview.Builder()
+            .build()
+            .also {
+                it.setSurfaceProvider(previewView.surfaceProvider)
+            }
+
+        // Image analysis use case for document detection
+        imageAnalysis = ImageAnalysis.Builder()
+            .setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
+            .build()
+            .also {
+                it.setAnalyzer(cameraExecutor, DocumentAnalyzer())
+            }
+
+        // Select back camera
+        val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA
+
+        try {
+            // Bind use cases to camera
+            camera = provider.bindToLifecycle(
+                lifecycleOwner,
+                cameraSelector,
+                preview,
+                imageAnalysis
+            )
+
+            Log.d(TAG, "Camera bound successfully")
+        } catch (e: Exception) {
+            Log.e(TAG, "Failed to bind camera", e)
+        }
+    }
+
+    /**
+     * Check if camera permissions are granted
+     */
+    private fun hasPermissions(): Boolean {
+        return ContextCompat.checkSelfPermission(
+            context,
+            Manifest.permission.CAMERA
+        ) == PackageManager.PERMISSION_GRANTED
+    }
+
+    /**
+     * Image analyzer for document detection
+     */
+    private inner class DocumentAnalyzer : ImageAnalysis.Analyzer {
+        override fun analyze(imageProxy: ImageProxy) {
+            try {
+                val nv21 = imageProxy.toNv21()
+                val rotationDegrees = imageProxy.imageInfo.rotationDegrees
+
+                val frameWidth = if (rotationDegrees == 90 || rotationDegrees == 270) {
+                    imageProxy.height
+                } else {
+                    imageProxy.width
+                }
+
+                val frameHeight = if (rotationDegrees == 90 || rotationDegrees == 270) {
+                    imageProxy.width
+                } else {
+                    imageProxy.height
+                }
+
+                val rectangle = DocumentDetector.detectRectangleInYUV(
+                    nv21,
+                    imageProxy.width,
+                    imageProxy.height,
+                    rotationDegrees
+                )
+
+                val transformedRectangle = rectangle?.let {
+                    val viewWidth = if (overlayView.width > 0) overlayView.width else width
+                    val viewHeight = if (overlayView.height > 0) overlayView.height else height
+
+                    DocumentDetector.transformRectangleToViewCoordinates(
+                        it,
+                        frameWidth,
+                        frameHeight,
+                        viewWidth,
+                        viewHeight
+                    )
+                }
+
+                post {
+                    overlayView.setDetectedRectangle(transformedRectangle)
+                    onRectangleDetected?.invoke(transformedRectangle)
+                }
+            } catch (e: Exception) {
+                Log.e(TAG, "Failed to analyze frame", e)
+                post {
+                    overlayView.setDetectedRectangle(null)
+                    onRectangleDetected?.invoke(null)
+                }
+            } finally {
+                imageProxy.close()
+            }
+        }
+    }
+
+    /**
+     * Overlay view for grid and rectangle
+     */
+    private class OverlayView(context: Context) : View(context) {
+        private var detectedRectangle: Rectangle? = null
+
+        private val gridPaint = Paint().apply {
+            color = Color.parseColor("#80FFFFFF")  // 50% white
+            strokeWidth = 2f
+            style = Paint.Style.STROKE
+        }
+
+        private val rectanglePaint = Paint().apply {
+            color = Color.parseColor("#00FF00")  // Green
+            strokeWidth = 4f
+            style = Paint.Style.STROKE
+        }
+
+        private val rectangleFillPaint = Paint().apply {
+            color = Color.parseColor("#2000FF00")  // 12% green
+            style = Paint.Style.FILL
+        }
+
+        init {
+            setWillNotDraw(false)
+        }
+
+        fun setDetectedRectangle(rectangle: Rectangle?) {
+            detectedRectangle = rectangle
+            invalidate()
+        }
+
+        override fun onDraw(canvas: Canvas) {
+            super.onDraw(canvas)
+
+            // Draw 3x3 grid
+            drawGrid(canvas)
+
+            // Draw detected rectangle if available
+            detectedRectangle?.let { rect ->
+                drawRectangle(canvas, rect)
+            }
+        }
+
+        private fun drawGrid(canvas: Canvas) {
+            val width = width.toFloat()
+            val height = height.toFloat()
+
+            // Draw vertical lines (2 lines for 3x3 grid)
+            canvas.drawLine(width / 3f, 0f, width / 3f, height, gridPaint)
+            canvas.drawLine(2f * width / 3f, 0f, 2f * width / 3f, height, gridPaint)
+
+            // Draw horizontal lines (2 lines for 3x3 grid)
+            canvas.drawLine(0f, height / 3f, width, height / 3f, gridPaint)
+            canvas.drawLine(0f, 2f * height / 3f, width, 2f * height / 3f, gridPaint)
+        }
+
+        private fun drawRectangle(canvas: Canvas, rect: Rectangle) {
+            val path = Path().apply {
+                moveTo(rect.topLeft.x, rect.topLeft.y)
+                lineTo(rect.topRight.x, rect.topRight.y)
+                lineTo(rect.bottomRight.x, rect.bottomRight.y)
+                lineTo(rect.bottomLeft.x, rect.bottomLeft.y)
+                close()
+            }
+
+            // Draw filled rectangle
+            canvas.drawPath(path, rectangleFillPaint)
+
+            // Draw rectangle outline
+            canvas.drawPath(path, rectanglePaint)
+        }
+    }
+}

package/android/src/main/kotlin/com/reactnativerectangledocscanner/CameraViewManager.kt

@@ -0,0 +1,98 @@
+package com.reactnativerectangledocscanner
+
+import android.util.Log
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+/**
+ * ViewManager for CameraView
+ * Bridges native CameraView to React Native
+ */
+class CameraViewManager : SimpleViewManager<CameraView>() {
+    private val TAG = "CameraViewManager"
+
+    companion object {
+        const val REACT_CLASS = "RNDocScannerCamera"
+    }
+
+    override fun getName(): String = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext): CameraView {
+        Log.d(TAG, "Creating CameraView instance")
+
+        val cameraView = CameraView(reactContext)
+
+        // Set up rectangle detection callback
+        cameraView.onRectangleDetected = { rectangle ->
+            sendRectangleDetectedEvent(reactContext, cameraView, rectangle)
+        }
+
+        return cameraView
+    }
+
+    override fun onAfterUpdateTransaction(view: CameraView) {
+        super.onAfterUpdateTransaction(view)
+        // Start camera after view is ready
+        view.post {
+            view.startCamera()
+        }
+    }
+
+    override fun onDropViewInstance(view: CameraView) {
+        super.onDropViewInstance(view)
+        view.stopCamera()
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> {
+        return MapBuilder.of(
+            "onRectangleDetected",
+            MapBuilder.of("registrationName", "onRectangleDetected")
+        )
+    }
+
+    /**
+     * Send rectangle detected event to React Native
+     */
+    private fun sendRectangleDetectedEvent(
+        reactContext: ReactContext,
+        view: CameraView,
+        rectangle: Rectangle?
+    ) {
+        val event: WritableMap = Arguments.createMap()
+
+        if (rectangle != null) {
+            val topLeft = Arguments.createMap().apply {
+                putDouble("x", rectangle.topLeft.x.toDouble())
+                putDouble("y", rectangle.topLeft.y.toDouble())
+            }
+            val topRight = Arguments.createMap().apply {
+                putDouble("x", rectangle.topRight.x.toDouble())
+                putDouble("y", rectangle.topRight.y.toDouble())
+            }
+            val bottomRight = Arguments.createMap().apply {
+                putDouble("x", rectangle.bottomRight.x.toDouble())
+                putDouble("y", rectangle.bottomRight.y.toDouble())
+            }
+            val bottomLeft = Arguments.createMap().apply {
+                putDouble("x", rectangle.bottomLeft.x.toDouble())
+                putDouble("y", rectangle.bottomLeft.y.toDouble())
+            }
+
+            event.putMap("topLeft", topLeft)
+            event.putMap("topRight", topRight)
+            event.putMap("bottomRight", bottomRight)
+            event.putMap("bottomLeft", bottomLeft)
+        } else {
+            event.putNull("rectangle")
+        }
+
+        reactContext
+            .getJSModule(RCTEventEmitter::class.java)
+            .receiveEvent(view.id, "onRectangleDetected", event)
+    }
+}

package/android/src/main/kotlin/com/reactnativerectangledocscanner/DocumentDetector.kt

@@ -248,7 +248,8 @@ class DocumentDetector {
             imageWidth: Int,
             imageHeight: Int,
             viewWidth: Int,
-            viewHeight: Int
+            viewHeight: Int,
+            rotationDegrees: Int = 0
         ): Rectangle {
             if (imageWidth == 0 || imageHeight == 0 || viewWidth == 0 || viewHeight == 0) {
                 return rectangle

package/android/src/main/kotlin/com/reactnativerectangledocscanner/DocumentScannerPackage.kt

@@ -11,6 +11,9 @@ class DocumentScannerPackage : ReactPackage {
     }
 
     override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return listOf(DocumentScannerViewManager())
+        return listOf(
+            DocumentScannerViewManager(),
+            CameraViewManager()
+        )
     }
 }

package/android/src/main/kotlin/com/reactnativerectangledocscanner/ImageProxyExt.kt

@@ -0,0 +1,51 @@
+package com.reactnativerectangledocscanner
+
+import androidx.camera.core.ImageProxy
+
+/**
+ * Convert [ImageProxy] in YUV_420_888 format to NV21 byte array.
+ * This mirrors the logic used by the existing DocumentScannerView pipeline so CameraView can reuse
+ * the same OpenCV detection utilities.
+ */
+fun ImageProxy.toNv21(): ByteArray {
+    val width = width
+    val height = height
+
+    val ySize = width * height
+    val uvSize = width * height / 2
+    val nv21 = ByteArray(ySize + uvSize)
+
+    val yBuffer = planes[0].buffer
+    val uBuffer = planes[1].buffer
+    val vBuffer = planes[2].buffer
+
+    val yRowStride = planes[0].rowStride
+    val yPixelStride = planes[0].pixelStride
+    var outputOffset = 0
+    for (row in 0 until height) {
+        var inputOffset = row * yRowStride
+        for (col in 0 until width) {
+            nv21[outputOffset++] = yBuffer.get(inputOffset)
+            inputOffset += yPixelStride
+        }
+    }
+
+    val uvRowStride = planes[1].rowStride
+    val uvPixelStride = planes[1].pixelStride
+    val vRowStride = planes[2].rowStride
+    val vPixelStride = planes[2].pixelStride
+    val uvHeight = height / 2
+    val uvWidth = width / 2
+    for (row in 0 until uvHeight) {
+        var uInputOffset = row * uvRowStride
+        var vInputOffset = row * vRowStride
+        for (col in 0 until uvWidth) {
+            nv21[outputOffset++] = vBuffer.get(vInputOffset)
+            nv21[outputOffset++] = uBuffer.get(uInputOffset)
+            uInputOffset += uvPixelStride
+            vInputOffset += vPixelStride
+        }
+    }
+
+    return nv21
+}

package/dist/FullDocScanner.js

@@ -228,11 +228,21 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         try {
             console.log('[FullDocScanner] openCropper called with path:', imagePath);
             setProcessing(true);
-            // Clean path - remove file:// prefix for react-native-image-crop-picker
-            // The library handles the prefix internally and double prefixing causes issues
+            // Clean path handling differs by platform
+            // iOS: react-native-image-crop-picker handles file:// prefix internally
+            // Android: needs file:// prefix for proper URI handling
             let cleanPath = imagePath;
-            if (cleanPath.startsWith('file://')) {
-                cleanPath = cleanPath.replace('file://', '');
+            if (react_native_1.Platform.OS === 'ios') {
+                // iOS: remove file:// prefix as the library adds it
+                if (cleanPath.startsWith('file://')) {
+                    cleanPath = cleanPath.replace('file://', '');
+                }
+            }
+            else {
+                // Android: ensure file:// prefix exists
+                if (!cleanPath.startsWith('file://')) {
+                    cleanPath = 'file://' + cleanPath;
+                }
             }
             console.log('[FullDocScanner] Clean path for cropper:', cleanPath);
             const shouldWaitForPickerDismissal = options?.waitForPickerDismissal ?? true;

package/package.json

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

package/src/FullDocScanner.tsx

@@ -5,6 +5,7 @@ import {
   Image,
   InteractionManager,
   NativeModules,
+  Platform,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -337,11 +338,20 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         console.log('[FullDocScanner] openCropper called with path:', imagePath);
         setProcessing(true);
 
-        // Clean path - remove file:// prefix for react-native-image-crop-picker
-        // The library handles the prefix internally and double prefixing causes issues
+        // Clean path handling differs by platform
+        // iOS: react-native-image-crop-picker handles file:// prefix internally
+        // Android: needs file:// prefix for proper URI handling
         let cleanPath = imagePath;
-        if (cleanPath.startsWith('file://')) {
-          cleanPath = cleanPath.replace('file://', '');
+        if (Platform.OS === 'ios') {
+          // iOS: remove file:// prefix as the library adds it
+          if (cleanPath.startsWith('file://')) {
+            cleanPath = cleanPath.replace('file://', '');
+          }
+        } else {
+          // Android: ensure file:// prefix exists
+          if (!cleanPath.startsWith('file://')) {
+            cleanPath = 'file://' + cleanPath;
+          }
         }
         console.log('[FullDocScanner] Clean path for cropper:', cleanPath);