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.

  • jqBarGraph – jQuery graph plugin (157)
    jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your […]
  • 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 […]
  • Twitter Flock for Wordpress: multiple accounts tweets with style (69)
    Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will […]
  • 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 […]
  • 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 *