0

I am trying to implement react-native-vision-camera into my React Native app, and it works perfectly as expected on iOS, but on Android it refuses to work properly. On Android, I am greeted with the following error...

[session/camera-not-ready] The Camera is not ready yet! Wait for the onInitialized() callback!

From what I've seen, this error occurs when the is called before permissions are verified, which is not the case in my app. Consider the following...

// Camera Permission State
const [cameraPerm, setCameraPerm] = useState(false)

// Checks Mic and Video Permissions as soon as page loads
useEffect(() => {
  checkPermissions();
}, []);


// Called in a useEffect to gain permissions
const checkPermissions = async () => {
    // Request Permissions on component load
    await Camera.requestCameraPermission();
    await Camera.requestMicrophonePermission();
    await requestPermission()

    const cameraPermission = await Camera.getCameraPermissionStatus();
    setCameraPerm(cameraPermission)
    const microphonePermission = await Camera.getMicrophonePermissionStatus();
};


  // Renders The Camera, if permissed and not done recording
  function renderCameraScreen(){
    // No permissions
    if (device == null) return <View style={{backgroundColor: 'black'}}/>;

    // Video Recorded
    if (recorded){
      return(
        <View>
          <Text style={{...FONTS.Title, textAlign: 'center', marginTop: 100}}>
            Video Recorded
          </Text>
        </View>
      )
    }

    if (!cameraPerm){
      return(
        <View>
          <Text style={{...FONTS.Title, textAlign: 'center', marginTop: 100}}>
            Please enable video permissions from your settings to access the camera
          </Text>
        </View>
      )
    }


    return (
      <View style={{backgroundColor: 'black', height: maxHeight * 0.70,}}>
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
          video={true}
          audio={true}
          ref={camera}
        />
        <View style={{alignSelf: 'center', marginTop: maxHeight * 0.65}}>
          {renderRecordButton()}
        </View>
      </View>
    );
  };

Considering this, I do not know why I am getting this error. Truthfully, I've also been unable to find any mention of onInitialized() in any documentation, so I am unsure how I would even utilize that function, as well as where.

2 Answers2

0

According to https://github.com/mrousavy/react-native-vision-camera/issues/789 maybe you need to hide the Camera until your app is authorized to use the Camera.

Elvin
  • 565
  • 1
  • 5
  • 12
  • I've attempted that, unfortunately. If you look at the `renderCameraScreen()` function, the camera only renders when `cameraPerm` is set to true. This only occurs after `cameraPermissions` is set to true already –  Nov 15 '22 at 16:58
  • Yeah, I saw that, it is strange. – Elvin Nov 15 '22 at 17:01
0

I had the same issue when using react-native-vision-camera for recording audio and video on Android.

My solution was to use PermissionsAndroid:

Here's my code snippet:

import {PermissionsAndroid} from 'react-native';

const getAllPermissions = useCallback(async () => {
    PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.CAMERA,
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
    ]).then(result => {
      if (
        result['android.permission.CAMERA'] === 'granted' &&
        result['android.permission.RECORD_AUDIO'] === 'granted'
      ) {
        setLoading(devices);
      } else {
        Alert.alert(
          'Permission Not Granted',
          'You need to grant this app permission to use the camera to record audio and video',
          [
            {
              text: 'Cancel',
              onPress: () => navigation.pop(),
            },
            {
              text: 'Grant',
              onPress: () => Linking.openSettings(),
            },
          ],
        );
        setLoading(null);
      }
    });
  }, [navigation, devices]);

  useEffect(() => {
    getAllPermissions();
  }, [getAllPermissions, devices]);