https://github.com/jaroslawkrol/vision-camera-realtime-object-detection

VisionCamera Frame Processor Plugin to detect objects using TensorFlow Lite Task Vision
https://github.com/jaroslawkrol/vision-camera-realtime-object-detection

ml object-detection react-native tensorflow

Last synced: 25 days ago
JSON representation

VisionCamera Frame Processor Plugin to detect objects using TensorFlow Lite Task Vision

• Host: GitHub
• URL: https://github.com/jaroslawkrol/vision-camera-realtime-object-detection
• Owner: jaroslawkrol
• License: mit
• Created: 2023-02-20T20:34:48.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-02T22:32:08.000Z (almost 2 years ago)
• Last Synced: 2024-12-05T16:38:44.297Z (about 1 month ago)
• Topics: ml, object-detection, react-native, tensorflow
• Language: Jupyter Notebook
• Homepage:
• Size: 20.8 MB
• Stars: 108
• Watchers: 4
• Forks: 13
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        






React Native
Realtime Object Detection




:camera: [VisionCamera](https://github.com/mrousavy/react-native-vision-camera) Frame Processor Plugin for object detection using [TensorFlow Lite Task Vision](https://www.tensorflow.org/lite/inference_with_metadata/task_library/object_detector).

With this library, you can use the benefits of Machine Learning in your React Native app without a single line of native code. [Create your own model](https://www.tensorflow.org/lite/models/modify/model_maker/object_detection) or find and use one commonly available on [TFHub](https://tfhub.dev/). Implement the solution in a few simple steps:

## Minimum requirements​

* `react-native` >= 0.71.3 

* `react-native-reanimated` >= 2.14.4

* `react-native-vision-camera` >= 2.15.4

You can find the model structure requirements [here](https://www.tensorflow.org/lite/examples/object_detection/overview#model_description)

## Installation

Install the required packages in your React Native project:

```shell script

npm install --save vision-camera-realtime-object-detection  

# or yarn 

yarn add vision-camera-realtime-object-detection

```

If you're on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

```shell script

npx pod-install

```

Add this to your `babel.config.js`

```

[

  'react-native-reanimated/plugin',

  {

    globals: ['__detectObjects'],

  },

]

```

---

:bangbang: Make sure you correctly setup `react-native-reanimated` and insert as a first line of your `index.tsx`

```js

import 'react-native-reanimated'

```

## Usage

### Step 1

To add your custom TensorFlow Lite model to your app, copy your `*.tflite` file to your `asset/model` directory

    ...

    |-- assets

        |-- images

        |-- fonts

        |-- model

            |-- your_custom_model.tflite

    |-- src

        |-- App.tsx

    ...

### Step 2

Add to your `react-native.config.js`

```js

...

 "assets": [

    "./assets/model/",

  ]

```

and run command: 

```shell script

npx react-native-asset

```

### Step 3

:tada: Use Realtime Object Deteciton in your own component!

```js

import { DetectedObject, detectObjects, FrameProcessorConfig } from 'vision-camera-realtime-object-detection';

// ...

const frameProcessorConfig: FrameProcessorConfig = {

    modelFile: 'your_custom_model.tflite', //