adamgf / react-native-opencv3 Goto Github PK

By any chance, is it possible to use this library in order to achieve Hough Lines counting ?
Count the number of lines on a picture. The picture is basically a painting board.

Sorry, it's more a question than a bug 😬

Thanks for the help anyway.

Hello,
I am trying to build a simple app with react native and opencv. but the error appear.
I just create an app with:
npx react-native init AwesomeProject
and it works, then I run this:
npm install react-native-opencv3 --save
then:
npx react-native run-android

and this error:

Task :app:preDebugBuild FAILED
15 actionable tasks: 2 executed, 13 up-to-date

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:preDebugBuild'.

Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
Failed to transform artifact 'opencv.aar (com.quickbirdstudios:opencv:3.4.4-contrib)' to match attributes {artifactType=android-manifest}.
> Execution failed for JetifyTransform: C:\Users\s.dezhahanj.gradle\caches\modules-2\files-2.1\com.quickbirdstudios\opencv\3.4.4-contrib\d90d4b79a287edc4e805cce729d4642b5cd981e0\opencv-3.4.4-contrib.aar.
> Java heap space

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 12s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:preDebugBuild'.

  Failed to transform artifact 'opencv.aar (com.quickbirdstudios:opencv:3.4.4-contrib)' to match attributes {artifactType=android-manifest}.
  > Execution failed for JetifyTransform: C:\Users\s.dezhahanj.gradle\caches\modules-2\files-2.1\com.quickbirdstudios\opencv\3.4.4-contrib\d90d4b79a287edc4e805cce729d4642b5cd981e0\opencv-3.4.4-contrib.aar.
  > Java heap space

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 12s

