useFaceDetection Hook

✨ Live Demo ✨

📚 Introduction

Simple React Hook to detect faces from an HTMLImageElement or react-webcam video source. Powered by MediaPipe

💡 Usage

- Image Face Detection Code Example

- React Webcam Face Detection Code Example

- Project Example

🧰 Installation

To install, you can use npm or yarn:

npm

``sh
npm install react-use-face-detection
`

yarn

`sh
yarn add react-use-face-detection
`

⚙️ Options

| Name | Type | Optional | Description |
| -------------------- | ---------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| mirrored | boolean | true | This enables a mirrored detection of the faces in the provided media source - e.g. if you flip the media source horizontally, this would enable the correct output of your flipped media source. |
| handleOnResults | (results: FaceDetectionResults) => void | true | Callback function that returns the FaceDetectionResults |
| faceDetectionOptions | FaceDetectionOptions | true | Options for configuring the face detection model - see https://google.github.io/mediapipe/solutions/face_detection.html#javascript-solution-api |
| faceDetection | FaceDetection | false | Initialize the face detection model from @mediapipe/face_detection |
| camera | (cameraOptions: CameraOptions) => Camera | true | Initialize the camera utility model from @mediapipe/camera_utils |

🎁 Returned Values

| Name | Type | Description |
| ------------- | --------------------------- | -------------------------------------------------------------------------------------------------------- |
| boundingBox | BoundingBox[] | Returns details and coordinates of the bounding box around the detected face(s) |
| isLoading | boolean | Returns a boolean that detects whether if the model has been loaded |
| detected | boolean | Returns a boolean that detects whether if a face has been detected |
| facesDetected | number | Returns a number of faces that have been detected |
| webcamRef | LegacyRef | Returns a ref object for the react-webcam node |
| imgRef | RefObject | Returns a ref object for the ` element |

👷 Built With

- ReactJS - Frontend Javascript web framework
- TypeScript - Open-source language which builds on JavaScript
- MediaPipe - Machine Learning framework
- React Webcam - Webcam Library

📚 Author

- Irvin Ives Lau - lauirvin
- https://www.irviniveslau.com