https://github.com/edgarjmesquita/vision-camera-object-detector

https://github.com/edgarjmesquita/vision-camera-object-detector

Last synced: 23 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/edgarjmesquita/vision-camera-object-detector
• Owner: EdgarJMesquita
• License: mit
• Created: 2022-10-17T19:55:33.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-26T13:00:57.000Z (about 2 years ago)
• Last Synced: 2024-12-01T21:07:25.264Z (24 days ago)
• Language: Java
• Size: 441 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vision-camera-object-detector

Vision Camera plugin for detecting objects with [MLKit](https://developers.google.com/ml-kit/vision/object-detection).

This package is a plugin for [react-native-vision-camera](https://mrousavy.com/react-native-vision-camera/).

## Installing

### Using npm

```bash

$ npm i vision-camera-object-detector

```

### Using yarn

```bash

$ yarn add vision-camera-object-detector

```

### iOS installation

```bash

$ npx pod-install

```

### Android installation

No additional steps

#

## Requirements

Frame Processors require react-native-reanimated 2.2.0 or higher. Also make sure to add

```js

import 'react-native-reanimated';

```

to the top of your index.js

## Registering the plugin

Add react-native-reanimated plugin in babel.config.js

```js

module.exports = {

  //...

  plugins: [

    [

      'react-native-reanimated/plugin',

      {

        globals: ['__detectObjects'], // add this line

      },

    ],

  ],

};

```

#

## Usage

```tsx

import * as React from 'react';

import { runOnJS } from 'react-native-reanimated';

import { StyleSheet, View, Text, Button, Dimensions } from 'react-native';

import { Camera } from 'react-native-vision-camera';

import { detectObjects, DetectedObject } from 'vision-camera-object-detector';

import {

  useCameraDevices,

  useFrameProcessor,

} from 'react-native-vision-camera';

const Label = ({ label, trackingId }) => {

  return (

    

      {`TrackingId: ${trackingId}`}

      {!!label?.text && `\n${label.text}(index: ${label.index})`}

      {!!label?.confidence &&

        `\n${label.confidence * 100}%(index: ${label.index})`}

    

  );

};

const Rect = ({ object }) => {

  const label = object.labels[0] ?? null;

  return (

    

      

    

  );

};

export default function App() {

  const [hasPermission, setHasPermission] = React.useState(false);

  const [objects, setObjects] = React.useState([]);

  const devices = useCameraDevices();

  const device = devices.back;

  const [enableClassification, setEnableClassification] = React.useState(false);

  const [enableMultipleObjects, setEnableMultipleObjects] =

    React.useState(false);

  React.useEffect(() => {

    (async () => {

      const status = await Camera.requestCameraPermission();

      setHasPermission(status === 'authorized');

    })();

  }, []);

  const frameProcessor = useFrameProcessor(

    (frame) => {

      'worklet';

      const detectedObjects = detectObjects(frame, {

        enableClassification,

        enableMultipleObjects,

      });

      runOnJS(setObjects)(detectedObjects);

    },

    [enableClassification, enableMultipleObjects]

  );

  return device != null && hasPermission ? (

    

      

      {objects.map((obj, index) => (

        

      ))}

      

         setEnableClassification((state) => !state)}

        />

         setEnableMultipleObjects((state) => !state)}

        />

      

    

  ) : null;

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    width: '100%',

  },

  label: {

    top: 0,

    left: 0,

    marginTop: -16,

    fontSize: 14,

    color: 'black',

    backgroundColor: 'white',

  },

  footer: {

    position: 'absolute',

    left: 0,

    bottom: 0,

    right: 0,

    justifyContent: 'center',

    alignItems: 'stretch',

    padding: 20,

  },

});

```

## Developer notes

Currently react-native-vision-camera plugin made with swift won't work on XCode 14.

Apparently Objective-C works fine.

I'm working on refactoring my code from Swift to Objective-C

## New features

- Option for enabling classifications(Android)

- Option for enabling multiple object(Android)

## Coming soon

- Option for enabling classifications(iOS)

- Option for enabling multiple object(iOS)

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)