Hello.

Simple steps to create an instagram-like Video Boomerang effect on the web

I'm embarking on a project to build a web-based video editor! The goal is to create a tool that simplifies video creation and editing entirely within the browser. Think Screenflow, but accessible to everyone directly on the web. This project is driven by my own needs for creating device demos, screencasts, and other videos. I've already made some progress (check out the demo!), but there's a lot more to do. I'll be exploring existing web technologies to record audio/video, manipulate content (watermarks, filters, overlays), and output in various formats. This isn't about building a massive commercial product, but rather about understanding what's possible and empowering others to create great videos using the open web.

I combined FFMPEG.js, a tool compiled with asm.js for video editing in web apps, with Comlink, a library that simplifies web worker interactions. This integration, along with my experiment of exporting FFMPEG to Web Assembly, allows for cleaner video encoding off the main thread. The provided code snippets demonstrate the simplicity of using Comlink to expose the ffmpeg interface within a web worker and then access it from the main thread as a proxy, offering a neat solution for asynchronous video processing.

I've created a Progressive Web App using FFMPEG.js that applies device frames to Android screen recordings. I've also streamlined the ffmpeg.js build process. This opens up exciting possibilities for building powerful web apps for audio and video manipulation. Many existing web-based video tools are outdated and ad-heavy. I'm interested in creating smaller, focused PWAs, each performing a specific task efficiently. I'm planning to build several apps based on this, such as video trimming, format conversion, watermarking, resizing, and splicing. The codebase from my Device Frames project provides a good starting point. I invite others to collaborate on this effort.

In a previous post, I discussed screen recording from Android. This post details how I automated the process of adding a device frame to those recordings, making them look more professional. Previously, this was a tedious manual process involving Screenflow, but now I've automated it using ffmpeg. The ffmpeg command scales the screen recording and overlays it onto a background image of a device frame. The code, available on GitHub, handles the entire process, including setting up the Android device for recording, pulling the recording, and applying the frame. While the current solution works well, I'm open to suggestions for improvement from ffmpeg experts.