I recently built a Progressive Web App that takes a screencast from your Android device and then wraps the video in a device frame using FFMPEG.js like so:
I also managed to sort out building ffmpeg.js so that with relative ease, create custom optimized builds of ffmpeg and run it in the browser.
The two things together I think present a lot of opportunities to build some great new small Progressive Web Apps that push what we think the web is capable of with regards to manipulating audio and video.
There are a lot of web based video utilities on the web, but in my eyes many are built like websites of old, and don't take advantage of the advancements in client side processing, they are laden with advertising and can't work offline.
I am also very keen on the Unix philosophy of "Do one thing and do it well" so rather than build one massively monolithic video editing app, I think there are a lot of different web apps that can be built that easily and quickly:
- Trim a video (take 5 seconds off the front, 3 off the back etc)
- Any video format -> GIF
- Lots of images -> Any video format
- Any video format -> Any video format
- Add a watermark
- Resize video
- Shrink video
- Add watermarks to a video
- Overlay videos on top of each other
- Splice videos together
- FFMPEG playground (drop in sources and a script)
- If you have any ideas add them to this list
I think I have most of the code in place as a UI harness for this with my Device Frames repo on Github and in many cases it is a matter of adjusting the ffmpeg processing graph and updating the UI to allow for some configuration.
I am going to create a couple of these over the coming weeks, if anyone wants to join in, then get in contact!
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
