Use Webcam to Create Animated GIF

Some time ago I saw some online animated gif creator and thought it could be done in JS instead of Flash. We could easily access webcam from browser with the getUserMedia API. Nice tutorial about this API can be found on HTML5Rocks site.

gifeeno_workshop

So, getting image in real time from camera is easy with getUserMedia, but creating animated gif on client side was trickier part. Luckily, someone already made JS lib for that, and jsgif is great solution with really good documentation. All I had to do is to combine getUserMedia API with jsgif lib and I could create animated gifs with my face.

I was surprised how funny was that. I spent more time creating animated gifs with making stupid faces than writing the code. After I show it to my friend Jovan he was so excited that he did design and suggest a name. That’s how small experiment become web app named Gifeeno.

With design we also added a few options for tuning your animated gif. You can choose delay between frames in image and delay between taking snapshots. Initial version also had option to save end result to server, but after a few of my friend made ~200Mb of images in less than an hour I had to disable it. I was looking for some external service where images could be stored but for now your images will be only on your computer.

At this moment, I saw Gifeeno working on desktop versions of Chrome and Firefox. Unfortunately, this isn’t support on mobile browser and I hope it will be soon because creating gifs with mobile is another level of fun.

At this moment we don’t have time to continue working on improvements, but this small web app can be extended to full animated GIF editor, with adding text to image, uploading images from computer, adding filters and effects etc. And the best part is that everything can be done on client side.

  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • Bigshark – larger buttons on Grooveshark (0)
    GrooveShark is one of the web services which I’m using on daily basis. Actually, I have one computer which I use only to play music from my GrooveShark playlists, while I’m sitting on […]
  • Animated Progress Bar in 4 lines of jQuery (51)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]
  • Image gallery in 4 lines of code with MooTools and Dojo (8)
    Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and […]
  • HTML5/CSS3 Circle Music Player (3)
    More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we […]

one comment on "Use Webcam to Create Animated GIF"

Hello. I’d like it to save to my server. I can see where the code is but not exactly sure how to change it.

James on October 9, 2013 at 3:30 pm

Leave a Reply to James Cancel reply

Your email address will not be published. Required fields are marked *