Black screen in the cameraView🐛

[aker2302]

What were you trying to do?

I want to make a Frame Processor Plugin, I followed the steps on the web site https://mrousavy.com/react-native-vision-camera/docs/guides/frame-processors-plugins-final/.Then, I launched the project without using the plugin I created and I got a black screen in the camera view. When I checked in the logcat I found this error:

Failed to configure session: abstract method "androidx.camera.core.impl.Config androidx.camera.core.impl.UseCaseConfigFactory.getConfig(androidx.camera.core.impl.UseCaseConfigFactory$CaptureType, int)"

System: OS: Windows 10 10.0.19044 CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz Memory: 1.01 GB / 7.86 GB Binaries: Node: 14.17.3 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Android NDK: 22.1.7171670 Windows SDK: Not Found IDEs: Android Studio: AI-212.5712.43.2112.8609683 Visual Studio: 17.2.32616.157 (Visual Studio Community 2022) Languages: Java: 17.0.2 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.2 => 0.68.2 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Reproduceable Code

import * as React from 'react';

import { useCameraDevices , useFrameProcessor} from 'react-native-vision-camera';
import { Camera } from 'react-native-vision-camera';
import { 
  StyleSheet, 
  Text, 
} from 'react-native';

export default function App() {
  const [hasPermission, setHasPermission] = React.useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

  let cameraRef: Camera | null = null;


  // Camera.getAvailableCameraDevices().then((value) => {
  //   console.log('Camera Device', JSON.stringify(value));
  // });

  React.useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission();
      setHasPermission(status === 'authorized');
    })();
  }, []);

  const frameProcessor = useFrameProcessor((frame) => {
      'worklet';
      console.log(frame);
    }, []);

  return (
    device != null &&
    hasPermission && (
      <>
        <Camera
          style={StyleSheet.absoluteFill}
          ref={cameraRef}
          device={device}
          isActive={true}
          frameProcessor={frameProcessor}
          frameProcessorFps={1}
        />
      </>
    )
  );
}

const styles = StyleSheet.create({
  barcodeTextURL: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
    top: '50%',
    textAlign: 'center',
  },
});

What happened instead?

the app build successful but I got a black screen instead of camera

Relevant log output

2022-08-13 16:25:16.489 6658-6658/com.example.reactnativeocodescaneropencv I/CameraView: Configuring session...
2022-08-13 16:25:16.489 6658-6658/com.example.reactnativeocodescaneropencv I/CameraView: Configuring session with Camera ID 0 and default format options...
2022-08-13 16:25:16.492 6658-6658/com.example.reactnativeocodescaneropencv I/CameraView: No custom format has been set, CameraX will automatically determine best configuration...
2022-08-13 16:25:16.492 6658-6658/com.example.reactnativeocodescaneropencv I/CameraView: Adding ImageAnalysis use-case...
2022-08-13 16:25:16.495 6658-6658/com.example.reactnativeocodescaneropencv I/CameraView: Attaching 1 use-cases...
2022-08-13 16:25:16.496 6658-6658/com.example.reactnativeocodescaneropencv E/CameraView: Failed to configure session: abstract method "androidx.camera.core.impl.Config androidx.camera.core.impl.UseCaseConfigFactory.getConfig(androidx.camera.core.impl.UseCaseConfigFactory$CaptureType, int)"
2022-08-13 16:25:16.496 6658-6658/com.example.reactnativeocodescaneropencv E/CameraView: update() threw: [unknown/unknown] abstract method "androidx.camera.core.impl.Config androidx.camera.core.impl.UseCaseConfigFactory.getConfig(androidx.camera.core.impl.UseCaseConfigFactory$CaptureType, int)"
2022-08-13 16:25:16.496 6658-6658/com.example.reactnativeocodescaneropencv E/CameraView: invokeOnError(...):
2022-08-13 16:25:16.497 6658-6658/com.example.reactnativeocodescaneropencv W/System.err: com.mrousavy.camera.UnknownCameraError: [unknown/unknown] abstract method "androidx.camera.core.impl.Config androidx.camera.core.impl.UseCaseConfigFactory.getConfig(androidx.camera.core.impl.UseCaseConfigFactory$CaptureType, int)"

Device

Samsung galaxy m13

VisionCamera Version

2.14.1

Additional information

• [ ] I am using Expo
• [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]

hmm, this looks like a CameraX error (on google's side)

[waqaskhanroghani]

first time the app camera running or not? I have the same issue but i solve it using useIsFocused(); in react native vision camera website.

[aker2302]

@mrousavy yeah I think it's CameraX error too since the app build successful without any errors or warnings, this error happened twice but I can't reproduce it. @waqaskhanroghani yes the camera was working well the first time but when I tried to install locally a plugin I Created this error happened. I will try to add useIsFocused(); to see if it will work Thanks.

[Easy47]

I still have the problem error on 2.14 but without any error

[phatmovista]

For anyone still having this problem, try adding Camera Core and Camera 2 from the CameraX package to your app/build.gradle:

implementation "androidx.camera:camera-core:1.1.0"
implementation "androidx.camera:camera-camera2:1.1.0"

[joaonew]

For anyone still having this problem, try adding Camera Core and Camera 2 from the CameraX package to your app/build.gradle:

implementation "androidx.camera:camera-core:1.1.0"
implementation "androidx.camera:camera-camera2:1.1.0"

Did this work for anyone? The problem persists for me

[jamesdunay]

Currently having this issue as well

[Brittognanaraj]

android:hardwareAccelerated="false" in AndroidManifest.xml makes the camera no longer display. Check your AndroidManifest and set it back to true may help the camera work again.

[edcelmanuel]

Use useIsFocused if you are using @react-navigation

import { useIsFocused } from '@react-navigation/native';

export const CameraView = (props) => {

  const isFocused = useIsFocused();
  return (
     <View>
       { isFocused && <Camera  />  }
     </View>
   )
}

[mrousavy]

Hey! I've rewritten the entire Android codebase of VisionCamera from CameraX to Camera2 in the efforts of ✨ VisionCamera V3.

I just now completed the Camera2 rewrite and I believe the core structure is running, but there might be some edge cases to iron out. Can you try and test the PR #1674 for me to see if you can still reproduce this issue here?

Here's an instruction on how you can test that: https://github.com/mrousavy/react-native-vision-camera/pull/1674#issuecomment-1684104217

If the issue cannot be reproduced with that version/PR anymore, then hoorayy, I fixed it! 🎉 Otherwise please let me know and I'll keep this issue open to keep track of it.

Thank you!