JSPM – react-face-detection-hook@1.0.2

Package Exports

react-face-detection-hook
react-face-detection-hook/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-face-detection-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

📚 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