0f7ee51333
* Try to log to console via runOnJS * Call `console.log` * Create custom `VisionCameraScheduler` * Fix scheduler call * Call with this * Fix console setting * Move J---- to `java-bindings` * c++ style * Android: 1/2 Create custom Scheduler * Android: 2/2 Use custom Scheduler * Don't use `runOnJS`, use `__callAsync` directly
76 lines
2.4 KiB
Plaintext
76 lines
2.4 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 type { Frame } from 'react-native-vision-camera';
|
|
|
|
/**
|
|
* Scans QR codes.
|
|
*/
|
|
export function scanQRCodes(frame: Frame): string[] {
|
|
'worklet';
|
|
return __scanQRCodes(frame);
|
|
}
|
|
```
|
|
|
|
Users will then have to add the Frame Processor Plugin's name to their `babel.config.js`.
|
|
|
|
For the QR Code Scanner, this will be `__scanQRCodes`:
|
|
|
|
```js {6}
|
|
module.exports = {
|
|
plugins: [
|
|
[
|
|
'react-native-reanimated/plugin',
|
|
{
|
|
globals: ['__scanQRCodes'],
|
|
},
|
|
],
|
|
```
|
|
|
|
:::note
|
|
You have to restart metro-bundler for changes in the `babel.config.js` file to take effect.
|
|
:::
|
|
|
|
## Test it!
|
|
|
|
Simply call the wrapper Worklet in your Frame Processor:
|
|
|
|
```tsx {4}
|
|
function App() {
|
|
const frameProcessor = useFrameProcessor((frame) => {
|
|
'worklet'
|
|
const qrCodes = scanQRCodes(frame)
|
|
console.log(`QR Codes in Frame: ${qrCodes}`)
|
|
}, [])
|
|
|
|
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": ">= 2"`
|
|
5. Implement the Frame Processor Plugin in the iOS, Android and JS/TS Codebase using the guides above
|
|
6. Add installation instructions to the `README.md` to let users know they have to add your frame processor in the `babel.config.js` configuration.
|
|
7. 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.
|
|
8. [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)
|