Online Demo: ffmpeg-cmd-builder.html
A tool that interrogates the locally installed ffmpeg binary, parses its full capability set into structured JSON, and serves three browser-based UIs for exploring and building ffmpeg commands.
app.ts is a Node.js TypeScript script. It shells out to ffmpeg repeatedly to collect everything the local binary knows about itself:
| ffmpeg flag | What it returns |
|---|---|
-protocols |
Input/output protocols (http, rtmp, file, pipe, …) |
-demuxers |
Container formats that can be read |
-muxers |
Container formats that can be written |
-encoders |
Audio/video/subtitle encoders |
-filters |
Audio/video processing filters |
After building the list for each category it makes a second round of calls — ffmpeg -h encoder=libx264, ffmpeg -h filter=scale, etc. — to fetch each entry's full option set (types, defaults, allowed values, ranges). These detail calls run up to 100 at a time in parallel to keep total runtime manageable.
All results are serialised to example_output.json (~4 MB for a typical ffmpeg build).
Plain JSON with five top-level arrays: protocols, demuxers, muxers, encoders, filters. Each entry carries at minimum name, description, and flags; encoders and filters also have a structured options array (name, type, default, min/max, enum values).
The file is committed so the browser UIs work without re-running the parser.
All three pages are self-contained static HTML + vanilla JS. They fetch('example_output.json') (or fetch('http://localhost:8000/example_output.json') for the browser) at load time — no build step, no framework.
| File | Title | What it does |
|---|---|---|
ffmpeg-browser.html |
FFmpeg Capabilities Browser | Browse and search across all five categories. Click any entry to see its full option table. |
encoder-selector.html |
FFmpeg Encoder Selector | Pick an encoder from a dropdown, view its options and pixel format support, copy a skeleton command. |
ffmpeg-cmd-builder.html |
FFmpeg Command Builder | Tabbed builder: configure an encoder + filters, set option values, generates a ready-to-run ffmpeg command string. |
ffmpeg-browser.html fetches from the hardcoded origin http://localhost:8000, so the static server must run on port 8000.
- Node.js (any modern LTS)
- ffmpeg on PATH
- TypeScript (
npm install -g typescript) — only needed to recompileapp.ts - Python 3 — to serve the static files
Compile TypeScript to JavaScript (only needed after editing app.ts):
tsc
Output is app.js in the same directory.
Run the parser to regenerate example_output.json against the locally installed ffmpeg:
node app.js
This takes 30–90 seconds depending on how many codecs/filters your build includes. Progress is printed to the console.
Skip categories you don't need:
node app.js --skip-protocols
node app.js --skip-demuxers
node app.js --skip-muxers
node app.js --skip-encoders
node app.js --skip-filters
Limit to the first N entries per category (useful for quick tests):
node app.js --limit=10
Start from entry N (for resuming or batching):
node app.js --skip=50 --limit=20
Flags can be combined freely:
node app.js --skip-protocols --skip-demuxers --skip-muxers --limit=5
Start a static file server from the project directory on port 8000:
python -m http.server 8000 --directory C:\dev\node-ffmpeg-helper
Then open any of the three pages:
| URL | Page |
|---|---|
| http://localhost:8000/ffmpeg-browser.html | Capabilities browser |
| http://localhost:8000/encoder-selector.html | Encoder selector |
| http://localhost:8000/ffmpeg-cmd-builder.html | Command builder |
app.ts TypeScript source — parser and data model
app.js Compiled output (committed, ready to run)
app.d.ts TypeScript declarations (generated by tsc)
example_output.json Parsed ffmpeg capabilities (~4 MB)
ffmpeg-browser.html UI: browse all capabilities
encoder-selector.html UI: encoder picker with command preview
ffmpeg-cmd-builder.html UI: full command builder (encoder + filters)
tsconfig.json TypeScript compiler config
.vscode/tasks.json VS Code build task (runs tsc)
.vscode/launch.json VS Code launch config