@mat2718/vision-camera-face-detector

VisionCamera Frame Processor Plugin to detect faces using MLKit Vision Face Detector. This repo is an updated version of the original vision-camera-face-detector but with some necessary updates.

1. MLKit version is updated to align with other vision camera plugins such as the OCR plugin
2. Face bounds have been updated to include more options for end users to choose from such as top, and left rather than just the x and y axis for android.
3. A helper function has been added for those using headers or footers to adjust the bounding box parameters. A working example using React-native 0.70.6 and updated reanimated and vision camera packages are located here: example
4. IOS face bounds have been updated to include more options for end users to choose from such as top and left rather than just the x and y axis for android.
5. Added a helper function to display only the face closest to the x and y params passed.

Breaking Changes

Currently, the face contour data is causing an error in the native code and has been disabled temporarily while I work to resolve the issue. The error was causing the bounding box and other frame information from being passed to the component. To avoid this issue please ensure you are using version >=0.1.11

Installation & Configuration

Install

1# install with npm
2npm install @mat2718/vision-camera-face-detector
3
4# or install with yarn
5yarn add @mat2718/vision-camera-face-detector

Configure

Add the below plugin to your babel config file

1// babel.config.js
2module.exports = {
3  plugins: [
4    [
5      'react-native-reanimated/plugin',
6      {
7        globals: ['__scanFaces'],
8      },
9    ],
10  ],
11};

Add the following permission to the AndroidManifest.xml located at ~/android/app/src/AndroidManifest.xml

1<uses-permission android:name="android.permission.CAMERA"/>

---

Basic Usage

1import * as React from 'react';
2import {runOnJS} from 'react-native-reanimated';
3
4import {StyleSheet} from 'react-native';
5import {useCameraDevices, useFrameProcessor} from 'react-native-vision-camera';
6
7import {Camera} from 'react-native-vision-camera';
8import {scanFaces, Face} from '@mat2718/vision-camera-face-detector';
9
10export default function App() {
11  const [hasPermission, setHasPermission] = React.useState(false);
12  const [faces, setFaces] = React.useState<Face[]>();
13
14  const devices = useCameraDevices();
15  const device = devices.front;
16
17  React.useEffect(() => {
18    console.log(faces);
19  }, [faces]);
20
21  React.useEffect(() => {
22    (async () => {
23      const status = await Camera.requestCameraPermission();
24      setHasPermission(status === 'authorized');
25    })();
26  }, []);
27
28  const frameProcessor = useFrameProcessor(frame => {
29    'worklet';
30    const scannedFaces = scanFaces(frame);
31    runOnJS(setFaces)(scannedFaces);
32  }, []);
33
34  return device != null && hasPermission ? (
35    <Camera
36      style={StyleSheet.absoluteFill}
37      device={device}
38      isActive={true}
39      frameProcessor={frameProcessor}
40      frameProcessorFps={5}
41    />
42  ) : null;
43}

Advanced Example

Advanced Example

Utils

Find Face Closest to Center

1import {findClosest} from '@mat2718/vision-camera-face-detector';
2/**
3 * It sorts an array of objects by the distance between the object's x and y coordinates and the
4 * given x and y coordinates, then returns the first object in the sorted array

5 * @param {Face[]} arr - Face[] - an array of Face objects
6 * @param {number} x - The x coordinate
7 * @param {number} y - number - the y coordinate
8 * @returns the closest face to the x and y coordinates.
9 */
10findClosest(arr, x, y);

Alpha release using a singular component design

NOTE: This is still an early release and is not intended for enterprise applications yet. Currently, the projected BETA release is sometime before the end of January 2023.

1import React from 'react';
2
3import {FaceDetector} from '@mat2718/vision-camera-face-detector';
4import RNFS from 'react-native-fs';
5
6const App = () => {
7  //********************************************************************
8  // Components
9  //********************************************************************
10
11  return (
12    <>
13      <FaceDetector
14        boundingBoxColor={'yellow'}
15        enableBoundingBox={true}
16        boundingBoxMultipleFaces={false}
17        photoCaptureOnPress={async photo => {
18          const photoPath = 'file://' + photo.path;
19          const base64Photo = await RNFS.readFile(photoPath, 'base64');
20          console.log('photoCaptureOnPress', base64Photo);
21          // do something with the photo
22        }}
23      />
24    </>
25  );
26};
27
28export default App;

Contributing

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

License

MIT

Credits

Please feel free to check out the original repo here vision-camera-face-detector

Also, the original bounding box creator's repo is here bglgwyng/FrameProcessorExample