OpenCV for React Native

asked 2018-11-08 10:58:24 -0500


I have a requirement for using OpenCV in my React Native project. According to my research, with the Javascript API, OpenCV is only supported in browsers officially.

Can you please suggest me some solution for integrating opencv and using the javascript API in my React Native project?


edit retag flag offensive close merge delete


don't expect a real answer here, as there are no web/app devs around (opencv is mainly a c++ library) but:

OpenCV is only supported in browsers officially.

that is only half-true. sure, the current image/video acquisition, and also showing images/video only will work in a web-browser context. if you got some other platform, you need to solve those things on your own.

somehow, you fail to describe your use-case , and without that, it's an XY-problem !

berak gravatar imageberak ( 2018-11-08 11:06:02 -0500 )edit

I need to use some image processing functions like GaussianBlur, adaptiveThreshold, medianBlur, morphologyEx, bounndingRect etc. Can you suggest some way?

I was hoping if someone knows some way to integrate the javascript API into the React Native environment as there would be some Javascript developers also in this forum.

gauravgrover95 gravatar imagegauravgrover95 ( 2018-11-09 03:58:03 -0500 )edit

and what would be your "hardware context" (if not a webbrowser ?) , just curious.

what's the input, and the output ?

berak gravatar imageberak ( 2018-11-09 04:05:32 -0500 )edit

I am developing a cross-platform mobile application for both Android and iOS. I want to capture an image from the camera. And the output of the program would basically be a numerical value based on the color intensity difference between the one captured and one pre-loaded into the application. Hope that explains the use case better now.

gauravgrover95 gravatar imagegauravgrover95 ( 2018-11-09 04:09:14 -0500 )edit

do you have any way there to access actual "pixels" ?

also, at currently 12.8mb, opencv.js is NOT a lightweight library (it's main selling point is probably the dnn integration).

maybe something slimmer would already do the job?

berak gravatar imageberak ( 2018-11-09 04:17:46 -0500 )edit

Currently, I am using react-native-image-picker. I believe it can return the image in either of the jpeg or base64 format. I believe, I would be able to extract the pixel values from the jpg format somehow.

gauravgrover95 gravatar imagegauravgrover95 ( 2018-11-09 04:27:23 -0500 )edit

you can see here, what's supported inside the js wrapper -- so, sadly no imdecode() or imencode(), meaning, you really need pixels (or , hmm a html canvas)

berak gravatar imageberak ( 2018-11-09 04:41:27 -0500 )edit

yeah. that is actually the whole issue. I understand that opencvjs supports the html canvas element for image processing. I either need to have something similar to html canvas context in my app or some adaptor for opencv library to support the formats supported by the react-native (RN) app. I think I can find another RN camera library that can output the image in the pure pixel format. I think using it, I will be able to utilize opencv js library to process the image? Am I in the right direction? I appreciate all your help. Thanks a lot.

gauravgrover95 gravatar imagegauravgrover95 ( 2018-11-09 04:47:25 -0500 )edit

then ofc, you can. there are constructors for Mat with pixels, and ways to get them back after soome manipulations

berak gravatar imageberak ( 2018-11-09 04:52:43 -0500 )edit