lauirvin / 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

react-use-face-detection's Issues

stuck on loading true in mobile devices

stuck on loading true in mobile devices it works perfectly fine on desktop and pc but on mobile device loading is always true due to which no bounding box is being displayed please fix it
below is the screenshot i have attached

Webcam Stream doesn't stop on component unmount

Packages used for development

React - v18.1.0
Typescript - v4.6.4
React useFaceDetection - v1.0.1

Device:
Any device

Browser and version
Any browser

There is a way how to fix this in ReactWebCam library: https://github.com/mozmorris/react-webcam/issues/232

I can access the stream via ref and call following:

const webcamRef = useRef<Webcam>(null);

  useEffect(() => {
    return (): void => {
      webcamRef.current?.stream?.getVideoTracks()?.map(({ stop }) => stop());
      webcamRef.current?.stream?.getAudioTracks()?.map(({ stop }) => stop());
    };
  }, []);

stream.getVideoTracks().map(track => track.stop());
stream.getAudioTracks().map(track => track.stop());

 const { webcamRef } = useFaceDetection({
  });

webCamRef doesn't have the stream, typing is broken and even if I try to call the webcamRef.current?.stream?.getVideoTracks()?.map(({ stop }) => stop()) it doesn't work because webCamRef is always undefined in useEffect cleanUp function.

Extract frames

Hi,

How do you go about extracting frames. I'd like to implement face recognition.

Thanks

Package resolve error with Vite

When I try integrating this in a Vite React app, or any other builder except Create-React-App, I get the following error. All solutions I could find to fix this leads to altering package files in node_modules, which is obviously not ideal. Any help is appreciated.

X [ERROR] Failed to resolve entry for package "react-use-face-detection". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

src/components/webcamCapture/WebcamCapture.tsx:3:48:
  3 │ ... CameraOptions, useFaceDetection } from "react-use-face-detection";
    ╵                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~


at failureErrorWithLog (D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:1651:15)
at D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:1059:25
at runOnEndCallbacks (D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:1486:45)
at buildResponseToResult (D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:1057:7)
at D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:1069:9
at new Promise (<anonymous>)
at requestCallbacks.on-end (D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:1068:54)
at handleRequest (D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:732:17)
at handleIncomingPacket (D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:757:7)
at Socket.readFromStdout (D:\apps\Tablet App React\tab-app-react-vite\node_modules\esbuild\lib\main.js:680:7)

Camera/FaceDetection not working on iOS devices

Packages used for development

React - v18.1.0
Typescript - v4.6.4
React useFaceDetection - v1.0.1

Mobile device:
All iOS Devices

Browser and version
Google Chrome, Safari on iOS

Easy to reproduce on live example:
https://serene-meerkat-95a23d.netlify.app/

Seems like the camera can not be initialised or there is some problem with the camera stream.
(Sample is working on Android devices.)

great react-typescript implementation! am using this w next.js and your implementation helps handle some of the 'abort' errors from MP

just wanted to let you know that your react-y way of implemented MP helped me address some wasm loading errors on MediaPipe

let me know if you have had anything similar to this?
google-ai-edge/mediapipe#2963

thank you!!!