VisionCamera Frame Processor Plugin to detect faces using MLKit Vision Face Detector
npm install @mat2718/vision-camera-face-detectorsh
install with npm
npm install @mat2718/vision-camera-face-detector
or install with yarn
yarn add @mat2718/vision-camera-face-detector
`
$3
$3
`js
// babel.config.js
module.exports = {
plugins: [
[
'react-native-reanimated/plugin',
{
globals: ['__scanFaces'],
},
],
],
};
`
$3
`xml
`
---
Basic Usage
`tsx
import * as React from 'react';
import {runOnJS} from 'react-native-reanimated';
import {StyleSheet} from 'react-native';
import {useCameraDevices, useFrameProcessor} from 'react-native-vision-camera';
import {Camera} from 'react-native-vision-camera';
import {scanFaces, Face} from '@mat2718/vision-camera-face-detector';
export default function App() {
const [hasPermission, setHasPermission] = React.useState(false);
const [faces, setFaces] = React.useState();
const devices = useCameraDevices();
const device = devices.front;
React.useEffect(() => {
console.log(faces);
}, [faces]);
React.useEffect(() => {
(async () => {
const status = await Camera.requestCameraPermission();
setHasPermission(status === 'authorized');
})();
}, []);
const frameProcessor = useFrameProcessor(frame => {
'worklet';
const scannedFaces = scanFaces(frame);
runOnJS(setFaces)(scannedFaces);
}, []);
return device != null && hasPermission ? (
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
frameProcessor={frameProcessor}
frameProcessorFps={5}
/>
) : null;
}
`
Advanced Example
Advanced Example
Utils
$3
`ts
import {findClosest} from '@mat2718/vision-camera-face-detector';
/**
* It sorts an array of objects by the distance between the object's x and y coordinates and the
* given x and y coordinates, then returns the first object in the sorted array
* @param {Face[]} arr - Face[] - an array of Face objects
* @param {number} x - The x coordinate
* @param {number} y - number - the y coordinate
* @returns the closest face to the x and y coordinates.
*/
findClosest(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.
`tsx
import React from 'react';
import {FaceDetector} from '@mat2718/vision-camera-face-detector';
import RNFS from 'react-native-fs';
const App = () => {
//**
// Components
//**
return (
<>
boundingBoxColor={'yellow'}
enableBoundingBox={true}
boundingBoxMultipleFaces={false}
photoCaptureOnPress={async photo => {
const photoPath = 'file://' + photo.path;
const base64Photo = await RNFS.readFile(photoPath, 'base64');
console.log('photoCaptureOnPress', base64Photo);
// do something with the photo
}}
/>
>
);
};
export 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
`
``