🐛 Get black screen when useSkiaFrameProcessor

[phuocsanh]

What's happening?

I use useSkiaFrameProcessor, i get black screen but it work when useFrameProcessor.

Reproduceable Code

<VisionCamera
            style={StyleSheet.absoluteFill}
            device={device}
            fps={fps}
            isActive
            ref={ref}
            exposure={0}
            torch={flash}
            format={format}
            // video
            // photo
            // videoHdr={videoHdr}
            // photoHdr={photoHdr}
            enableFpsGraph={true}
            enableZoomGesture={false}
            pixelFormat={pixelFormat}
            outputOrientation="device"
            // photoQualityBalance="speed"
            // animatedProps={cameraAnimatedProps}
            onStarted={() => console.log('Camera started!')}
            onStopped={() => console.log('Camera stopped!')}
            onPreviewStarted={() => console.log('Preview started!')}
            onPreviewStopped={() => console.log('Preview stopped!')}
            onOutputOrientationChanged={o =>
              console.log(`Output orientation changed to ${o}!`)
            }
            onPreviewOrientationChanged={o =>
              console.log(`Preview orientation changed to ${o}!`)
            }
            onUIRotationChanged={degrees =>
              console.log(`UI Rotation changed: ${degrees}°`)
            }
            onError={onError}
            {...props}
          />
and use: 
export const DetectScreen = () => {
  // const frameProcessor = useLandmarks({isPose: true});
  // const frameProcessor = useFrameProcessor(frame => {
  //   'worklet';
  //   console.log('DetectScreen', frame.width);
  // }, []);
  const frameProcessor = useSkiaFrameProcessor(frame => {
    'worklet';
    console.log('DetectScreen', frame.width);
  }, []);
  return (
    <View flex>
      <Camera frameProcessor={frameProcessor} />
    </View>
  );
};

Relevant log output

2025-01-07 12:52:49.791  7678-7678  OpenGLRenderer                             
 E  [SurfaceTexture-0-7678-12] updateAndRelease: EGLConsumer is not attached to an OpenGL ES context

Camera Device

{
  "formats": [],
  "sensorOrientation": "landscape-left",
  "hardwareLevel": "full",
  "maxZoom": 8,
  "minZoom": 1,
  "maxExposure": 24,
  "supportsLowLightBoost": false,
  "neutralZoom": 1,
  "physicalDevices": [
    "wide-angle-camera"
  ],
  "supportsFocus": true,
  "supportsRawCapture": false,
  "isMultiCam": false,
  "minFocusDistance": 0,
  "minExposure": -24,
  "name": "0 (BACK) androidx.camera.camera2",
  "hasFlash": true,
  "hasTorch": true,
  "position": "back",
  "id": "0"
}

Device

xiaomi redmi note 7

VisionCamera Version

"react-native-vision-camera": "^4.6.1", "react-native-worklets-core": "1.3.3",

Can you reproduce this issue in the VisionCamera Example app?

No, I cannot reproduce the issue in the Example app

Additional information

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

[maintenance-hans]

Guten Tag, Hans here! 🍻

Thank you for your detailed issue report. Based on ze information you've provided, it seems like you're encountering a problem with useSkiaFrameProcessor resulting in a black screen.

However, I noticed you mentioned logs indicating "EGLConsumer is not attached to an OpenGL ES context", which suggests a potential issue with rendering. Do you have any additional logs from adb logcat that occurred when you experienced this issue? More logs would be very helpful for mrousavy to debug this problem.

Also, make sure that all dependencies are up to date and check if the issue persists on a different device.

If you wish to support this project more directly, consider becoming a sponsor here. This helps keep ze project alive and thriving!

Note: If you think I made a mistake, please ping @mrousavy to take a look.