How can I import OpenCV library to React-Native project

问题

I tried to import OpenCV via native code but that not worked and I also tried react-native-opencv library but that library doesn't contain all OpenCV methods.

How can I achieve to use OpenCV in my react-native project?

Thanks in advance.

回答1:

I have been struggling with OpenCV in react-native for a week now and finally got it working. There is this very good article https://brainhub.eu/blog/opencv-react-native-image-processing/ together with this repo https://github.com/brainhubeu/react-native-opencv-tutorial which describes in details on how to do get it running. However I could not make the code from this repo working by following the steps described or following any other tutorial/video I could find. So in case if anyone is facing the same problem you can try this steps that made the app from the mentioned repo working with OpenCV v4.5 on my Android 10 device.

Open terminal and initialize new React-Native project
```
npx react-native init NAME_OF_YOUR_PROJECT
```

Navigate to path /main

cd NAME_OF_YOUR_PROJECT/android/app/src/main

Create new folder named jniLibs
```
mkdir jniLibs
```
Download and extract latest OpenCV for Android (tested with OpenCV 4.5) from https://opencv.org/releases/
Rename the "sdk" folder in the extracted folder (OpenCV-android-sdk) to "opencv"
Copy content from extracted folder (OpenCV-android-sdk/opencv/native/libs/) to newly created ./jniLibs
```
cp -r /PATH_TO_EXTRACTED_OPENCV_FOLDER/OpenCV-android-sdk/opencv/native/libs/ ./jniLibs
```
Open Android Studio and open Android folder of your projects dir

File -> Open -> select */NAME_OF_YOUR_PROJECT/android
Import OpenCV to your project

File -> New -> Import module -> select the folder you renamed to opencv

(IMPORTANT! Some tutorials say to select the "java" folder inside this folder - don't do that)
Under Gradle Scripts: open build.gradle(:opencv) and build.gradle(YOUR_PROJECT_NAME) Change both to matching numbers - in my case:
```
minSdkVersion = 21

compileSdkVersion = 29
```
Add opencv to projects dependencies

File -> Project Structure -> Dependencies -> select app and press the "+" sign (located "underneath All dependencies") -> check the checkbox next to opencv -> press OK

In build.gradle(YOUR_APP_NAME) change version of gradle to 4.1.0

dependencies {
    classpath("com.android.tools.build:gradle:4.1.0")
    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

Now open build.gradle(Project: NAME_OF_YOUR_PROJECT .app) and change java version in compile options and add packagin option with some pickfirst option. Also enable multidex option and if you wish to use react-native-camera add the missing dimension strategy. Should look something like this:

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8   
}



 packagingOptions {
       pickFirst 'lib/x86/libc++_shared.so'
       pickFirst 'lib/x86_64/libc++_shared.so'
       pickFirst 'lib/armeabi-v7a/libc++_shared.so'
       pickFirst 'lib/arm64-v8a/libc++_shared.so'
   }

   defaultConfig {
       applicationId "com.stackoverflow" // !!! if copy-pasting change applicationId to yours
       minSdkVersion rootProject.ext.minSdkVersion
       targetSdkVersion rootProject.ext.targetSdkVersion
       versionCode 1
       versionName "1.0"
       multiDexEnabled true
       missingDimensionStrategy 'react-native-camera', 'general'
   }

Open build.gradle(:opencv) and enable multidex option in default config. If you wish to use react-native-camera then also add missing dimension strategy. Should look something like this

defaultConfig {
    minSdkVersion 21
    targetSdkVersion 29

    versionCode openCVersionCode
    versionName openCVersionName
    multiDexEnabled true
    missingDimensionStrategy 'react-native-camera', 'general'

    externalNativeBuild {
        cmake {
            arguments "-DANDROID_STL=c++_shared"
            targets "opencv_jni_shared"
        }
    }
}

Also change the version of java in compile options (must be same as in build.gradle(:app). Should look something like this

compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
}

Add the following user permissions to your /PATH_TO_YOUR_PROJECT/android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

Open gradle wrapper properties (/PATH_TO_YOUR_PROJECT/android/gradle/wrapper/gradle.properties) and change the version number of gradle
```
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
```
Go to /YOUR_PROJECT_PATH/android/app/src/main/java/com/ and create reactlibrary folder then create two files inside that folder:

RNOpenCvLibraryModule.java

RNOpenCvLibraryPackage.java

Fill them with the same content as found on this GIT repo https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/android/app/src/main/java/com/reactlibrary

Open MainApplication.java and add this "packages.add(new RNOpenCvLibraryPackage());" to getPackage() method. Should look something like this:

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new RNOpenCvLibraryPackage()); // ADD THIS
  // Packages that cannot be autolinked yet can be added manually here, for example:
  // packages.add(new MyReactNativePackage());
  return packages;
}

Also add this to the onCreate() method:

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    if (!OpenCVLoader.initDebug()) { // ADD THIS
      Log.d("OpenCv", "Error while init"); // AND THIS
    } // DON'T FORGET THE "}"
  }

Dont forget to add proper imports in the begining of your "MainApplication.java"

import org.opencv.android.OpenCVLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

Syncronize your project

File -> Syncronize Your Project with Gradle Files

Open the terminal and navigate to your project. Add this packages

cd /PATH_TO_YOUR_PROJECT/
npm i react-native-easy-toast --save
npm i react-native-svg --save
npm install --save react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git

(Make sure react-native-camera is installed from GIT repo otherwise you will encounter errors)

Create new folder nammed "src" in your PROJECT_PATH and copy the content of this repos ("https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/src") "src" folder to yours (/PATH_TO_YOUR_PROJECT/src/)
```
mkdir src
```
Copy the content of this repos "https://github.com/brainhubeu/react-native-opencv-tutorial/blob/master/App.js" App.js file and replace the content in your App.js file (located in YOUR_PROJECT_PATH)
Start react-native
```
npx react-native start
```
Run on Android device
```
npx react-native run-android
```

回答2:

you can use this lib react-native-opencv3 or you can exploit this project for using native Java and Objective-C bindings for OpenCV in react-native

回答3:

If someone is still wondering here's the solution. It is quite some work to just set it up. You will have to write your OpenCV code in Java. https://stackoverflow.com/a/63116300/10333905

来源：https://stackoverflow.com/questions/59800761/how-can-i-import-opencv-library-to-react-native-project

标签

react-native

OpenCV