Skip to content

🐛 IOS - App crashes when calling JS function inside frameProcessor on React Native 0.79 #3666

@prpgan

Description

@prpgan

What's happening?

The app crashes when trying to call runOnJS (or any JS function) inside a frameProcessor in react-native-vision-camera(I am using react-native-text-recognization) plugin.
If I only log using console.log(frame) inside the frame processor, the app works fine, but any attempt to call a JS function immediately causes a crash (no red screen, hard crash).

I have tried using, runOnJs from reanimation as well as worklets, no fix found.

Below is the code where the issues shows in Xcode:
jsi::String JSCRuntime::createStringFromUtf8(
const uint8_t* str,
size_t length) {
std::string tmp(reinterpret_cast<const char*>(str), length);
JSStringRef stringRef = JSStringCreateWithUTF8CString(tmp.c_str());
auto result = createString(stringRef);
JSStringRelease(stringRef);
return result;
}

Reproduceable Code

import React from 'react';
import { StyleSheet } from "react-native";
import {
  Camera,
  useCameraDevice,
  useFrameProcessor,
} from "react-native-vision-camera";
import { useTextRecognition } from "react-native-vision-camera-text-recognition";
import { runOnJS } from 'react-native-reanimated';

function App() {
  const device = useCameraDevice('back');
  const options = { language : 'latin' }
  const {scanText} = useTextRecognition(options)
      const logFrameProcessorCalled = () => {
        console.log('FrameProcessor called');
    };

    const frameProcessor = useFrameProcessor(() => {
        'worklet';
        runOnJS(logFrameProcessorCalled)();
    }, []);

  return (
    <>
      {!!device && (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive
          mode={'recognize'}
          frameProcessor={frameProcessor}
        />
      )}
    </>
  );
}
export default App;

babel.config.js

module.exports = {
plugins: [
'react-native-worklets-core/plugin',
['react-native-reanimated/plugin', { processNestedWorklets: true }],
],
presets: ['module:@react-native/babel-preset'],
};

Relevant log output

13:08:17.904: [info] 📸 VisionCamera.configureDevice(configuration:): Successfully configured Input Device!
13:08:17.904: [info] 📸 VisionCamera.configureOutputs(configuration:): Configuring Outputs...
13:08:17.904: [info] 📸 VisionCamera.configureOutputs(configuration:): Adding Video Data output...
13:08:17.905: [info] 📸 VisionCamera.configurePreviewOrientation(_:): Updating Preview rotation: portrait...
13:08:17.905: [info] 📸 VisionCamera.configureOutputOrientation(_:): Updating Outputs rotation: portrait...
13:08:17.905: [info] 📸 VisionCamera.configureOutputs(configuration:): Successfully configured all outputs!
13:08:17.907: [info] 📸 VisionCamera.setTargetOutputOrientation(_:): Setting target output orientation from device to device...
13:08:17.909: [info] 📸 VisionCamera.getPixelFormat(for:): Available Pixel Formats: ["420v", "420f", "BGRA", "&8v0", "&8f0", "&BGA"], finding best match... (pixelFormat="yuv", enableHdr={false}, enableBufferCompression={false})
13:08:17.909: [info] 📸 VisionCamera.getPixelFormat(for:): Using PixelFormat: 420f...
[CleverTap recordEvent:withProps]
13:08:18.075: [info] 📸 VisionCamera.init(frame:session:): Preview Layer started previewing.
13:08:18.075: [info] 📸 VisionCamera.configure(_:): Beginning AudioSession configuration...
13:08:18.075: [info] 📸 VisionCamera.configureAudioSession(configuration:): Configuring Audio Session...
13:08:18.077: [info] 📸 VisionCamera.configure(_:): Beginning Location Output configuration...
13:08:18.078: [info] 📸 VisionCamera.configure(_:): Finished Location Output configuration!
13:08:18.078: [info] 📸 VisionCamera.configure(_:): Committed AudioSession configuration!

Camera Device

{
  "formats": [],
  "hardwareLevel": "full",
  "hasFlash": true,
  "hasTorch": true,
  "id": "com.apple.avfoundation.avcapturedevice.built-in_video:0",
  "isMultiCam": false,
  "maxExposure": 8,
  "maxZoom": 123.75,
  "minExposure": -8,
  "minFocusDistance": 12,
  "minZoom": 1,
  "name": "Back Camera",
  "neutralZoom": 1,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "position": "back",
  "sensorOrientation": "portrait",
  "supportsFocus": true,
  "supportsLowLightBoost": false,
  "supportsRawCapture": false
}

Device

Iphone 12

VisionCamera Version

       "react-native": "^0.79.1" ,"react-native-vision-camera": "^4.7.2",       "react-native-vision-camera-text-recognition": "^3.1.1",     "react-native-worklets-core": "^1.3.3",

Can you reproduce this issue in the VisionCamera Example app?

Yes, I can reproduce the same issue in the Example app here

Additional information

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐛 bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions