You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-native-vision-camera-facekit

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-vision-camera-facekit

VisionCamera Frame Processor Plugin to detect faces using MLKit Vision Face Detector and Apple Vision Camera for React Native Vision Camera v4

1.1.2
latest
Source
npmnpm
Version published
Weekly downloads
2
100%
Maintainers
1
Weekly downloads
 
Created
Source

react-native-vision-camera-facekit

GitHub license npm version

Description

react-native-vision-camera-facekit is a React Native Frame Processor Plugin for Vision Camera v4 that provides cross-platform face detection functionality. It supports:

  • Android via MLKit Vision Face Detector
  • iOS via Apple Vision Framework
  • Real-time face detection using the device camera
  • Configurable detection options (performance, landmarks, contours, classification, minimum face size, tracking)

Features

  • High-performance, native JSI-based frame processors
  • Flexible options for speed vs. accuracy
  • Contour and landmark extraction
  • Face tracking (optional)

Installation

# yarn
yarn add react-native-vision-camera-facekit

# or npm
npm install react-native-vision-camera-facekit --save

Then install pods (iOS):

cd ios && pod install && cd ..

Usage

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import {
  Camera,
  useCameraDevice,
  useFrameProcessor,
} from 'react-native-vision-camera';
import { scanFaces } from 'react-native-vision-camera-facekit';
import { runOnJS } from 'react-native-reanimated';

export default function App() {
  const device = useCameraDevice('front');
  const [faces, setFaces] = React.useState([]);

  React.useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission();
      console.log('Camera permission:', status);
    })();
  }, []);

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    try {
      const detected = scanFaces(frame, {
        performanceMode: 'fast',
        classificationMode: 'all',
        contourMode: 'all',
        landmarkMode: 'all',
        minFaceSize: 0.1,
        trackingEnabled: false,
      });
      runOnJS(setFaces)(detected);
    } catch (e) {
      console.error('scanFaces error', e);
    }
  }, []);

  if (!device) {
    return <Text>Loading camera...</Text>;
  }

  return (
    <View style={{ flex: 1 }}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        frameProcessor={frameProcessor}
        frameProcessorFps={5}
        photo={false}
      />
    </View>
  );
}

API

scanFaces(frame: Frame, options?: FaceDetectionOptions): Face[]

  • frame: Frame from Vision Camera

  • options (all optional):

    • performanceMode: 'fast' | 'accurate' (default 'fast')
    • landmarkMode: 'none' | 'all' (default 'none')
    • contourMode: 'none' | 'all' (default 'none')
    • classificationMode: 'none' | 'all' (default 'none')
    • minFaceSize: number (default 0.1)
    • trackingEnabled: boolean (default false)

Returns: Array of Face objects with bounds, angles, probabilities, contours, and landmarks.

License

MIT © Cristofer Feliz

Keywords

react-native

FAQs

Package last updated on 13 May 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts