react-use-face-detection

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

npm install react-use-face-detection

yarn

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 <Webcam/> node
imgRef	RefObject	Returns a ref object for the <img/> 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