All Projects → brainhubeu → React Native Opencv Tutorial

brainhubeu / React Native Opencv Tutorial

Licence: mit
👩‍🏫Fully working example of the OpenCV library used together with React Native

Programming Languages

184084 projects - #8 most used programming language
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to React Native Opencv Tutorial

Camera calibration api
A simple Python API for single camera calibration using opencv
Stars: ✭ 36 (-85.25%)
Mutual labels:  camera, opencv
Using A.I. and computer vision to build a virtual personal fitness trainer. (Most Startup-Viable Hack - HackNYU2018)
Stars: ✭ 79 (-67.62%)
Mutual labels:  camera, opencv
Keera Posture
Alleviate your back pain using Haskell and a webcam
Stars: ✭ 48 (-80.33%)
Mutual labels:  camera, opencv
Computer Vision
Computer vision exercise with Python and OpenCV.
Stars: ✭ 17 (-93.03%)
Mutual labels:  camera, opencv
Stereo Vision
This program has been developed as part of a project at the University of Karlsruhe in Germany. The final purpose of the algorithm is to measure the distance to an object by combining two webcams and use them as a Stereo Camera.
Stars: ✭ 160 (-34.43%)
Mutual labels:  camera, opencv
Multi Threading Camera Stream
Multi-threading camera stream to improve video processing performance
Stars: ✭ 18 (-92.62%)
Mutual labels:  camera, opencv
Sitting Posture Recognition
Detects the sitting position of a person
Stars: ✭ 64 (-73.77%)
Mutual labels:  camera, opencv
React Native Openalpr
An open-source React Native automatic license plate recognition package for OpenALPR
Stars: ✭ 415 (+70.08%)
Mutual labels:  camera, opencv
🔥 🔥 🔥 SmartOpenCV是一个OpenCV在Android端的增强库,解决了OpenCV Android SDK在图像预览方面存在的诸多问题,且无需修改OpenCV SDK源码,与OpenCV的SDK解耦
Stars: ✭ 1,869 (+665.98%)
Mutual labels:  camera, opencv
An OpenCV-based structured light processing toolkit.
Stars: ✭ 151 (-38.11%)
Mutual labels:  camera, opencv
V4l2loopback cpp
v4l2loopback usage in C++ and from OpenCV
Stars: ✭ 6 (-97.54%)
Mutual labels:  camera, opencv
Live Video Magnification
An OpenCV/Qt based realtime application for Eulerian Video Magnification / Motion Magnification. Works with multiple videos and cameras at the same time and let's you export the magnified videos.
Stars: ✭ 187 (-23.36%)
Mutual labels:  camera, opencv
Snapchat Clone
👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!
Stars: ✭ 770 (+215.57%)
Mutual labels:  camera, jest
Lightweight Simple CAmera MOtion DETection application.
Stars: ✭ 26 (-89.34%)
Mutual labels:  camera, opencv
Stars: ✭ 547 (+124.18%)
Mutual labels:  camera, opencv
Raspberry PI NDVI Code
Stars: ✭ 57 (-76.64%)
Mutual labels:  camera, opencv
Program for rapidly developing computer vision applications
Stars: ✭ 314 (+28.69%)
Mutual labels:  camera, opencv
Android 平台进行人脸检测的几种方案
Stars: ✭ 106 (-56.56%)
Mutual labels:  camera, opencv
Structured Light based 3D scanner
Stars: ✭ 165 (-32.38%)
Mutual labels:  camera, opencv
A heterogeneous and fully parallel stereo matching algorithm for depth estimation, implementing a local adaptive support weight (ADSW) Guided Image Filter (GIF) cost aggregation stage. Developed in both C++ and OpenCL.
Stars: ✭ 191 (-21.72%)
Mutual labels:  camera, opencv


A fully working example of the OpenCV library used together with React Native.

Blog post | Hire us

license PRs Welcome

What this tutorial is about

This tutorial is how to use React Native together with OpenCV for image processing. This example uses native Java and Objective-C bindings for OpenCV. In this example we use the device's camera to take a photo and detect whether the taken photo is clear or blurred.


The examples below show the situation right after taking a photo. The first one shows what happens if we take a blurry photo and the second one is the situation after we took a clear photo and are able to proceed with it to do whatever we want.

Blurred photo Clear photo

Blog post


  1. XCode
  2. Android Studio

How to run the project

  1. Clone the repository.

  2. cd cloned/repository/path

  3. npm i or yarn

  4. react-native link

  5. Run ./

  6. Download manually the Android pack from (version 3.4.1).

  7. Unzip the package.

  8. Import OpenCV to Android Studio, From File -> New -> Import Module, choose sdk/java folder in the unzipped opencv archive.

  9. Update build.gradle under imported OpenCV module to update 4 fields to match your project's build.gradle

    a) compileSdkVersion
    b) buildToolsVersion
    c) minSdkVersion
    d) targetSdkVersion.

  10. Add module dependency by Application -> Module Settings, and select the Dependencies tab. Click + icon at bottom, choose Module Dependency and select the imported OpenCV module. For Android Studio v1.2.2, to access to Module Settings : in the project view, right-click the dependent module -> Open Module Settings.

  11. react-native run-ios or react-native run-android.

Additional notes

In case of any script related errors, please, check the paths inside this file and change them if they do not match yours. If this script does not run at all since it has no permissions, run chmod 777

If you do not have React Native installed, type npm i -g react-native-cli in the terminal.


reactNativeOpencvTutorial is copyright © 2018-2020 Brainhub It is free software, and may be redistributed under the terms specified in the license.


reactNativeOpencvTutorial is maintained by the Brainhub development team. It is funded by Brainhub and the names and logos for Brainhub are trademarks of Brainhub Sp. z o.o.. You can check other open-source projects supported/developed by our teammates here.


We love open-source JavaScript software! See our other projects or hire us to build your next web, desktop and mobile application with JavaScript.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].