A simple web UI for generating common FFmpeg encoding operations.
💡 Skip the terminal. Video Commander runs the encode — free for personal use.
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.
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.
The Preset picker ships ready-made recipes for the workflows people reach for most. Pick one, adjust anything you like, and copy the command.
| Group | Recipes |
|---|---|
| General | H264 and VP9 ladders from 360p to 1080p, CRF and fixed-bitrate |
| Web & Streaming | H264/HEVC MP4 with faststart, VP9 WebM constant quality, AV1 |
| Social & Mobile | Vertical 9:16 1080x1920, square 1:1 1080x1080 |
| Archive & Quality | Visually lossless H264, 10-bit HEVC archive, 4K UHD |
| Restore & Cleanup | Deinterlace DVD/broadcast, denoise + deband, stabilize action cam |
| Audio Only | Extract to MP3, M4A/AAC, FLAC, and a mono podcast mix |
| Utility | Remux to MP4, strip audio, 10 second preview clip, timelapse, slow motion |
Your own presets are saved to local storage, and every setting is also encoded in the URL, so a tweaked recipe can be shared as a link.
ffmpeg-commander is built with React, Vite and
Tailwind CSS.
Node 20 or newer. NVM is recommended for managing versions.
npm install
npm run dev- Load
http://localhost:5173/in the web browser.
npm test
npm run lint
npm run buildsrc/lib/ framework-agnostic modules: command generation, the URL
contract, presets, storage, the ffmpegd client
src/lib/__tests__ the test suite
src/components/ React components (ui/ primitives, sections/ form groups)
src/hooks/ form state, presets, theme, ffmpegd connection
Deploys to GitHub Pages automatically on every push to
master, via .github/workflows/github-pages.yml. To publish by hand:
npm run deploy
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
The app connects to ffmpegd at localhost:8080. ffmpegd only accepts
connections from a fixed list of origins, so the site you load
ffmpeg-commander from must be on that list.
When running the dev server, the Vite config proxies /ws and /files to
localhost:8080 and presents an origin ffmpegd accepts, since the dev
server's own port is not on the list.
To use a daemon on another host or port, turn on ffmpegd in the Options tab and
enter its address under Daemon address, e.g. mybox:9000 or
https://ffmpegd.example.com. It is saved in the browser's localStorage.
Browsers only let an https page open a plain ws:// connection to localhost.
To reach a daemon on another machine from https://ffmpeg-commander.com, serve it
over https (for example behind a TLS reverse proxy) and enter an https://
address.
- Support multiple inputs and map option
- Expand on Filter options
MIT