🐛 Error after calling initFrameProcessorPlugin

[xulihang]

What's happening?

I am trying to create a frame processor plugin for v3.

It produces the system/frame-processors-unavailable: Frame Processors are not enabled!, js engine: hermes error after calling the following function:

const plugin = VisionCameraProxy.initFrameProcessorPlugin('decode')

I've added the frame processor on the Android native side:

public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    VisionCameraDynamsoftBarcodeReaderModule module = new VisionCameraDynamsoftBarcodeReaderModule(reactContext);
    FrameProcessorPluginRegistry.addFrameProcessorPlugin("decode", options -> new VisionCameraDBRPlugin(module));
    modules.add(module);
    return modules;
  }

Reproduceable Code

You can find the whole project here: https://github.com/tony-xlh/vision-camera-dynamsoft-barcode-reader/tree/34b367ea4539bac219ad1113ba32ca480efaef80

Relevant log output

system/frame-processors-unavailable: Frame Processors are not enabled!, js engine: hermes
 LOG  Running "VisionCameraDynamsoftBarcodeReaderExample" with {"rootTag":11}
 ERROR  Invariant Violation: "VisionCameraDynamsoftBarcodeReaderExample" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

Camera Device

the default camera

Device

OPPO A72 Android 12

VisionCamera Version

3.5.1

Can you reproduce this issue in the VisionCamera Example app?

I didn't try (⚠️ your issue might get ignored & closed if you don't try this)

Additional information

• [ ] I am using Expo
• [x] I have enabled Frame Processors (react-native-worklets-core)
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar issues in this repository and found none.

[mrousavy]

That error is thrown in FrameProcessorPlugins.ts when the worklets lib is not found: https://github.com/mrousavy/react-native-vision-camera/blob/86b3b9e1d73ebee0a1938135616935c7e479b116/package/src/FrameProcessorPlugins.ts#L75-L85

Did you install react-native-worklets-core?

[xulihang]

Did you install react-native-worklets-core?

Yes. I do have it installed:

https://github.com/tony-xlh/vision-camera-dynamsoft-barcode-reader/blob/34b367ea4539bac219ad1113ba32ca480efaef80/example/package.json#L16-L17

 "react-native-vision-camera": "^3.5.1",
 "react-native-worklets-core": "https://github.com/margelo/react-native-worklets-core.git#800cf1b2cc65704cf5dfbc725aef1ac1dff32481"

[mrousavy]

But not in your root package.json: https://github.com/tony-xlh/vision-camera-dynamsoft-barcode-reader/blob/34b367ea4539bac219ad1113ba32ca480efaef80/package.json#L70-L72

Maybe you also need it there, idk

[xulihang]

I see. I will add it as a devDependency to have a try.

[xulihang]

I've added the dependency and now I am getting the following error:

 ERROR  Invariant Violation: Tried to register two views with the same name CameraView, js engine: hermes
    at BarcodeScanner (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:125610:41)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at App (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:123037:41)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at AppContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59308:36)
    at VisionCameraDynamsoftBarcodeReaderExample(RootComponent) (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:108565:28)
 ERROR  Invariant Violation: Tried to register two views with the same name CameraView, js engine: hermes
    at BarcodeScanner (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:125610:41)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at App (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:123037:41)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at AppContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59308:36)
    at VisionCameraDynamsoftBarcodeReaderExample(RootComponent) (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:108565:28)
 ERROR  Invariant Violation: Tried to register two views with the same name CameraView, js engine: hermes
    at BarcodeScanner (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:125610:41)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at App (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:123037:41)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59464:43)
    at AppContainer (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:59308:36)
    at VisionCameraDynamsoftBarcodeReaderExample(RootComponent) (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.visioncameradynamsoftbarcodereaderexample&modulesOnly=false&runModule=true:108565:28)
 ERROR  TypeError: Cannot read property 'useCameraDevice' of undefined

This error is located at:
    in BarcodeScanner (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in VisionCameraDynamsoftBarcodeReaderExample(RootComponent), js engine: hermes
 ERROR  TypeError: Cannot read property 'useCameraDevice' of undefined

This error is located at:
    in BarcodeScanner (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in VisionCameraDynamsoftBarcodeReaderExample(RootComponent), js engine: hermes

The error goes away if I don't call initFrameProcessorPlugin.

[xulihang]

In the log of the native side, I can see that the plugin is found.

Loading react-native-worklets-core...
2023-10-25 10:28:38.438  8052-8198  ReactNativeJS           com...dynamsoftbarcodereaderexample  I  Worklets loaded successfully
2023-10-25 10:28:38.446  8052-8198  VisionCameraProxy       com...dynamsoftbarcodereaderexample  I  Initializing VisionCameraProxy...
2023-10-25 10:28:38.446  8052-8198  VisionCameraProxy       com...dynamsoftbarcodereaderexample  I  Creating Worklet Context...
2023-10-25 10:28:38.450  8052-8198  VisionCameraProxy       com...dynamsoftbarcodereaderexample  I  Worklet Context created!
2023-10-25 10:28:38.458  8052-8198  FrameProce...inRegistry com...dynamsoftbarcodereaderexample  I  Looking up Frame Processor Plugin "decode"...
2023-10-25 10:28:38.458  8052-8198  FrameProce...inRegistry com...dynamsoftbarcodereaderexample  I  Frame Processor Plugin "decode" found! Initializing...

[xulihang]

@mrousavy Might be related to this issue: https://github.com/mrousavy/react-native-vision-camera/issues/626 ?

[xulihang]

I've rebased my code https://github.com/tony-xlh/vision-camera-dynamsoft-barcode-reader/tree/vision-camera-v3-new on this ocr plugin and this error no longer appears.

[mrousavy]

Awesome!

[mrousavy]

Did we add that barcode reader to the community plugin docs?

[xulihang]

Did we add that barcode reader to the community plugin docs?

It has been added.

Recent versions bring breaking changes. I have to update them to keep up with the new versions.

[mrousavy]

Recent versions bring breaking changes.

Yea, sorry about that! 😅

[xulihang]

I figured out that I have to add vision camera and worklets-core into the peerDependencies:

"peerDependencies": {
    "react": "*",
    "react-native": "*",
    "react-native-vision-camera": "*",
    "react-native-worklets-core": "*"
  },