Skip to content

Commit

Permalink
docs: New Frame Processor Plugins docs (#2434)
Browse files Browse the repository at this point in the history
  • Loading branch information
mrousavy authored Jan 25, 2024
1 parent bc6f954 commit 4041ee8
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 15 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ cd ios && pod install
* [Guides](https://react-native-vision-camera.com/docs/guides)
* [API](https://react-native-vision-camera.com/docs/api)
* [Example](./package/example/)
* [Frame Processor Plugins](https://react-native-vision-camera.com/docs/guides/frame-processor-plugin-list)
* [Frame Processor Plugins](https://react-native-vision-camera.com/docs/guides/frame-processor-plugins)

### ShadowLens

Expand Down
16 changes: 11 additions & 5 deletions docs/docs/guides/FRAME_PROCESSORS.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -214,24 +214,30 @@ See: ["Creating Frame Processor Plugins"](/docs/guides/frame-processors-plugins-

### Using Community Plugins

Community Frame Processor Plugins are distributed through npm. To install the [vision-camera-image-labeler](https://github.com/mrousavy/vision-camera-image-labeler) plugin, run:
Community Frame Processor Plugins are distributed through npm. To install the [vision-camera-resize-plugin](https://github.com/mrousavy/vision-camera-resize-plugin) plugin, run:

```bash
npm i vision-camera-image-labeler
yarn add vision-camera-resize-plugin
cd ios && pod install
```

That's it! 🎉 Now you can use it:

```ts
const { resize } = useResizePlugin()

const frameProcessor = useFrameProcessor((frame) => {
'worklet'
const labels = labelImage(frame)
const smallerFrame = resize(frame, {
size: {
// ...
},
})
// ...
}, [])
}, [resize])
```

Check out [Frame Processor community plugins](/docs/guides/frame-processor-plugin-list) to discover available community plugins.
Check out [Frame Processor community plugins](/docs/guides/frame-processor-plugins) to discover available community plugins.

## Selecting a Format for a Frame Processor

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/guides/FRAME_PROCESSORS_CREATE_PLUGIN_CPP.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,4 +104,4 @@ Then include it in your C++ code:

<br />

#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugin-list)
#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugins)
2 changes: 1 addition & 1 deletion docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,4 @@ If you want to distribute your Frame Processor Plugin, simply use npm.

<br />

#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugin-list)
#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugins)
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
---
id: frame-processor-plugin-list
title: Community Plugins
sidebar_label: Community Plugins
id: frame-processor-plugins
title: Frame Processor Plugins
sidebar_label: Frame Processor Plugins
---

These are VisionCamera Frame Processor Plugins created by the community.
Frame Processor Plugins are native plugins that can process data in a Frame and return values to a JS Frame Processor.

These plugins are written in native languages such as Java/Kotlin, Objective-C/Swift, or even C++ to make use of GPU-acceleration, low-level APIs, and overall faster performance.

Similar to react-native libraries, Frame Processor Plugins are distributed through npm and come with a native module boilerplate so they can be autolinked.

## Installing a Plugin

1. Install using npm:

```
npm i vision-camera-xxxxx
yarn add vision-camera-xxxxx
cd ios && pod install
```

Expand All @@ -20,8 +24,8 @@ cd ios && pod install
## Plugin List

* [mrousavy/**react-native-fast-tflite**](https://github.com/mrousavy/react-native-fast-tflite): A plugin to run any Tensorflow Lite model inside React Native, written in C++ with GPU acceleration.
* [mrousavy/**vision-camera-resize-plugin**](https://github.com/mrousavy/vision-camera-resize-plugin): A plugin for fast frame resizing, cropping and YUV/RGB pixel-format conversion using SIMD and CPU-Vector acceleration.
* [mrousavy/**vision-camera-image-labeler**](https://github.com/mrousavy/vision-camera-image-labeler): A plugin to label images using MLKit Vision Image Labeler.
* [mrousavy/**vision-camera-resize-plugin**](https://github.com/mrousavy/vision-camera-resize-plugin): A plugin for fast frame resizing to optimize execution speed of expensive AI algorithms.
* [rodgomesc/**vision-camera-face-detector**](https://github.com/rodgomesc/vision-camera-face-detector): A plugin to detect faces using MLKit Vision Face Detector.
* [rodgomesc/**vision-camera-qrcode-scanner**](https://github.com/rodgomesc/vision-camera-qrcode-scanner): A plugin to read barcodes using MLKit Vision QrCode Scanning
* [mgcrea/**vision-camera-barcode-scanner**](https://github.com/mgcrea/vision-camera-barcode-scanner): A high performance barcode scanner for React Native using VisionCamera
Expand Down
2 changes: 1 addition & 1 deletion docs/sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ module.exports = {
label: 'Realtime Frame Processing',
items: [
'guides/frame-processors',
'guides/frame-processor-plugins',
'guides/pixel-formats',
'guides/frame-processors-tips',
'guides/frame-processor-plugin-list',
'guides/skia-frame-processors',
{
type: 'category',
Expand Down

1 comment on commit 4041ee8

@vercel
Copy link

@vercel vercel bot commented on 4041ee8 Jan 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.