Oops!

Make sure that your whole face is visible below.

Your recording is being converted to a GIF.

Your GIF is being uploaded to Imgur.com

JavaScript Face Tracking Demo

Step #1 - getUserMedia and tracking.js

getUserMedia is a HTML5 API that allows web apps to access user's camera and microphone. Read more on HTML5 Rocks.

tracking.js was used to detect and track user's face, but that's just one of the things that this amazing library is capable of.

Step #2 - gif.js

gif.js converted array of images to a GIF. It's very fast because it splits up the work between multiple web workers.

Step #3 - Imgur.com API

Imgur.com offers free and extremely easy to use API that allows to upload and browse images.

More…

I've made a short video about this project that demonstrates how it works.

If you found this project interesting, you'll probably also like my JavaScript OCR Demo.

Support

This demo requires getUserMedia, typed arrays, file API and web workers. It should work (as for 08.2014) on Chrome, Firefox and Opera. Both desktop and mobile.

Source code

This demo is open source, and is hosted on GitHub. Feel free to fork it, report issues and share your ideas for improvements.

Social media