How to use react-native-vision-camera instead of expo-camer?

How to use react-native-vision-camera instead of expo-camera? earlier I was developing my project in expo but currently I am developing it using react native cli can anyone can tell me how can I use this package call react-native-vision-camera and make it work same as my expo code with any errors I tried using myself my it was giving me a black screen In my case android

Expo Code:

import { Camera } from 'expo-camera';
import { TouchableOpacity, Text, View, ActivityIndicator } from 'react-native';
import { useState, useEffect, useRef } from "react";
import * as FaceDetector from 'expo-face-detector';
export default function CameraPage({ navigation }) {
const [hasPermission, setHasPermission] = useState(null);
const cameraRef = useRef(null);
const [faceData, setFaceData] = useState([]);
useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
const handleTakePicture = async () => {
if (faceData.length === 0) {
alert('No Face')
}
else if
(cameraRef.current) {
const photo = await cameraRef.current.takePictureAsync();
console.log(photo.uri)
if (!photo.cancelled) {
navigation.navigate('addphoto', { Image: photo.uri });
}
}
}
const handleFacesDetected = ({ faces }) => {
setFaceData(faces);
}
return (
<View style={{ flex: 1, backgroundColor: 'black' }}>
<Camera
onFacesDetected={handleFacesDetected}
faceDetectorSettings={{
mode: FaceDetector.FaceDetectorMode.fast,
detectLandmarks: FaceDetector.FaceDetectorLandmarks.none,
runClassifications: FaceDetector.FaceDetectorClassifications.none,
minDetectionInterval: 100,
tracking: true,
}}
style={{
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30,
overflow: 'hidden',
width: '130%',
aspectRatio: 1,
}}
type={Camera.Constants.Type.front}
ref={cameraRef}
>
<View style={{ flex: 1, backgroundColor: 'transparent', flexDirection: 'row' }}>
</View>
</Camera>
<TouchableOpacity
style={{
alignSelf: 'center',
alignItems: 'center',
width: 90,
height: 90,
borderRadius: 500,
marginTop: '30%',
marginLeft: '5%',
borderColor: '#5A5A5A',
borderWidth: 6,
}}
onPress={handleTakePicture}
>
<View style={{ opacity: 0.5 }} />
</TouchableOpacity>
</View>
);
}

I'm the author of react-native-vision-camera.

So to get the Camera Preview running, you'd first have to get the Camera Permission:

const cameraPermission = await Camera.requestCameraPermission()

And if that's 'granted', then you can render the Camera Preview:

function App() {
  const devices = useCameraDevices()
  const device = devices.back

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}

Depending on what you need the Camera for, you can enable those features:

<Camera
  style={StyleSheet.absoluteFill}
  device={device}
  isActive={true}
  video={true} // <-- optional
  audio={true} // <-- optional (requires audio permission
  photo={true} // <-- optional
 />

If you want to detect faces in a Frame, you can use Frame Processors.

As stated in the docs, you need to install Reanimated v2 to use those.

Then you can simply use one of the community frame processor plugins, for example the rodgomesc/vision-camera-face-detector plugin:

import { scanFaces } from 'vision-camera-face-detector';

function App() {
  const devices = useCameraDevices()
  const device = devices.back

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    const faces = scanFaces(frame)
    console.log("Faces:", faces)
  }, [])

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}
    />
  )
}

Or you can also build your own Plugin if you want full control over the scan.

Browse the issues if something doesn't work for you, and make sure you understand what Worklets are as the Frame Processor is a worklet. (see these docs by Reanimated)