at checkExecSyncError (child_process.js:611:11)
at execFileSync (child_process.js:629:15)
at runOnAllDevices (D:\Dev\React Native\OpencvTest\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
at buildAndRun (D:\Dev\React Native\OpencvTest\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:158:41)
at D:\Dev\React Native\OpencvTest\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:125:12
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Command.handleAction (D:\Dev\React Native\OpencvTest\node_modules\react-native\node_modules\@react-native-community\cli\build\index.js:164:9)

and the app not run what`s the problem??

i try to use library's function in ios but it not working it shows TypeError: null is not object evaluting ('RnOpencv3.cvtColorGray) Please help me i waste my lot of time

I download a new project and run the react-native-opencv3 library from npm. I can download the necessary pods in iOS and run the application on the phone, but on android.
I get the error "Failed to resolve: com.quickbirdstudios:opencv:3.4.4-contrib".

Could not determine the dependencies of task ':app:mergeDebugAssets'.

Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
Could not find com.quickbirdstudios:opencv:3.4.4-contrib.
Searched in the following locations:
- https://repo.maven.apache.org/maven2/com/quickbirdstudios/opencv/3.4.4-contrib/opencv-3.4.4-contrib.pom
- file:/Users/argenit/Desktop/AwesomeProject/node_modules/react-native/android/com/quickbirdstudios/opencv/3.4.4-contrib/opencv-3.4.4-contrib.pom
- file:/Users/argenit/Desktop/AwesomeProject/node_modules/jsc-android/dist/com/quickbirdstudios/opencv/3.4.4-contrib/opencv-3.4.4-contrib.pom
- https://dl.google.com/dl/android/maven2/com/quickbirdstudios/opencv/3.4.4-contrib/opencv-3.4.4-contrib.pom
- https://www.jitpack.io/com/quickbirdstudios/opencv/3.4.4-contrib/opencv-3.4.4-contrib.pom
Required by:
project :app > project :react-native-opencv3

Possible solution:

• Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/userguide/declaring_repositories.html

Could not get anything related to 'topFacesDetected' as RCTDirectEventBlock.

How to reproduce?

1. install 'react-native-opencv3'
2. import components
3. boom

How can I add typing?

If the property enableJetifier in android gradle.properties is true, the build fails on :app:preDebugBuild

Disabling this property results in success, but it would be nice to proceed with it enabled.

* What went wrong:
Execution failed for task ':app:preDebugBuild'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform artifact 'opencv.aar (com.quickbirdstudios:opencv:3.4.4-contrib)' to match attributes {artifactType=android-manifest}.
      > Execution failed for JetifyTransform: C:\Users\andre\.gradle\caches\modules-2\files-2.1\com.quickbirdstudios\opencv\3.4.4-contrib\d90d4b79a287edc4e805cce729d4642b5cd981e0\opencv-3.4.4-contrib.aar.
         > Java heap space

react-native run-android                                                                                                                                                  
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 999 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...
info Installing the app...
Starting a Gradle Daemon, 1 incompatible and 6 stopped Daemons could not be reused, use --status for details

> Configure project :react-native-appearance
WARNING: API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display more information.

> Task :@react-native-community_async-storage:compileDebugJavaWithJavac

> Task :react-native-appearance:compileDebugJavaWithJavac

> Task :react-native-fs:compileDebugJavaWithJavac

> Task :react-native-gesture-handler:compileDebugJavaWithJavac

> Task :app:preDebugBuild FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings
122 actionable tasks: 114 executed, 8 up-to-date
Note: D:\Work\App.Monorepo\mobile\node_modules\@react-native-community\async-storage\android\src\main\java\com\reactnativecommunity\asyncstorage\AsyncStorageModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
Note: D:\Work\App.Monorepo\mobile\node_modules\react-native-fs\android\src\main\java\com\rnfs\RNFSManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: D:\Work\App.Monorepo\mobile\node_modules\react-native-gesture-handler\android\src\main\java\com\swmansion\gesturehandler\react\RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:preDebugBuild'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform artifact 'opencv.aar (com.quickbirdstudios:opencv:3.4.4-contrib)' to match attributes {artifactType=android-manifest}.
      > Execution failed for JetifyTransform: C:\Users\andre\.gradle\caches\modules-2\files-2.1\com.quickbirdstudios\opencv\3.4.4-contrib\d90d4b79a287edc4e805cce729d4642b5cd981e0\opencv-3.4.4-contrib.aar.
         > Java heap space

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 2m 50s

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081
Note: D:\Work\App.Monorepo\mobile\node_modules\@react-native-community\async-storage\android\src\main\java\com\reactnativecommunity\asyncstorage\AsyncStorageModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
Note: D:\Work\App.Monorepo\mobile\node_modules\react-native-fs\android\src\main\java\com\rnfs\RNFSManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: D:\Work\App.Monorepo\mobile\node_modules\react-native-gesture-handler\android\src\main\java\com\swmansion\gesturehandler\react\RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:preDebugBuild'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform artifact 'opencv.aar (com.quickbirdstudios:opencv:3.4.4-contrib)' to match attributes {artifactType=android-manifest}.
      > Execution failed for JetifyTransform: C:\Users\andre\.gradle\caches\modules-2\files-2.1\com.quickbirdstudios\opencv\3.4.4-contrib\d90d4b79a287edc4e805cce729d4642b5cd981e0\opencv-3.4.4-contrib.aar.
         > Java heap space

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 2m 50s

    at checkExecSyncError (child_process.js:621:11)
    at execFileSync (child_process.js:639:15)
    at runOnAllDevices (D:\Work\App.Monorepo\mobile\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)   
    at buildAndRun (D:\Work\App.Monorepo\mobile\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:158:41)
    at D:\Work\App.Monorepo\mobile\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\index.js:125:12
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async Command.handleAction (D:\Work\App.Monorepo\mobile\node_modules\@react-native-community\cli\build\index.js:164:9)

how can i add a new method? Like findContours and drawContours.

RNCv.matToImage does not works on android release mode.

RN 0.63.2
Test API = 23, 29

The message is as follows (Printed using Alert.alert).

{
    "nativeStackAndroid":[],
    "userInfo":null,
    "message": "width and height must be > 0",
    "code": "EUNSPECIFIED"
}

Obviously it runs fine in debug mode. But I don't know why it doesn't run in release mode.

Hello there,

In attempt to archive the app on XCode 12.5.1, the following error occurred. Apparently, opencv2 library doesn't have full bitcode required by XCode for arm64.

Has anyone already got a similar error? How do I generate the required bitcode then?

Best wishes,
I

'''' ld: bitcode bundle could not be generated because '/ios/Pods/libopencv-contrib/opencv2.framework/opencv2(cap_ios_photo_camera.o)' was built without full bitcode. All object files and libraries for bitcode must be generated from Xcode Archive or Install build file '/ios/Pods/libopencv-contrib/opencv2.framework/opencv2' for architecture arm64

clang: error: linker command failed with exit code 1 (use -v to see invocation)
''''

Hello there,
How would we connect to a remote IP camera, using CvCamera object?

Best wishes,
I

NPM version is still on 1.0.4. I think this might be why CvCamera component does not work for me. I get error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I want to make a cartoon effect. But the bilateralFilter is not working. It only works when I open the cvtColor part in the code below. But this time it's gray in color. I want to make it colorful. How can I do it?

const sourceuri = Image.resolveAssetSource(
require('./girl_wide_brim_hat.png'),
).uri;

const newImagePath = RNFS.DocumentDirectoryPath + '/girl_wide_brim_hat.png';

const interMat = await new Mat().init();
const interMat2 = await new Mat().init();
const interMat3 = await new Mat().init();
const sourceFile = await downloadAssetSource(sourceuri);
const srcMat = await RNCv.imageToMat(sourceFile);
const srcMat2 = await RNCv.imageToMat(sourceFile);

RNCv.invokeMethod('cvtColor', {
  p1: srcMat,
  p2: interMat,
  p3: ColorConv.COLOR_BGR2GRAY,
});

RNCv.invokeMethod('medianBlur', {
  p1: interMat,
  p2: interMat,
  p3: 5,
});

RNCv.invokeMethod('adaptiveThreshold', {
  p1: interMat,
  p2: interMat,
  p3: 255,
  p4: Imgproc.ADAPTIVE_THRESH_MEAN_C,
  p5: Imgproc.THRESH_BINARY,
  p6: 9,
  p7: 5,
});

// RNCv.invokeMethod('cvtColor', {
//   p1: srcMat2,
//   p2: interMat2,
//   p3: ColorConv.COLOR_BGR2GRAY,
// });

RNCv.invokeMethod('bilateralFilter', {
  p1: srcMat2,
  p2: interMat2,
  p3: 9,
  p4: 200,
  p5: 200,
});

RNCv.invokeMethod('bitwise_and', {
  p1: interMat,
  p2: interMat2,
  p3: interMat3,
  // p4: srcMat2,
});

const {uri, width, height} = await RNCv.matToImage(interMat3, newImagePath);
this.setState({...this.state, destImageUri: uri});

I was looking at the source code of react-native-opencv3. I noticed that the haarcascade algorithm files as well as the lbfmodel.yaml file are only inside the Android folder, and not inside the ios folder. Why is this?

Hi,
Before I try this, I wanted to know if it supports the OpenCV object tracking like MOSSE, CSRT, etc.
Thanks!

granted = await PermissionsAndroid.requestMultiple([ PermissionsAndroid.PERMISSIONS.CAMERA, PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE ])

If we "useStorage : PermissionsAndroid.requestMultiple[] returns an objet insted of a string (as PermissionsAndroid.request() does ) then comparing always false.

Task :react-native-opencv3:javaPreCompileDebug FAILED
40 actionable tasks: 38 executed, 2 up-to-date
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: /Users/xxxxxxx/myproject/node_modules/react-native-camera/android/src/main/java/com/google/android/cameraview/Camera2.j
ava uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
Note: /Users/xxxxxxxx/myproject/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/r
eact/RNGestureHandlerButtonViewManager.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':react-native-opencv3:javaPreCompileDebug'.

Could not resolve all files for configuration ':react-native-opencv3:debugCompileClasspath'.
Failed to transform artifact 'opencv.aar (com.quickbirdstudios:opencv:3.4.4-contrib)' to match attributes {artifactType=android-classes, org.gradle.usage=java-api}.
> Execution failed for JetifyTransform: /Users/xxxxxxxx/.gradle/caches/modules-2/files-2.1/com.quickbirdstudios/opencv/3.4.4-contrib/d90d4b79a287edc4e805cce729d4642b5cd981e0/opencv-3.4.4-contrib.aar.
> Java heap space

Hi, I need little help, because I can't figure out how to run solution from python in your library.
Assuming that I'm capturing video in my python script, I just do simple color transformation:

    video_hsv = cv2.cvtColor(video_frame, cv2.COLOR_RGB2HSV_FULL)   
    cv2.imshow('HSV Color Space', video_hsv)

I would like to do the same in react-native, but I can't figure out how to do it.
Currently, I have this code:

    const cvtColorParams = { p1: 'rgba', p2: 'rgba', p3: ColorConv.COLOR_RGB2HSV_FULL };

    return (
        <CvInvoke func="cvtColor" params={cvtColorParams}>
            <CvCamera
                style={styles.camera}
                facing={cameraType}
                ref={cameraRef}
                overlayInterval={100}
                onFrameSize={handleFrameSize}
            >
                {children}
            </CvCamera>
        </CvInvoke>
    );

Also when i change cvtColor params to:
{ p1: 'srcMat', p2: 'dstMat', p3: ColorConv.COLOR_RGB2HSV_FULL }
The app is crashing instantly.

I am guessing that there is problem with "p1" and "p2" because everytime no filters are applied or app crashes. But I would like to ask, what should be in "p1" and "p2" to make this work?

Best,
Piotr

My project currently needs an image processing library that works on react native, so i found this.
I have tried some of your examples, they work well. But there is a problem, i want to adjust the contrast, brightness of the image so the easiest solution is to invoke convertTo method from Mat object.

I have read your source code and found no way to do this. Sorry if i misunderstood your conception, please make a more detailed example about invoking Mat object's methods.

Hello Adam,
We've successfully installed react-native-opencv3-tests, and all modules worked fine in my Android device (Motorola).
Unfortunately, the didn't work in a Samsung device.
We have no clue what's causing the problem. All App modules (i.e. CvCameraPreview, CvFaceDetection, ...) just stop, and all of sudden the app shuts down and the screen close after 1 or 2 minutes later, while executing, displaying a warning message.

In the apk release installation, the behavior is a bit different. The app just restart after 1 or 2 minutes later when running FaceDetection Screen for instance.

As this problems is present in all modules, we believe it's located at react-native-opencv3 module. We wondered if upgrading openCv libraries from 3 to the latest (i.e. 4.5.1) would fix the bug.

if so, How could we upgrade OpenCV kernel ?
How could we just replace openCv3 kernel to 4.5.1?

Best wishes,
I

On Android, CvCamera view is rotated 90 degrees counterclockwise. I tried several solutions I found during search including setting android orientation to portrait in androidmanifest.xml and adding Core.rotate(in, in, 0) in CvCameraView.java on line 454. Core.rotate just causes the app to crash. Core.flip works but only flips the view 180 degrees.

Hello,
I'm trying to develop a lane detection app in React Native and came across this lib. I was playing around with it and got the CvImage to work with gaussian filter, Canny and few others. But when I tried to do this with the CvCamera , output directly from the camera nothing got applied. I could only see raw footage from the camera.
I've tried with gray as input in the Canny as well no results. I tried to follow some examples you made with the CvCameraPreview without any luck.,

Here's the code:
<CvInvoke func="Canny" params={{ p1: 'rgba', p2: 'dstMat', p3: 50, p4: 150, }}> <CvCamera style={{ width: '100%', height: '100%', position: 'absolute', }} facing="back" /> </CvInvoke>

Here's the tutorial I'm trying to follow for lane detection https://towardsdatascience.com/finding-driving-lane-line-live-with-opencv-f17c266f15db

Hi, thanks for this effort.

I'm trying to make a panoramic image using react native, is there any way to use this lib for stitching?

Any code sample would be of great help. Thanks

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.

I'm looking for some way to implement OMR in react-native for a few weeks and I just found this repo... I would like to know if it\s possible and if anyone has implemented OMR using this?
Thank you in advance guys!

Hi there,
I noticed that even, when the user is not using OpenCv features, its engine still runs and consumes CPU at high percentages.
How would we optimize (i.e. activate/deactivate) openCv engine, making active only the user is actually in the screen that uses OpenCV features?

Hi Adam, thanks for putting this together. I tried the CvFaceLandmark example. A couple of issues/questions:

The landmarks from CvFaceLandmark shows up in IOS, however, it flickers a lot and disappears whenever the face moves. Does it not do live tracking? I guess it could also be a performance issue with rendering a element for every landmark point. Perhaps it will work better if I switched to a canvas and drew the landmarks in the canvas?

I get this error in logcat whenever I try to invoke a method:

cv::error(): OpenCV(3.4.4) Error: Sizes of input arguments do not match (The operation is neither 'array op array' (where arrays have the same size and the same number of channels), nor 'array op scalar', nor 'scalar op array') in void cv::arithm_op(cv::InputArray, cv::InputArray, cv::OutputArray, cv::InputArray, int, void (**)(const uchar*, size_t, const uchar*, size_t, uchar*, size_t, int, int, void*), bool, void*, int), file /build/3_4-contrib_pack-contrib-android/opencv/modules/core/src/arithm.cpp

Code:

const interMat = await new Mat().init();
const srcMat = await RNCv.imageToMat(image);
const newImagePath = `${RNFS.DocumentDirectoryPath}/processed_image1.jpg`;
RNCv.invokeMethod('cvtColor', {"p1":srcMat,"p2":interMat,"p3":ColorConv.COLOR_RGB2GRAY})
const { uri, width, height } = await RNCv.matToImage(srcMat, newImagePath);

Setup (Android):

"react-native": "0.64.0",
"react-native-fs": "^2.17.0",
"react-native-opencv3": "^1.0.8",

is it possible to use this OpenCv method to find contours and detect rectangles.
it should be something like this:
const contoursArr = await new MatOfPoints().init(); RNCv.invokeMethod('findContours', {"p1":cannedMat,"p2": contoursArr,"p3": hierarchy,"p4":Imgproc.RETR_TREE,"p5":Imgproc.CHAIN_APPROX_SIMPLE});
but i don't know where to get MatOfPoints to init contoursArr. Maybe someone have already done rectangle detection with this library, i would appreciate any ideas how to get it to work.

Hello!
in this line:
import {CvCamera} from 'react-native-opencv3';
I have this error:
Could not find a declaration file for module react-native-opencv3 ....
and as it guided I try :
npm install @types/react-native-opencv3
but the error E404 not found appear.
I searched a lot but I could not solve it please help

I want to convert the Mat object returned from RNCv.imageToMat to a ndarray object, as I want to use some functions of the ndarray library.

However, from the Mat object i can see it has only got 3 attributes (matIndex, rows, cols).

Can this object be used to get the image matrix or is there a way to fetch the matrix using the matIndex?

I made an interesting discovery when experimenting with live recognition.

The recognition is much better and has much less flickering when I am further away from the camera (one arm length). It even recognizes the face when my head is tilted. If I am closer to the camera (8 inches away from camera), then recognition barely works. Why is that? Could it be an underlying opencv issue?

Hello, I've been trying to get this package working on the latest react native version and it took me a while so just wanted to leave this info here. The most irritating bug was the app building but instantly crashing on my physical phone with no discernable error.

This is for windows 10, using CLI, and for RN version 0.63.4.

Follow these steps to install properly:

1. react-native init ProjectName
2. install react-native-fs using deps
   1. npm install react-native-fs --save --legacy-peer-deps
3. link -fs (if you run without linking the app will crash)
   1. react-native link react-native-fs
4. do a test run
   1. npx react-native run-android
   2. <--- the app should run here, working fine as intended
5. install -opencv3 using deps
   1. npm install react-native-opencv3 --save --legacy-peer-deps
6. change jetifier to false in \android\gradle.properties
7. run
   1. npx react-native run-android
   2. builds but on my phone it instantly crashes
8. If it fails delete the build folder in\android\app\build
9. now it should work
10. as a quick test, i included this line in the out of the box app.js right under import React from 'react';
    1. import {CvCamera, CvScalar, Mat, CvInvoke, CvInvokeGroup} from 'react-native-opencv3';
    2. WORKS!

I have yet to see if there are other issues, but I have been able to run the test projects by running git clone -> npm install -> having a 2nd cmd prompt in the same folder and running npx react-native start -> running npx react-native run-android in the 1st cmd prompt. At least I know it works on an older react native version.

do one single item I have to play around react-native-opencv3-tests to see how things work in this library.

I have to achieve something like this https://sushanta1991.blogspot.com/2021/09/how-to-paint-wall-using-opencv-in-unity.html but Its very difficult with react-native-opencv3. I am not saying the library doesn't have potential but I have to try 10 things or dig through a lot to find a solution.

Any one faced similar issue and have potential solution?

I love to use this library.
this is just one I wished for a long time.
I created new project and yarn add react-native-opencv3.
when I run 'react-native link react-native-opencv3', I got this error.

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module '@babel/runtime/helpers/interopRequireDefault'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Volumes/Data/react-native/test/react-native-opencv3-tests/opencv_test/node_modules/react-native/local-cli/cliEntry.js:11:41)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Module._compile (/Volumes/Data/react-native/test/react-native-opencv3-tests/opencv_test/node_modules/pirates/lib/index.js:83:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.newLoader [as .js] (/Volumes/Data/react-native/test/react-native-opencv3-tests/opencv_test/node_modules/pirates/lib/index.js:88:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)

if import manually and run it, I got 'opencv2/opencv.hpp' file not found
please help me!!!
Thank you.

Is there a way to run this module with expo?
When I add this module in a expo project...
`$ yarn add react-native-opencv3'

I get the error:
Unable to resolve "react-native-fs" from "node_modules/react-native-opencv3/index.js"

then I install
`$ yarn add react-native-fs'

reload again the app with expo.. and get the error:

TypeError: Cannot read property 'RNFSFileTypeRegular' of undefined
reportException @ ExceptionsManager.js:44
handleException @ ExceptionsManager.js:113
handleError @ setUpErrorHandling.js:23
_callee$ @ ErrorRecovery.fx.js:12
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:145
tryCallOne @ core.js:37
(anonymous) @ core.js:123
(anonymous) @ JSTimers.js:289
_callTimer @ JSTimers.js:146
_callImmediatesPass @ JSTimers.js:194
callImmediates @ JSTimers.js:458
__callImmediates @ MessageQueue.js:407
(anonymous) @ MessageQueue.js:143
__guard @ MessageQueue.js:384
flushedQueue @ MessageQueue.js:142
invokeCallbackAndReturnFlushedQueue @ MessageQueue.js:138
(anonymous) @ debuggerWorker.js:69


ExceptionsManager.js:44 Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
reportException @ ExceptionsManager.js:44
handleException @ ExceptionsManager.js:113
handleError @ setUpErrorHandling.js:23
_callee$ @ ErrorRecovery.fx.js:12
tryCatch @ runtime.js:45
invoke @ runtime.js:271
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:145
tryCallOne @ core.js:37
(anonymous) @ core.js:123
(anonymous) @ JSTimers.js:289
_callTimer @ JSTimers.js:146
_callImmediatesPass @ JSTimers.js:194
callImmediates @ JSTimers.js:458
__callImmediates @ MessageQueue.js:407
(anonymous) @ MessageQueue.js:143
__guard @ MessageQueue.js:384
flushedQueue @ MessageQueue.js:142
invokeCallbackAndReturnFlushedQueue @ MessageQueue.js:138
(anonymous) @ debuggerWorker.js:69

Hi there,

I am currently trying to implement a video recording feature that could run face detection and landmark classification at the same time (Need to get probability of eye opening and eulerY and Z values). I've tried to implement it via Expo/RNCamera's face detection module but it doesn't work for iOS. Which is why i've resorted to using OpenCV in my project.

I'm just curious to know if it's possible to do so with this plugin as i've tried a lot of ways to workaround on this issue.

Hello! I am trying to use warp perspective like this:

RNCv.invokeMethod("warpPerspective", {p1: srcMat, p2: doc, p3: m, p4: doc;. All 4 parameters are Mat variables.

Problem is, I can see in the Android Studio Logcat this error message:

E/CvInvoke: warpPerspective not found make sure method exists and is part of Opencv Imgproc, Core or Mat.

I checked and it seems like you support it though. Am I doing something wrong here?

I get a 'Mat data type is not compatible' error when I try to use getMatData on any Mat that has been passed through an openCV function, except for after invoking Hough Circles.

I've tried the Hough Circles example which uses getMatData after invoking Hough Circles and it works well, but if you try to use getMatData a step before, after invoking GaussianBlur, it will throw that error.

For my use, I am running the following methods:

    RNCv.invokeMethod('blur', {"p1": interMat,"p2": interMat,"p3": blurKernalSize})
    RNCv.invokeMethod('dilate', {"p1": interMat, "p2": interMat, "p3": element, "p4": anchor, "p5": iterDilation})
    RNCv.invokeMethod('erode', {"p1": interMat, "p2": interMat, "p3": element, "p4": anchor, "p5": iterErode})
    RNCv.invokeMethod('Canny', {"p1": interMat,"p2": finalMat,"p3": cannyLow, "p4": cannyHi, "p5": 3})
    const temp = await RNCv.getMatData(finalMat, 0, 0)

The last line will always throw an error. Without it, the image renders well and displays, but I need to get the data.

I saw in the MatManager.java for getMatData() that you have a "TODO: get this to work for different data types checking CvType," does that mean this is a known problem? Is there a workaround I can use for now?

Thanks in advance!

Here is the code where the error occurred:

RNCv.deleteMat(srcMat);
RNCv.deleteMat(dstMat);

Error message.

Attempt to invoke virtual method 'java.lang.Class java.lang.Object.getClass()' on a null object reference

I want to run a ML model on real time images. How can I access real time frames and process it in a custom function?

Hello there,

In attempt to install react-native-opencv3 to my project. I saw this error

Execution failed for task ':app:mergeDebugAssets'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Could not find com.quickbirdstudios:opencv:3.4.4-contrib.
     Searched in the following locations:
       - https://repo.maven.apache.org/maven2/com/quickbirdstudios/opencv/3.4.4-contrib/opencv-3.4.4-contrib.pom

Seem the opencv-contrib was updated the implementation text and I cannot find version 3.4.4 in it https://github.com/quickbirdstudios/opencv-android

Would there be any way to use the camera without using landscape mode?

Hi, there is a error when I pod install.

[!] Error installing libopencv-contrib
[!] /usr/bin/curl -f -L -o /var/folders/9c/3tblps1d3pqdzw43czyhbmlh0000gn/T/d20191210-56685-ijhvwt/file.zip https://www.dropbox.com/s/afpm27620vqfgi3/opencv-contrib-3.4.1-ios-framework.zip?dl=0 --create-dirs --netrc-optional --retry 2

% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- 0:01:15 --:--:-- 0
curl: (7) Failed to connect to www.dropbox.com port 443: Operation timed out

need some help.

Hello, I´m trying to understand why using react navigator on my app is messing with the size of the CvCamera component.

I have defined a basic structure with the form of:
  <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Camera"
        screenOptions={{headerShown: false}}>
        <Stack.Screen name="Camera" component={CustomCamera} />
      </Stack.Navigator>
    </NavigationContainer>

But when i open the camera screen the size is reduced. Which is something that doesnt happen if i simply open the camera.
I am using this stylesheet:

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', position: 'absolute', width: '100%', height: '100%', }, preview: { alignItems: 'center', position: 'absolute', }, });

the framewidth and frameheight have a value of: 1280 and 960 and I am running the app on a Pixel 4 XL emulator from android studio.

This is the size of the camera when using navigation:

and this is the same when i dont use navigation:

Hi There,
In attempt to install react-native-opencv3 on [email protected], I got the following error attached below.

As I don't know which react-native@ libraries are important to opencv3 plugin, I didn't want skip dependencies, running the command

npm install --save --legacy--peer-deps react-native-opencv3

Thus, is there an easy way to map such dependencies and fix them, in order to install react-native-opencv3 module properly?

i.e. using standard command line npm install --save react-native-opencv3

Error message is below

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-native
npm ERR! react-native@"0.67.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"0.59.5" from [email protected]
npm ERR! node_modules/react-native-opencv3
npm ERR! react-native-opencv3@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/iuri/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/iuri/.npm/_logs/2022-02-05T19_15_55_499Z-debug-0.log