FFmpeg WebCLI: WebAssemblyによるブラウザベースのビデオ編集

FFmpeg WebCLIは、ffmpeg.wasmを活用して、すべてのメディア処理をユーザーのデバイス上でローカルに実行するブラウザベースのビデオエディタです。WebAssembly (WASM) を利用することで、サーバーへのファイルアップロードを必要とせず、包括的なビデオおよびオーディオ操作ツールを提供し、完全なデータプライバシーとオフライン機能を確保します。

ローカル処理とプライバシー

FFmpeg WebCLIは完全にクライアントサイドで動作するため、ビデオやオーディオデータがリモートサーバーに送信されることはありません。アプリケーションは初回ロード時に約31 MBのffmpeg-core WASMバイナリをダウンロードし、その後はキャッシュされます。すべてのファイルI/Oはブラウザの仮想ファイルシステム内で行われ、重いエンコード作業中もユーザーインターフェースのレスポンスを維持するために、処理はWeb Workersによって処理されます。

コアとなるビデオおよびオーディオ機能

このツールは、単純なフォーマット変換から複雑なフィルタチェーンまで、30以上の定義済みの操作を提供します。

ビデオ操作

  • フォーマット変換: MP4 (H.264/AAC), WebM (VP9/Opus), MKV, MOV, AVIへの再エンコードをサポートしています。
  • 圧縮: ファイルサイズと品質のバランスをとるためのCRF (Constant Rate Factor) スライダー (18から51) とエンコードプリセット (ultrafastからveryslow) を含んでいます。
  • 視覚効果: 回転、反転、クロップ、リバース、およびフェードイン/アウト効果の追加ツールを提供します。
  • 色調整: 明るさ、コントラスト、彩度のスライダーを提供し、ワンクリックでのグレースケール切り替えも可能です。
  • 高度なレイアウト: サイドバイサイド (水平/垂直) レイアウト、ピクチャー・イン・ピクチャー・オーバーレイ、および特定の比率 (例: TikTok用の9:16やシネマティック用の21:9) のためのカスタムパディング/レターボックスをサポートしています。
  • GIF作成: アニメーションGIFにおいて高品質な色の再現性を確保するために、2パスのパレット生成プロセスを使用します。

オーディオ処理

  • 抽出と変換: オーディオトラックをMP3, AAC, WAV, OGG, または FLAC形式に抽出します。
  • ミキシングとノーマライゼーション: amix フィルタを使用してバックグラウンドミュージックと元のオーディオをブレンドし、loudnorm フィルタを使用して知覚的な音量を放送基準 (例: YouTube/Spotify用の-14 LUFS) にノーマライズします。
  • 音量制御: ビデオの品質を損なわないようにストリームコピーを行いながら、オーディオレベルを調整するための乗数スライダー (0から4x) をを提供します。

ユーティリティツール

  • メタデータ削除: プライバシー向上のため、-map_metadata -1 を使用して埋め込まれたすべてのメタデータ (GPS, タイムスタンプ) を削除します。
  • 字幕埋め込み: .srt, .vtt, または .ass ファイルをMP4またはMKVコンテナにソフト字幕トラックとしてマッシュアップします。
  • サムネイル抽出: 特定のタイムスタンプで単一のフレームをJPEGまたはPNGとしてキャプチャします。

高度なユーザー制御: Raw FFmpeg アクセス

パワーユーザー向けに、FFmpeg WebCLIには Raw FFmpeg パネルが含まれています。このインターフェースでは、ユーザーがカスタム引数を入力でき、それらは -i input と出力ファイル名の間に挿入されます。

  • コマンドプレビュー: 実行される正確なコマンドをライブプレビューで表示します。
  • 例のリポジトリ: 内蔵のリポジトリには、ノイズ除去 (hqdn3d), シャープニング (unsharp), 手ブレ補正 (deshake), およびロスレスなリマックス (-c copy) などの高度なタスクのためのレシピを提供します。
  • 二次入力: ユーザーは、オーディオトラックの置換などの操作を行うために、2番目のファイル ( input2.<ext> として参照) をアップロードできます。

PWAによるオフライン機能

FFmpeg WebCLIはProgressive Web App (PWA) として実装されており、デスクトップやモバイルデバイスにネイティブアプリケーションとしてインストール可能です。

  • オフラインアクセス: サービスワーカーによってWASMバイナリと静的アセットがキャッシュされると、アプリはインターネット接続なしで完全に動作します。
  • スクリーン・ウェイク・ロック: 長いエンコードプロセス中にモバイルデバイスやデスクトップがスリープ状態になるのを防ぐため、アプリは Screen Wake Lock API を利用してディスプレイをアクティブに保ちます。
  • 互換性: PWAは、デスクトップ、Android、およびiOSのChrome, Edge, Firefox, および Safari で動作します。

技術的実装と要件

プロジェクトをローカルで実行するには、ffmpeg.wasm に必要な SharedArrayBuffer を有効にするために、サーバーに特定のセキュリティヘッダーを構成する必要があります。これらのヘッダーは以下の通りです。

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

コミュニティの洞察と議論

ツールのアクセシビリティは高く評価されていますが、一部のコミュニティメンバーは、パフォーマンスと最適化に関する技術的な質問を raised しています。

"How does performance compare to the native app? Is any form of hardware decoding/encoding like h264_nvenc available?"

現在、ツールはFFmpegのCPUベースのWASM実装に依存しているため、NVENCのようなハードウェア加速エンコーダにはアクセスできません。また、一部のユーザーは、UIの用語 (例: "Click to upload") が、サーバーへの実際のアップロードが行われないため、誤解を招く可能性があると指摘しています。

Sources