DEV Community

Cover image for Smile Catcher - Expression Detection
Uditha Ishan
Uditha Ishan

Posted on

Smile Catcher - Expression Detection

What I built

Smile Catcher recognizes the smiling faces and counts how many time smiled by the user while watching a given funny video.

Category Submission:

Random Roulette

App Link

https://smile-catcher-l8g8v.ondigitalocean.app/

Screenshots

screenshot-1
screenshot-2

Description

Guide:

  • Visit the app using a web browser
  • Allow camera access
  • Watch the video

The app will show how many times you have smiled during watching the video.

All of the face detections and expression detections are handled by the face-API.

Link to Source Code

https://github.com/UdithaIshan/smile-catcher

Permissive License

MIT

Background

I inspired by the Web Dev Simplified's face detection project
and also curiosity about the face-API.

How I built it

My App is a simple static app. I deployed this using DigitalOcean app platform and it was very quick. You can build and deploy 3 static apps for free.

Tech stack

  • HTML
  • JavaScript
  • Bootstrap
  • face-api

Additional Resources/Info

face-api

Latest comments (10)

Collapse
 
circa10a profile image
Caleb Lemoine

2020 needs more smiles. Amazing job!

Collapse
 
udithaishan profile image
Uditha Ishan

Yeah, 2020 needs tons of smiles 💔
Btw thank you for the feedback.

Collapse
 
graciegregory profile image
Gracie Gregory (she/her)

Super cool!

Collapse
 
udithaishan profile image
Uditha Ishan

Thank you!

Collapse
 
raddevus profile image
raddevus • Edited

This looks really interesting and is a very innovative idea. I tried the app out but when I attempted to play the video I got the error shown in the snapshot below. I have completed my entry in the #dohackathon also. If you get a chance, check it out and let me know what you think. thx
video didn't play
Edit - Just thought about it and it probably failed because on this computer I don't have a camera connected.

Collapse
 
udithaishan profile image
Uditha Ishan

Thank you for your feedback. I think something wrong with your browser. Did you try incognito mode or another browser?
If you can check again using a mobile phone, It will be a pleasure for me.

And I have checked your app. It's great. Good luck with the hackathon.

Collapse
 
raddevus profile image
raddevus

I tried it on my Android device and it worked fine. Also, my desktop browser warned me that there was an update. I updated and now the site works on my desktop browser too. 😊

Thread Thread
 
udithaishan profile image
Uditha Ishan

Ohh. Happy to see this feedback. Thank you once again.👊

Collapse
 
raddevus profile image
raddevus

I'm using FireFox 83.0 64-bit running on Ubuntu 20.04. I'll try it on my mobile here in a bit also and let you know. Thanks for taking a look at my app.

Thread Thread
 
udithaishan profile image
Uditha Ishan

Thank you!