Introduction
EmotionDetector is a fully configurable React library that makes use of face-api.js to detect:
- emotions
- gender
- age
Getting Started
Dependencies
The library has been successfully tested with the following packages versions. If you have a more recent version of these packages feel free to experiment and give me a feedback.
"react": "16.14.0",
"react-dom": "16.14.0",
"react-scripts": "3.4.3",
"web-vitals": "2.1.4"Install
npm install @iad-os/emotion-detectorDuring the installation process you will notice that some required files will be copied under your "public" dir.
Usage Example
Minimal code to use the component:
<EmotionDetector
onEmotionDetect={(detection: Detection) => {
//... some stuff with Detection object
}}
detecting={true}
/>
You can also use various props to fully configure the component.
Available props
Required Props
| Key | Type | Description | Default |
|---|---|---|---|
| detecting | boolean | Enable/Disable Detection |
Additional Props
| Key | Type | Description | Default |
|---|---|---|---|
| onEmotionDetect | Function | Called on each detection. Returns a Detection object. | |
| emotionDetectPeriod | number | Specifies the period between onEmotionDetect calls | 1000 |
| detectionPeriodMillis | number | Set detection period of face-api in milliseconds. Should be <= emotionDetectPeriod | 1000 |
| emoThreshold | number | Set a minimum percentage to say a emotion is for sure the one detected. Ex: if "happy" percentage is < emoThreshold, say it's positive. | 60 |
| detectAge | boolean | Enable/Disable Age detection | true |
| detectSex | boolean | Enable/Disable Sex Detection | true |
| showCam | boolean | Show/Hide Cam Component | true |
| camSizeRatio | number | Size ratio of the cam component. "1" is the Max Cam Size Resolution. | 1 |
| showLabel | boolean | Show/Hide Label component | true |
| enableAnimations | boolean | Enable/Disable Animations | true |
| labelFormat | string | Detection label format. Available values: "text", "emoji", "both". The Default value depend on the camSizeRatio and on the cam size. | "both" |
| text | string | Custom label text | |
| labelStyle | React.CSSProperties | Custom label style |