Simple React Hook to detect faces from an HTMLImageElement or react-webcam video source

by React

useFaceDetection Hook

✨ Live Demo ✨

? Introduction

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

? Usage

? 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

? Author

GitHub

View Github