Create gifs in browser only 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 :o

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.

https://www.youtube.com/watch?v=_VEKYBKicEw

Gifs created using Giferate

Here is the Giferate app link:
https://techkblog.com/giferate

Stay safe all.

--

--

--

https://techkblog.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Using Node.js + S3 to Create, Delete, List Buckets and Upload, List Objects — Part 1

Better JavaScript — The Ternary Operator

Coding Laptop.

From TypeScript Hater to TypeScript Convinced User

BlogPost_401

React Native: How to test Components implementing Animated with Jest

Is It Normal To Forget How Your Own Code Works?

A look back at 2018 and all I have achieved

Parent-Child Communication in Vue. From Child to Parent

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Singh

Abhishek Singh

https://techkblog.com

More from Medium

The Lighthouse Project: A beacon of hope that extends beyond Cozumel’s beaches

Import SolidWorks CAD file into Blender 2.x

Google’s new Chrome OS Long-term Support (LTS) channel

Chrome OS update decision triangle

How do I remove adware?

A person sits at a laptop and their thought bubble reads “Dear AdBlock”