Lets Make a Gif
A photo & video editor built with React and Nodejs
Motivation
I've always enjoyed making weird little video loops. When I was a kid, my friends and I would make short stop motion animations with my dad's video camera. We made videos of toys walking around the room, a sandwich that seemed to eat itself, and a pile of bee bees poured on the carpet that would morph into various faces, just to name a few. This app is an homage to those days.
Frontend: React
The coolest part of this app (in my opinion) is the wide range of effect filters available. The original idea for the app was a simple file converter. Then, during my testing, I realized that I would need to give users the ability to adjust certain things like the framerate. So I added a setting for that.
Then, I started messing around with the various filters available with ffmpeg. I found a color filter that was pretty simple to use. So I added a setting for that as well. Originally, I only planned on having a few filters. But I kept discovering more and more in this vast collection that were just too cool to pass up. Currently the app sports a whopping 19 effect filters. There were 20 originally but one of them kept crashing the server.
One of the biggest challenges was trying to come up with a design that worked well for both mobile and desktop users. And one that would allow future me to add new filters or features to the site without a lot of fussing about. I finally settled on making the controls viewable via a button toggle. This frees up valuable screen space for mobile users and gives desktop users more options as well.
Backend: NodeJs
Most of the heavy lifting happens in the Nodejs backend. Video and image processing can be very resource intensive so it's important to look for and recognize opportunities to increase effeciency and reduce the amount of memory consumption. This becomes absolutely crucial when deploying to a production environment. A $5.00 digital ocean droplet or a free tier AWS EC2 instance isn't going to have near the amount of resources available as you get when you're developing an app locally. (A lesson I learned and relearned many times while developing this app). One of the things I started doing is resizing any files with dimensions greater than 480 x 270. Once the file is resized, the original file is deleted. All edits then use the newly created, much smaller file.
Secret sauce: Ffmpeg
This app harnesses the power of a program called ffmpeg. Ffmpeg is an extremely powerful command line utilty for working with all kinds of media files. From simple edits like cropping or trimming a video to complex operations like blending multiple images together or adding a semi transparent water mark, ffmpeg does it all. It's truly an amazing piece of software and without it, this app wouldn't exist. To learn more about ffmpeg visit ffmpeg.org
Roadmap forward
This app was and still is a challenge on many levels. As mentioned earlier, video and image processing is pretty resource intensive. Reducing the input file size is a good start but, there are still plenty more opportunities for optimizations. For instance, currently, when you make changes to the filters, it takes the unedited input file and reapplies the new filters. In some cases this will be unavoidable. But other times, I believe we should be able to take the currently filtered video, and apply the updates directly to that. For example, if you've applied a bunch of effects and now you want to simply adjust the framerate, there's no need to reapply all the effects. We've already done that. We should be able to adjust the framerate without having to wait around for the same effects to be reapplied.