Hello.

I wanted the functionality of Squoosh, but in my web app. Here's how I did it.

You should be able to create and edit videos using just the web in the browser. It should be possible to provide a user-interface akin to Screenflow that lets you create an output video that combines multiple videos, images, and audio into one video that can be uploaded to services like YouTube. This post is really just a statement of intent. I am going to start the long process of working out what is and isn't available on the platform and seeing how far we can get today.

I love FFMPEG.js, it's a neat tool that is compiled with asm.js`and it let's me build JS web apps that can quickly edit videos. FFMPEG.js also works with web workers so that you can encode videos without blocking the main thread. I also love Comlink. Comlink let's me easily interact with web workers by exposing functions and classes without having to deal with a complex postMessage state machine. I recently got to combine the two together.

Sam Thorogood on Dev.to writes, Why did I write this post? Emscripten is a wonderful tool, but it has a long history (for asm.js), and isn't perfect. I think it errs too much on the side of "magic", and many posts rave about how it's so easy to EM_ASM_ or use binding-fu, but this all comes at a cost, and can introduce huge amounts of inadvertent overhead—think copying huge memory buffers around because we're trying to make them immutable or easily exposed.

FFMPEG.js is an amazing project and it helped me building one of my latest projects: Device Frame. It basically builds ffmpeg (with a good set of defaults to keep the size small — as small as it can be). If the default build doesn't support the filters and encoders you need, then you will need to build it yourself. This is more of a note for me in the future, but this is what I did to get it working.