Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Ideas for Web Apps With FFMPEG and ffmpeg.js

DZone's Guide to

Ideas for Web Apps With FFMPEG and ffmpeg.js

The author 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.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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!

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
frames ,android ,ffmpeg ,web apps

Published at DZone with permission of Paul Kinlan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}