📚 Introduction

React Hook to detect faces from react-webcam video source using MediaPipe

🧰 Installation

To install, you can use npm or yarn:

npm install react-face-detection-hook
# or
yarn add react-face-detection-hook

💡 Usage

import { 
  useFaceDetection,
  FaceDetectionResults,
  Camera,
  FaceDetection,
  Webcam
} from 'react-face-detection-hook'

function MyComponent() {
  const camWidth = ...
  const camHeight = ...
  const { webcamRef } = useFaceDetection( {
    handleOnFaceDetected,
    faceDetectionOptions: {
      model: 'short'
    },
    faceDetection: new FaceDetection( {
      locateFile: ( file ) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/face_detection/${ file }`
      }
    } ),
    camera: ( {
      mediaSrc,
      onFrame
    } ) => new Camera( mediaSrc, {
      onFrame,
      width: camWidth,
      height: camHeight
    } )
  } ) 

  function handleOnFaceDetected({ 
    detections
  }: FaceDetectionResults){
    console.log('face detections', detections)
  }

  return (
    <Webcam
      ref={ webcamRef }
      style={ {
        width: camWidth,
        height: camHeight
      } }
    />
  )
}

👷 Built With

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

📚 Author

• Luiz Carlos Ferreira - nonam4