video

FFmpeg Filter Builder

FFmpeg Filter Graphをノードで組み、Previewで確認してH.264/AAC MP4を書き出す。Browser Kittyでは高速なMulti-thread版を利用します。

ローカル処理

ファイルについてこのツールで選択したファイルや入力内容は、Browser Kittyのバックエンドへアップロードせずブラウザ内で処理します。

操作デモ 実際の操作の流れを短い動画で確認できます。

このツールについて

FFmpeg Filter Builderは、MP4動画へ適用するFFmpeg Filter Graphをノードで組み立てるツールです。10種類のRecipeから始めても、Video / Audio / TextのNodeを直接追加しても、展開後は通常のNode / Edgeとして編集できます。Pan / Zoom、複数選択、Port接続、MiniMapを使いながら、Split / OverlayやAudio Split / Mixを含むGraphを視覚的に構成できます。

Previewでは3秒 / 5秒 / 10秒だけを処理して結果を確認し、問題なければ同じGraphを入力動画全体へ適用してH.264 + AACのMP4を書き出します。Browser KittyではFFmpeg WASMのMulti-thread版を使用するため、このアプリの配信URLだけCOOP / COEPを設定してcross-origin isolatedにしています。選択した動画、Graph、Preview、Full Renderはブラウザ内で処理され、動画をアプリのサーバーへアップロードしません。

こんなときに便利

FFmpegのfilter_complexを手書きする前に、Video / Audio filterのつながりをノードで組んで試したい
Crop、Scale、Rotate、Fade、色調整など複数の動画処理を順番に組み合わせたい
Split / Overlayを使ってPicture in Pictureや背景ぼかし縦動画を作りたい
動画の速度変更と音声同期、Normalize、Fadeなどを同じGraphで処理したい
短いPreviewで確認してから、同じGraphで動画全体をブラウザ内レンダリングしたい
作ったGraphをJSONで保存したり、Desktop FFmpeg commandとして持ち出したい

できること

このツールで利用できる主な機能です。

RecipeまたはNodeから編集可能なFFmpeg Filter Graphを構築
Trim、Speed、Scale、Crop、Rotate、Color、Blur、Sharpen、FadeなどのVideo filterをGUIで設定
Split / Overlayで分岐・合流し、Picture in Pictureや背景ぼかし構成を作成
Audio Trim、Volume、Fade、Speed、High-pass、Low-pass、Normalize、Split、Mixにも対応
3秒 / 5秒 / 10秒Previewで確認し、同じGraphを動画全体へ適用してH.264 + AAC MP4を書き出し
Graph JSON保存・復元、Autosave、Desktop FFmpeg command生成に対応

使い方

「ツールを開く」を押し、Input NodeからMP4動画を選択します。
Recipeを選んでGraphへ展開するか、PaletteからVideo / Audio / TextのFilter Nodeを追加します。
Portを接続して処理順や分岐・合流を組み、Nodeを選択してInspectorで設定を変更します。
3秒 / 5秒 / 10秒のPreviewを実行し、意図した映像・音声になっているか確認します。
必要に応じてGraphを修正し、Previewを繰り返します。
問題なければ「動画を書き出す」で同じGraphを入力動画全体へ適用します。
生成されたH.264 + AAC MP4を確認し、ファイル名を指定して端末へ保存します。必要ならGraph JSONやFFmpeg commandも保存します。

対応範囲

入力: 現在はmain media inputとして1つのMP4動画に対応します。
Video: Trim、Speed、FPS、Scale、Crop、Pad、Rotate、Flip、Aspect Ratio、Color Adjust、Hue、Blur、Sharpen、Fade。
Complex graph: Split / Overlayでbranch / merge構成を作れます。Picture in Pictureは同じ入力動画をSplitしたbranchを利用します。
Audio: Trim、Volume、Fade、Speed、High-pass、Low-pass、Normalize、Split、Mix。Video Speed時の音声同期にも対応します。
Text: 内蔵M PLUS 1p Regularを使うDraw Textで、日本語 / 英語、位置、色、背景、余白、表示時間を設定できます。
保存: Graph JSONの保存 / 読み込み、Graphと出力ファイル名のAutosave、Desktop FFmpeg command生成に対応します。動画ファイルはAutosaveしません。
Browser Kitty版: GitHub Pagesの /mt/ 配布HTMLを取り込み、/apps/ffmpeg-filter-builder.html だけをCOOP / COEP付きで配信してSharedArrayBufferを有効にします。

制限・注意点

入力は現在1つのmain MP4 media fileに限定され、独立した2本目動画や画像Watermark入力には対応していません。
Picture in Pictureは独立した2本目動画ではなく、同じ入力動画をSplitしたbranchを使います。Watermark RecipeはDraw Textによる文字透かしです。
出力はH.264 video + AAC audioのMP4です。
Browser KittyではMulti-thread版を使用するため、HTTP(S)配信とcross-origin isolationが必要です。file://から直接実行する用途には標準Single-thread版を利用してください。
主要対象ブラウザはChrome / Edgeです。Firefox / Safariでは一部機能が動く可能性がありますが主要対象ではありません。
動画全体をブラウザ内で再エンコードするため、長時間・高解像度動画ではCPU負荷と端末メモリ使用量が大きくなります。
MP4コンテナでも内部codecや端末メモリの制約により処理できない場合があります。

よくある質問

動画はサーバーへアップロードされますか？

いいえ。Browser Kittyから最初のアプリHTMLを取得する通信は発生しますが、選択したMP4、Graph、Preview、Full Render結果はブラウザ内で処理し、動画ファイルをアプリのサーバーへ送信しません。

なぜBrowser Kitty版はMulti-thread版ですか？

FFmpeg WASMのMulti-thread runtimeで複数threadを利用するためです。SharedArrayBufferが必要なので、Browser Kittyではこのアプリの配信URLだけCOOP / COEP headerを付けてcross-origin isolatedにします。

FFmpegコマンドを完全に置き換えるツールですか？

いいえ。FFmpeg CLI全体の置き換えではなく、対応しているVideo / Audio / Text filter graphを視覚的に組み、試し、必要ならDesktop FFmpeg commandへ持ち出すためのGUIです。

別の動画を2本読み込んでPicture in Pictureにできますか？

現時点ではできません。main media inputは1つで、Picture in Picture Recipeは同じ入力動画をSplitしたbranchを重ねます。

作ったGraphは保存できますか？

はい。Graph JSONとして保存・読み込みできます。AutosaveはGraphと出力ファイル名を保存しますが、選択したMP4や生成動画は保存しません。

オフライン版・ソースコード

Browser Kittyで配信するMulti-thread版は、SharedArrayBufferを使うためHTTP(S)とCOOP / COEPによるcross-origin isolationが必要です。動画処理自体は実行時外部通信なしで行いますが、HTMLを保存してfile://から直接開く用途には向きません。完全に持ち運べる単一HTMLとして使う場合は、元リポジトリの標準Single-thread版 dist/index.html を利用してください。

GitHubでソースを見る