react-native-vision-camera-face-detector

📚 Introduction

react-native-vision-camera-face-detector is a React Native library that integrates with the Vision Camera module to provide face detection functionality. It allows you to easily detect faces in real-time using the front camera and visualize the detected faces on the screen.

🏗️ Features

• Real-time face detection using front camera
• Integration with Vision Camera library
• Adjustable face visualization with customizable styles
• Base64 frame convertion

🧰 Installation

yarn add react-native-vision-camera-face-detector

💡 Usage

OBS: Pixel format should be either yuv (recomended) or rgb (lower performance).

import { 
  StyleSheet, 
  Text, 
  View 
} from 'react-native'
import { 
  useEffect, 
  useState 
} from 'react'
import {
  Camera,
  useCameraDevice,
  useFrameProcessor
} from 'react-native-vision-camera'
import { detectFaces } from 'react-native-vision-camera-face-detector'
import { Worklets } from 'react-native-worklets-core'

export default function App() {
  const device = useCameraDevice('front')

  useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission()
      console.log({ status })
    })()
  }, [device])

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet'
    runAsync(frame, () => {
      'worklet'
      try {
        const detectionResult = detectFaces(frame)
        console.log('faces detected:', detectionResult.faces)
      } catch (error) {
        console.error(error)
      }
    })
  }, [])

  return (
    <View style={{ flex: 1 }}>
      {device? <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={!!device}
        frameProcessor={frameProcessor}
        pixelFormat="yuv"
      /> : <Text>
        No Device
      </Text>}
    </View>
  )
}

👷 Built With

• React Native
• Google MLKit
• Vision Camera

📚 Author

• Luiz Carlos Ferreira - nonam4