← all writing

Using FFMPEG.wasm to build a local-first video processing app

· 3 min read · Comments ↓

I shipped a video processing app that runs locally on your browser using FFMPEG.wasm by shipping as a PWA. Isnt that cool!

Listen to this post
0:00

I’m trying to do a weekly version of SHIPPED, basically me shipping something, small or big, every week. In this version of SHIPPED, I made a small tool to process videos to optimise them for social media.

The problem

As a content creator, I want my videos uploaded to twitter in the best quality. I dived into twitter’s documentation to find out the best encoding, and other settings to upload to twitter and made an FFMPEG command that I would use.

But, not everyone knows about these little tricks so, i posted it to my twitter

… a friend of mine was like, “someone will make a website out of this”

But then there’s a lot of challenges to this

Notes

  • When I ship products, they usually die out. Because I can’t keep the backend running forever.
  • Video processing happens to be expensive and I don’t want to pay for it
  • moving stuff to-and-fro the server is a pain. it’s very slow and requires the user to upload it, wait till that is done. This also costs a lot of bandwidth for both the user and me, the server (i mean i use cloudflare but still)
  • Vercel, cloudflare and most hosting providers have a hard limit on the length of the video. There’s also issues with timeout in serverless functions. I dont want to deal with all that.

The solution

I used FFMPEG.wasm to process videos on the client itself. This was pretty challenging but rewarding because I had never tried anything like this before and I ran into so many roadblocks.

There’s no github repository or proper example of FFMPEG.wasm being used in NextJS or plain react for proper user experience.

Because everything’s on the client anyway - I also decided to take the app completely offline. Video-tools is shipped as a PWA and runs completely offline!!

isn’t that cool

I might try with more WASM stuff here, like using Emscripten to compile LLMS but for WASM, hence being able to ship small language models (maybe phi-2) to browser-based apps running locally.

There’s so much cool things that can be done with WASM and I feel like this small project just opened a whole new gateway to thousands of project ideas. And I’ll keep building, learning and shipping.

until then, try out the app here - https://video-tools.dhr.wtf/ (for now there’s just the twitter compressor thx)

ANDDD LAUNCH!

here’s the public launch announcement

From start (4am, Jan 16) to launch (5pm, Jan 16) this took 12 hours, on a day of classes 🚀

PS: i’m building these things in middle of classes and assignments. Might as well write a small post about why I do all this even though there’s no “incentive” (very few users, none paying, etc etc)

In short, I do it for the spirit of building and learning.