Very usefull face detection hooks powered by Face-Api
npm install 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.
shell
with npm
npm i react-faceapi-detection-hookwith yarn
yarn add react-faceapi-detection-hookwith 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