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.

  • 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 […]
  • 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 […]
  • jqIsoText: jQuery Text Effect Plugin (108)
    Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that.  One of them is jqIsoText. With this […]
  • 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 […]
  • Just Random Color (0)
    Some time ago I was working on app where for each category we had to assign random color in case that user didn't choose one. A few day ago I needed to generate random color again. Instead […]

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 *