07027d8010
* fix: Rename `getFrameProcessorPlugin` to `initFrameProcessorPlugin` * fix: Make nullable, add comments * Format * Update FrameProcessorPlugin.java * Update FrameProcessorPlugin.h * fix: Fix dead links * Call super constructor * Update ExampleFrameProcessorPlugin.java * fix: Init calls
60 lines
2.1 KiB
Plaintext
60 lines
2.1 KiB
Plaintext
---
|
|
id: frame-processors-plugins-final
|
|
title: Creating Frame Processor Plugins
|
|
sidebar_label: Finish creating your Frame Processor Plugin
|
|
---
|
|
|
|
## Expose your Frame Processor Plugin to JS
|
|
|
|
To make the Frame Processor Plugin available to the Frame Processor Worklet Runtime, create the following wrapper function in JS/TS:
|
|
|
|
```ts
|
|
import { VisionCameraProxy, Frame } from 'react-native-vision-camera'
|
|
|
|
const plugin = VisionCameraProxy.initFrameProcessorPlugin('scanFaces')
|
|
|
|
/**
|
|
* Scans faces.
|
|
*/
|
|
export function scanFaces(frame: Frame): object {
|
|
'worklet'
|
|
if (plugin == null) throw new Error('Failed to load Frame Processor Plugin "scanFaces"!')
|
|
return plugin.call(frame)
|
|
}
|
|
```
|
|
|
|
## Test it!
|
|
|
|
Simply call the wrapper Worklet in your Frame Processor:
|
|
|
|
```tsx
|
|
function App() {
|
|
const frameProcessor = useFrameProcessor((frame) => {
|
|
'worklet'
|
|
// highlight-next-line
|
|
const faces = scanFaces(frame)
|
|
console.log(`Faces in Frame: ${faces}`)
|
|
}, [])
|
|
|
|
return (
|
|
<Camera frameProcessor={frameProcessor} {...cameraProps} />
|
|
)
|
|
}
|
|
```
|
|
|
|
## Next Steps
|
|
|
|
If you want to distribute your Frame Processor Plugin, simply use npm.
|
|
|
|
1. Create a blank Native Module using [bob](https://github.com/callstack/react-native-builder-bob) or [create-react-native-module](https://github.com/brodybits/create-react-native-module)
|
|
2. Name it `vision-camera-plugin-xxxxx` where `xxxxx` is the name of your plugin
|
|
3. Remove the generated template code from the Example Native Module
|
|
4. Add VisionCamera to `peerDependencies`: `"react-native-vision-camera": ">= 3"`
|
|
5. Implement the Frame Processor Plugin in the iOS, Android and JS/TS Codebase using the guides above
|
|
6. Publish the plugin to npm. Users will only have to install the plugin using `npm i vision-camera-plugin-xxxxx` and add it to their `babel.config.js` file.
|
|
7. [Add the plugin to the **official VisionCamera plugin list](https://github.com/mrousavy/react-native-vision-camera/edit/main/docs/docs/guides/FRAME_PROCESSOR_PLUGIN_LIST.mdx) for more visibility
|
|
|
|
<br />
|
|
|
|
#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugin-list)
|