Ideas for web apps with FFMPEG and ffmpeg.js

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>I recently built a Progressive Web App that takes a <a href="https://paulkinlan.github.io/deviceframe.es/">screencast from your Android device and then wraps the video in a device frame</a> using <a href="https://github.com/Kagami/ffmpeg.js">FFMPEG.js</a> like so:</p> <div class="yt-embed" style="position:relative;padding-bottom: 56.25%; padding-top: 25px; height: 0;"> <iframe data-src="//www.youtube-nocookie.com/embed/E_U6zvjW8so?autoplay=1" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"></iframe> </div> <p>I also managed to sort out <a href="https://paul.kinlan.me/building-ffmpeg.js/">building ffmpeg.js</a> so that with relative ease, create custom optimized builds of ffmpeg and run it in the browser.</p> <p>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.</p> <p>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.</p> <p>I am also very keen on the Unix philosophy of <a href="https://en.wikipedia.org/wiki/Unix_philosophy#Do_One_Thing_and_Do_It_Well">"Do one thing and do it well"</a> 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:</p> <ul> <li>Trim a video (take 5 seconds off the front, 3 off the back etc)</li> <li>Any video format -> GIF</li> <li>Lots of images -> Any video format</li> <li>Any video format -> Any video format</li> <li>Add a watermark</li> <li>Resize video</li> <li>Shrink video</li> <li>Add watermarks to a video</li> <li>Overlay videos on top of each other</li> <li>Splice videos together</li> <li>FFMPEG playground (drop in sources and a script)</li> <li><a href="https://github.com/PaulKinlan/paul.kinlan.me/edit/master/content/2016-12-05-ffmpeg-ideas.markdown">If you have any ideas add them to this list</a></li> </ul> <p>I think I have most of the code in place as a UI harness for this with my <a href="https://github.com/PaulKinlan/deviceframe.es">Device Frames repo on Github</a> and in many cases it is a matter of adjusting the ffmpeg processing graph and updating the UI to allow for some configuration.</p> <p>I am going to create a couple of these over the coming weeks, if anyone wants to join in, then get in contact!</p>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan