Skip to content

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

@prpgan

Description

@prpgan

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;
}

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;

Logs:

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!

Versions Used:

   "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",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions