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.

  • Google Buzz ER: Google Buzz for Wordpress (137)
    Yesterday Google announced new service, Google Buzz, a new way to share updates, photos, videos and more, and start conversations about the things you find interesting. Today you can have […]
  • Image gallery with fancy transitions effects (1034)
    I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition […]
  • JUST – JavaScript Useful Stuff (5)
    I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly […]
  • 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 […]
  • Gradienter: Add gradient to elements (24)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]

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

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