Vue.js FFMPEG Command Line Generator For Video,Audio & Image Processing in Browser Using HTML5 & Javascript

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

ffmpeg-commander

A simple web UI for generating common FFmpeg encoding operations.

https://alfg.github.io/ffmpeg-commander/

github pages Node.js CI

screenshot

Read the blog post at: https://dev.to/alfg/ffmpeg-the-easy-way-4a0h

Check out docker-ffmpeg for a customized Docker build of FFmpeg.

Why?

FFmpeg has many simple and complex options, which can be intimidating at first. I wanted to create a simple interface for generating common encoding operations for video and audio, inspired by HandBrake.

This tool does NOT cover all options of FFmpeg and some assumptions are made when generating the output. So adjustments may be necessary. Generated options may also vary based on your FFmpeg version and build configuration.

If you feel some options can be improved, feel free to open an issue or pull request.

Development

ffmpeg-commander is built with Vue.js and Bootstrap Vue.

Supported Node LTS Versions

  • v12
  • v14
  • v16

NVM is recommended for quickly installing and using different versions of Node.js.

Install

  • Load http://localhost:8080/ in the web browser.

Compiles and minifies for production

Deploy

Deploys to Github Pages

Docker

ffmpegd

ffmpegd is an optional companion application that connects ffmpeg-commander to ffmpeg by providing a websocket server to send encode tasks and receive realtime progress updates back to the browser. This allows using ffmpeg-commander as a GUI for ffmpeg.

See: https://github.com/alfg/ffmpegd

TODO

  • Support multiple inputs and map option
  • Expand on Filter options

 

 

https://github.com/alfg/ffmpeg-commander

 

Leave a Reply