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-detector
During 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 |