How to create gifs in browser using Giferate

From time to time, I have the need to create custom gifs for my blog or sharing over social networking sites. I had used websites like Giphy to create them, in the past. However, I never liked the idea of uploading my video contents to their servers just to create a 15-20 seconds long gifs.

Later, I used softwares like ffmpeg, to generate gifs or any video editing requirements, natively. However, to use commandline tools like ffmpeg, one has to remember the various options or note them down :). So I created few scripts to do such repetitive tasks for me.

But recently, I had a realisation that there are many other content writers, bloggers, developers who have similar requirements as mine. And not everyone, would want to install a dedicated software or write scripts, to make the task easier.

Hence, I was looking for ways to have a generic solution that would work for all and web based apps are excellent for such use case. Interestingly, I came across this github project for ffmepg-wasm, which is basically compiled web assembly binary for ffmpeg and that can be readily used with NodeJS, ReactJS and other means. And because its a web assembly binary, it can run natively and within the browser itself i.e on the client side 😮

And so I did a basic ReactJS UI on top, bundled it as a docker container and hosted on my blog site. I have named it Giferate. If someone is interested in knowing how to host web apps along with wordpress site, then let me know. I will write a post on this.

Following video is a demo of how to use Giferate.

gif created using Giferate

Share the post, if you liked it

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.