Installation

# with npm
npm i react-faceapi-detection-hook

# with yarn
yarn add react-faceapi-detection-hook

# with pnpm
pnpm i react-faceapi-detection-hook

Demo

https://future.future/future

Setup

Download models

• In order to use face-api.js, we have to download the required models. You can find it here.

• Extract the "faceapi-models" folder inside your "public" directory.

  • You can give your folder any name you want. However, if you change, you will have to pass "faceApiModelsPath" prop to VideoRecognitionContextProvider (in the next step).

React Context

In your root-level component, you have to add the provider.

The VideoRecognitionContext take an face-api instance to load its models passind the props down using the Context API. Inside the Provider parent, you can make the requests, then pass the prop imageLabels

import { VideoRecognitionContextProvider } from "react-faceapi-detection-hook";

const exampleImageLabels = {
  Fella: ["/assets/images/fella-1.png", "randomBase64"]
}

const App = () => {
  return (
    <VideoRecognitionContextProvider imageLabels={exampleImageLabels}>
      {children}
    </VideoRecognitionContextProvider>
  )
};

props | type | defaultValue | example | description | ---------------------|--------------------------|-------------------|---------------------------------------------------------|-------------------------------------| imageLabels | Record<string, string[]> | [] | { PersonName: ["/images/person.png", "randomBase64"] } | labels with respective images | faceApiModelsPath | string | "/facepi-models" | "/models" | public face-api models folder path |

Usage

import { useFaceDetector, FaceDetection, FaceMatcher, useCamera } from "react-faceapi-detection-hook";

const MyAwesomeComponent = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  /** If you want, we have a built-in hook to enable webcam */
  useCamera(videoRef, {
    audio: false,
    video: true,
  })

  useFaceDetector(videoRef, canvasRef, {
    fps: 60, // Default as 30,
    enabled: true, // Default as true
    faceMatcherThreshold: 0.4, // Default as 0.4,
    onRecognizeFace: (recognizedFace: FaceMatcher[]) => {
      console.log({ label: recognizedFace.label })
    }
  })

  return (
    <div style={{ position: "relative" }}>
      <canvas ref={canvasRef} style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%" }} />
      <video ref={videoRef} style={{ width: "100%", height: "100%" }} />
    </>
  )
};

Roadmap

• [X] Pushed first version for react-faceapi-detection-hook.
• [X] Create useWebcam hook to easily toggle navigator camera device.
• [x] Add support to inject "names" with its images.
• [x] Add face recognition based on injected labels.
• [x] Add callback on detect known face.
• [ ] Create demo.
• [ ] Create documentation.

License

MIT

Author

• Lucas Tiberio - https://github.com/LucasTiberio