react-faceapi-detection-hook

react-faceapi-detection-hook

React hook to detect faces from your webcam or any video element using face-api.js

View Demo
·
face-api.js

See http://caniuse.com/#feat=stream for browser compatibility.

Installation

shell
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

$3

- 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).

$3

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

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

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

const App = () => { return ( {children} ) };`

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

`Usage`

jsx
import { useFaceDetector, FaceDetection, FaceMatcher, useCamera } from "react-faceapi-detection-hook";
const MyAwesomeComponent = () => {
  const videoRef = useRef(null);
  const canvasRef = useRef(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 (

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