Creating Frame Processor Plugins

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:

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:

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:

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 or 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 for more visibility

🚀 Next section: Browse Community Plugins