{"id":19428857,"url":"https://github.com/brainhubeu/react-native-opencv-tutorial","last_synced_at":"2025-04-05T22:10:15.793Z","repository":{"id":40743955,"uuid":"126039046","full_name":"brainhubeu/react-native-opencv-tutorial","owner":"brainhubeu","description":"👩‍🏫Fully working example of the OpenCV library used together with React Native","archived":false,"fork":false,"pushed_at":"2023-02-27T21:01:52.000Z","size":1093,"stargazers_count":326,"open_issues_count":22,"forks_count":103,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-29T21:08:17.300Z","etag":null,"topics":["camera","computer-vision","java","javascript","jest","objective-c","objective-c-plus-plus","opencv","react","react-native","react-native-camera","reactnative"],"latest_commit_sha":null,"homepage":"https://brainhub.eu/blog/opencv-react-native-image-processing/","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brainhubeu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-20T15:22:24.000Z","updated_at":"2025-02-12T00:20:29.000Z","dependencies_parsed_at":"2024-12-16T13:33:11.491Z","dependency_job_id":"71435998-3a4d-4366-acda-88eb731ec40d","html_url":"https://github.com/brainhubeu/react-native-opencv-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainhubeu%2Freact-native-opencv-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainhubeu%2Freact-native-opencv-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainhubeu%2Freact-native-opencv-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brainhubeu%2Freact-native-opencv-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brainhubeu","download_url":"https://codeload.github.com/brainhubeu/react-native-opencv-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406111,"owners_count":20933806,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["camera","computer-vision","java","javascript","jest","objective-c","objective-c-plus-plus","opencv","react","react-native","react-native-camera","reactnative"],"created_at":"2024-11-10T14:16:55.399Z","updated_at":"2025-04-05T22:10:15.769Z","avatar_url":"https://github.com/brainhubeu.png","language":"Java","readme":"\u003cbr/\u003e\n\u003ch1 align=\"center\"\u003e\n  react-native-opencv-tutorial\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  A fully working example of the OpenCV library used together with React Native.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003ca href=\"https://brainhub.eu/blog/opencv-react-native-image-processing/\"\u003eBlog post\u003c/a\u003e | \n    \u003ca href=\"https://brainhub.eu/contact/\"\u003eHire us\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![license](https://img.shields.io/badge/License-MIT-green)](https://github.com/brainhubeu/react-native-opencv-tutorial/blob/master/LICENSE.MD)\n  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\u003c/div\u003e\n\n## What this tutorial is about\nThis 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.\n\n## Demo\n\nThe 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.\n\n![Blurred photo](./images/blurred_photo.png)\n![Clear photo](./images/clear_photo.png)\n\n## Blog post\n\nhttps://brainhub.eu/blog/opencv-react-native-image-processing/\n\n## Prerequisites\n\n1. XCode\n2. Android Studio\n\n## How to run the project\n\n1. Clone the repository.\n2. `cd cloned/repository/path`\n3. `npm i` or `yarn`\n4. `react-native link`\n5. Run `./downloadAndInsertOpenCV.sh`.\n6. Download manually the Android pack from https://opencv.org/releases.html (version 3.4.1).\n7. Unzip the package.\n8. Import OpenCV to Android Studio, From File -\u003e New -\u003e Import Module, choose sdk/java folder in the unzipped opencv archive.\n9. Update build.gradle under imported OpenCV module to update 4 fields to match your project's `build.gradle`\u003cbr/\u003e\n\n\ta) compileSdkVersion\u003cbr/\u003e\n\tb) buildToolsVersion\u003cbr/\u003e\n\tc) minSdkVersion\u003cbr/\u003e\n\td) targetSdkVersion.\n\n10. Add module dependency by Application -\u003e 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 -\u003e Open Module Settings.\n11. `react-native run-ios` or `react-native run-android`.\n\n### Additional notes\nIn case of any `downloadAndInsertOpenCV.sh ` script related errors, please, check the paths inside this file and change them if they do not match yours.\nIf this script does not run at all since it has no permissions, run `chmod 777 downloadAndInsertOpenCV.sh`.\n\nIf you do not have `React Native` installed, type `npm i -g react-native-cli` in the terminal.\n\n### License\n\nreactNativeOpencvTutorial is copyright © 2018-2020 [Brainhub](https://brainhub.eu/?utm_source=github) It is free software, and may be redistributed under the terms specified in the [license](LICENSE.MD).\n\n### About\n\nreactNativeOpencvTutorial 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. \n\n[![Brainhub](https://brainhub.eu/brainhub.svg)](https://brainhub.eu/?utm_source=github)\n\nWe love open-source JavaScript software! See our other projects or hire us to build your next web, desktop and mobile application with JavaScript.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrainhubeu%2Freact-native-opencv-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrainhubeu%2Freact-native-opencv-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrainhubeu%2Freact-native-opencv-tutorial/lists"}