diff --git a/README.md b/README.md index dc4cca8..4979a6e 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/docs/docs/guides/FRAME_PROCESSORS.mdx b/docs/docs/guides/FRAME_PROCESSORS.mdx index a9c0961..cb12bd0 100644 --- a/docs/docs/guides/FRAME_PROCESSORS.mdx +++ b/docs/docs/guides/FRAME_PROCESSORS.mdx @@ -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 diff --git a/docs/docs/guides/FRAME_PROCESSORS_CREATE_PLUGIN_CPP.mdx b/docs/docs/guides/FRAME_PROCESSORS_CREATE_PLUGIN_CPP.mdx index f640d89..7ad33ea 100644 --- a/docs/docs/guides/FRAME_PROCESSORS_CREATE_PLUGIN_CPP.mdx +++ b/docs/docs/guides/FRAME_PROCESSORS_CREATE_PLUGIN_CPP.mdx @@ -104,4 +104,4 @@ Then include it in your C++ code:
-#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugin-list) +#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugins) diff --git a/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx b/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx index 29c339b..87ec18f 100644 --- a/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx +++ b/docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx @@ -56,4 +56,4 @@ If you want to distribute your Frame Processor Plugin, simply use npm.
-#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugin-list) +#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugins) diff --git a/docs/docs/guides/FRAME_PROCESSOR_PLUGIN_LIST.mdx b/docs/docs/guides/FRAME_PROCESSOR_PLUGINS.mdx similarity index 79% rename from docs/docs/guides/FRAME_PROCESSOR_PLUGIN_LIST.mdx rename to docs/docs/guides/FRAME_PROCESSOR_PLUGINS.mdx index 6a3b1f1..9607362 100644 --- a/docs/docs/guides/FRAME_PROCESSOR_PLUGIN_LIST.mdx +++ b/docs/docs/guides/FRAME_PROCESSOR_PLUGINS.mdx @@ -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 ``` @@ -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 diff --git a/docs/sidebars.js b/docs/sidebars.js index 73bcd9d..d37aa39 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -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',