react-use-face-detection

useFaceDetection Hook

🧰 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	Description
mirrored	boolean | undefined	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 | undefined	Callback function that returns the FaceDetectionResults
faceDetectionOptions	FaceDetectionOptions | undefined	Options for configuring the face detection model - see https://google.github.io/mediapipe/solutions/face_detection.html#javascript-solution-api

🏹 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	RefObject	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
• Jest - JavaScript testing framework

📚 Author

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