@baibing1001/vision-camera-face-detector

vision-camera-face-detector

VisionCamera Frame Processor Plugin to detect faces using MLKit Vision Face Detector (compatible with react-native-vision-camera v4)

Installation

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

For iOS, you also need to run:

cd ios && pod install

Babel Configuration

Add the worklets plugin to your babel.config.js:

module.exports = {
  plugins: [
    ['react-native-reanimated/plugin', {
      processNestedWorklets: true,
    }],
    ['react-native-worklets-core/plugin'],
    // ... other plugins
  ],
}

Usage

import * as React from 'react';
import { Worklets } from 'react-native-worklets-core';

import { StyleSheet } from 'react-native';
import {
  useCameraDevice,
  useFrameProcessor,
} from 'react-native-vision-camera';

import { Camera } from 'react-native-vision-camera';
import { scanFaces, Face } from 'vision-camera-face-detector';

export default function App() {
  const [hasPermission, setHasPermission] = React.useState(false);
  const [faces, setFaces] = React.useState<Face[]>();

  const device = useCameraDevice('front');

  React.useEffect(() => {
    console.log(faces);
  }, [faces]);

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

  const setFacesJS = Worklets.createRunOnJS(setFaces);

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const scannedFaces = scanFaces(frame);
    setFacesJS(scannedFaces);
  }, [setFacesJS]);

  return device != null && hasPermission ? (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}
    />
  ) : null;
}
}

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT