Skip to content

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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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