ffmpew.webcli: ブラウザ上で完結する動画編集ツール

ffmpeg.wasm を駆使した、アップロードもサーバー利用も不要な動画編集ツールです。WebAssembly 技術により、すべての処理はお客様のブラウザ内でローカル環境下で完了します。

🚀 ライブデモを確認

✨ メイン機能

• ✅ アップロード不要 — すべての動画処理は端末上で完結します
• ✅ 30 以上の動画操作 — GIF 作成、フォーマット変換、圧縮、トリミング、エフェクト、フィルタリングなど多彩な機能を提供
• ✅ オフライン優先の PWA — 初回使用後は完全にオフラインで動作し、ネイティブアプリとしてインストール可能です
• ✅ スクリーンウェイクロック対応 — どのデバイスでも動画処理中は画面が常時有効（スリープ防止）になります
• ✅ ライブプレビュー — 出力容量の見積もりや設定変更をリアルタイムで確認できます
• ✅ 多フォーマット対応 — MP4, WebM, MKV, MOV, AVI, GIF, MP3, AAC, WAV, OGG, FLAC, JPG, PNG など多数の形式に対応
• ✅ 高度な機能 — 生の ffmpeg コマンドアクセス、字幕埋め込み、コンテナー結合、ピクチャー・イン・ピクチャ、音源ミキシングなど
• ✅ 高速かつレスポンシブ — Web Workers を活用し、重たい処理を背景で実行します
• ✅ プライバシー重視 — データ収集ゼロであり、お客様のファイルはローカルで安全に処理されます

🛠 利用シーンと主要機能

🎞️ GIF メーカー

あらゆる動画クリップをアニメーション GIF に変換します。フレームレートを設定し、出力幅を変更するだけで高さはアスペクト比維持のために自動調整されます。2 パスのパレット生成アルゴリズム採用により最高品質の色再現を実現。

🔄 動画フォーマット変換器

別のコンテナとコーデックへ動画を再エンコードします。

• MP4: H.264 + AAC（最も互換性が高い形式）
• WebM: VP9 + Opus（web 向け最適化、同品質で MP4 より約 45% 小型化）
• MKV / MOV: H.264 + AAC を採用した代替コンテナ
• AVI: リラックス互換性用の形式

🗜️ 動画圧縮

解像度を維持しつつファイルサイズを削減します。

• CRF スライダー（18 = ほぼロスレス ⇄ 51 = 最大圧縮）で画質調整
• エンコードプリセット（ultrafast ⇄ veryslow）で速度と効率のバランス取得
• 設定変更に応じて出力容量の見積もりがリアルタイム更新

✂️ 動画トリミング

タイムラインスライダーで開始点と終了点を指定します。トリミングは他のすべての操作の上に適用されるため、短いクリップを切り出して圧縮・GIF 変換といった一連の処理を同時に実行できます。

📐 リサイズ＆圧縮

1 つのパスで出力サイズを変更し圧縮を行います。scale フィルターと CRF ベースの H.264 編碼を組み合わせています。幅と高さはソース動画から自動入力され、どちらかの値を入力するか空白に留めることで ffmpeg がアスペクト比を維持します。

🎵 音声抽出

あらゆる動画から音声トラックを独立した音声ファイルとして抽出します。

• MP3: 汎用性の高い再生フォーマット
• AAC: 効率的な有損失形式、モバイル向けに最適
• WAV: 圧縮されない PCM 形式
• OGG Vorbis: オープンソースの有損失形式
• FLAC: ロスレス圧縮形式

🔇 動画の音声除去

音声ストリームを完全に削除します。出力は音声トラックのない元の動画となり、サイレントループや SNS クリップ作成、他音声への差し替えの予備処理に適しています。

⚡ スピード変化

再生速度を速く（0.25 倍）も、遅く（4 倍）も変更可能です。動画の PTS と atempo 音声フィルタチェーンの両方を調整することで、音調と同期を維持します。単一フィルタで処理できない範囲（0.5～2.0 倍以外）の場合は、atempo ステージを複数連鎖させる構成となります。

🔄 回転／鏡映

再アップロードなしで方向修正やミラー効果を作成します。

• 選択肢: 時計回り 90°、反時計回り 90°、180°、横反転、縦反転、両軸反転

✂️ クリップ（アスペクトカット）

フレームを特定の領域にトリミングします。X/Y オffset と幅/高さはソース動画の次元から自動入力されるため、ゼロから設定する必要なく値を直接引き下げて設定できます。

🖼 サムネイル抽出器

動画内の任意の点からの単一フレームを抽出し、JPEG または PNG 画像として保存します。タイムスタンプ欄にはロードされたクリップの中点に自動入力されます。

⏪ リバーズ（逆再生）

ffmpeg の reverse と areverse フィルタを利用し、動画（音声も）を逆方向に再生します。

🌅 フェードイン／アウト

スムーズなフェードイン、フェードアウト、または両方を追加できます。各方向の継続時間を秒単位で独立して設定し、フィルタはトリミング後に適用されます。

🎨 調整（明るさ／コントラスト／彩度）

eq フィルタを使用してクリップの見た目を微調整します。

• スライダー制御: 明るさ（-1 → 1）、コントラスト（0 → 2）、彩度（0 → 3）
• モノクロ化: グレースケールチェックボックスにチェックすると彩度を 0 に固定し、瞬時にモノクロ出力が可能

🚫 メタデータ除去

共有前にすべての埋め込みメタデータを削除します（GPS 座標、カメラ情報、作成日時等）。再エンコード時には

-map_metadata -1

📝 サブタイトル埋め込み

.srt

.vtt

.ass

• MP4: サブタイトルストリームは

  mov_text

  コードックでエンコード
• MKV: サブタイトルストリームをネイティブにコピー（ASS/SSA スタイリング保持）

動画と音声はストリームコピー処理のため画質劣化ゼロかつほぼ即時です。画像内にハード焼印する字幕機能は、libass が実装された ffmpeg ビルドに限られ、標準的な WebAssembly コアでは利用できません。

🔊 ボリューム調整

あらゆる動画の音声レベルをブーストまたは低減します。

• 音量乗算係数: 0 = サイレント、1.0 = 変更なし、最大 4 倍まで

• vol

  フィルタを使用して音声は再エンコードされ、動画ストリームはストリームコピーのため画質劣化がありません

🔁 ループ／リピート

単一の出力ファイルで動画を N 回連続再生します。合計回数（2〜50）を設定し、ffmpeg は

-stream_loop

🖼️ ロゴ／画像オーバーレイ

ロゴ、ウォーターマーク、あるいはあらゆる画像（透明 PNG が最適）をすべてのフレームにスタンプします。

• イメージファイル: 任意の PNG, JPG, GIF, WebP
• 位置: 右下、左上、右上、左下、中央
• 幅（動画の %）: ロゴを動画幅に対してスケーリング（デフォルト 15%）

overlay

🎵 音源ミックス（BGM）

2 つ目の音声ファイルを BGM として動画にブレンドします。

• 音楽／音声ファイル: MP3, WAV, OGG, AAC, FLAC, M4A
• ボリュームスライダー: オリジナル音声（0〜2）、音楽（0〜2、デフォルト 0.30）
• 自動ループ: 音楽トラックが動画よりも短い場合は、

  -stream_loop -1

  で自動的にループします

両ストリームは

amix

🔗 結合（クリップ接続）

ロードされたファイルの後続に第 2 の動画クリップを付加します。concat フィルタを使用するため、解像度やフレームレート、コーデックが異なるクリップも自動的に扱われます。トリミングは第 1 クリップのみ適用され、第 2 クリップはそのまま採択されます。

↔️ サイドバイサイド

単一のフレーム内に 2 つの動画クリップを並置します。

• レイアウト: 横（左／右 using hstack）または縦（上／下 using vstack）
• 共通次元: 横配置では目標高さ、縦配置では目標幅（両クリップをスケーリングして一致させる）
• 音声: 第 1 クリップ、第 2 クリップ、または音声なし

H.264/AAC に再エンコードされます。比較動画やリアクション動画に適しています。トリミングは無視されます。

⧉ ピクチャー・イン・ピクチャ

メインクリップの上に小さなウィンドウとして第 2 の動画をオーバーレイします。

• オーバーレイ動画: インセット表示される小さな動画
• 位置: コーナーまたは中央（ロゴオーレイと同じオプション）
• 幅（メイン動画の %）: インセットサイズを制御（デフォルト 30%）

オーバーレイ動画がメインクリップよりも短い場合は自動的にループします。トリッキングはメインクリップに適用され、メインクリップの音声は保持されます。両ストリームは H.264/AAC に再エンコードされます。

📊 メディア情報

ファイルロード時に直ちにブラウザの video 要素から抽出された主要メタ情報を表示します。

• ファイル名、サイズ、継続時間、解像度、推定ビットレート、MIME タイプ

「動画処理」をクリックすると深層スキャン（

ffmpeg -hide_banner -i …

🛠 生の FFmpeg

ブラウザ内で ffmpeg コマンドラインへの完全アクセスを提供します。テキストエリアに任意の引数を打ち込み、

-i input

• ライブコマンドプレビュー: タイプするたびに正確なコマンドを表示
• 空白処理: 空白を含む値はクォート処理により適切に扱われます

サンプルコマンドライブラリ

「レシピ」をクリックすると即座に必要な引数と拡張子欄が埋まります。

-c copy

-vn -acodec pcm_s16le

-vframes 1

-map 0:v:0 -map 1:a:0 -shortest

第 2 入力ファイル: 「生の FFmpeg」パネルにはオプションの「Choose ファイルピッカー」が含まれます。選択されたファイルは ffmpeg の仮想ファイルシステムに

input2.<ext>

として書き込まれ、引数で参照可能（例：

-i input2.mp3

）。特に「音源置換」レシピでは必須です。

⬛ パッド／レッターボックス

クロップやストレッチなしに動画に特定のアスペクト比を持たせるために色付きバーを追加します。動画はターゲットキャンバス全体に入るようにスケーリングされ、空領域は選択されたパッドカラーで埋められます。

パッドカラー：ブラック、ホワイト、グレー。H.264/AAC に再エンコードされます。

📊 オーディオ正規化

ffmpeg の loudnorm (EBU R128) フィルタを使用して、クリップの知覚ラウドネスを放送標準目標に調整します。

• -14 LUFS: YouTube / Spotify 推奨レベル
• -16 LUFS: ポッドキャスト / Apple Podcasts
• -23 LUFS: 放送標準 (EBU R128)

動画ストリームはストリームコピー（再エンコードなし）され、音声のみが処理されます。

🌀 ノイズ低減

hqdn3d

H.264 で動画を再エンコードし、音声はストリームコピーされます。

↩️ ブーメラン

クラシックなブーメランループ効果を生成：クリップは順に再生した直後すぐに逆再生され、単一の出力ファイルになります。ffmpeg の reverse フィルタを concat フィルタで元の動画と結合します。順方向セグメントのみトリミングが尊重され、音声が除去されます（逆再生された音声は意図的に聴こえないため）。

🔍 シャープ／ブラー

全体動画に対してシャープ化またはブラー効果を適用します。

• シャープ化:

  unsharp

  mask フィルタ（lum ＋ chroma）を使用
  • ライト:

    unsharp=3:3:0.8:3:3:0

  • ミディアム:

    unsharp=5:5:1.5:5:5:0

  • ヘビー:

    unsharp=7:7:3:7:7:0

• ブラー:

  boxblur

  フィルタを使用
  • ライト:

    boxblur=3:1

  • ミディアム:

    boxblur=6:1

  • ヘビー:

    boxblur=12:1

H.264 に動画を再エンコードし、音声はストリームコピーされます。

⚙️ 動作原理

ローカル処理フロー:

1. 「ffmpeg ロード」をクリック — ffmpeg-core WebAssembly バイナリをダウンロードします（約 31 MB で、初回ロード後はキャッシュされます）。
2. 動画ファイルをドロップまたは選択 — 「動画処理」ボタンが有効化され、ffmpeg がまだ読み込まれていない場合、「Load ffmpeg & Process」と表示し、クリック時の最初の動作で自動的にダウンロードされます。
3. （オプション）タイムラインスライダーでトリミング点を設定
4. 操作を選択して設定を調整 — パラメータを変更するごとにライブサイズ見積もりが更新されます。
5. 「動画処理」をクリック — ffmpeg はブラウザ内の Web Worker 内で完全に実行されます。
6. 結果のプレビュー（動画、音声プレイヤー、または画像に応じて）を確認してダウンロードします。

すべてのファイル I/O はお客様の機械で完結し、何らサーバーへの送信は行われません。

パフォーマンスと信頼性:

• 動画処理はバックグラウンドワーカーで実行され、UI がレスポンシブに保たれます
• 長いエンコード作業中は画面が自動的に常時有効（スリープ防止）のままになります
• Service Worker はすべての静的資産と CDN リソースをキャッシュし、即座のオフラインアクセスを実現します
• 失敗した操作は自動的に仮想ファイルシステムをクリーンアップします

📱 プログレッシブ Web アプリ (PWA)

エディタはインテリジェントキャッシングとスクリーンウェイクロックサポートにより完全にオフラインで動作します。

主な機能:

• 🔌 アプリとしてインストール — ブラウザのネイティブインストールボタンを使用してホーム画面やアプリトレイに追加可能です。デスクトップとモバイル両方で動作します。
• 📦 オフライン対応 — ffmpeg がロードされキャッシュされた後、インターネット接続なしですべての処理が可能です。
• ⚡ スマートキャッシング
  • 静的資産（HTML, CSS, JS）は初回ロード時にキャッシュされます
  • ffmpeg.wasm ライブラリと依存関係は CDN からオフライン用にキャッシュされます
  • Service Worker はネットワーク利用不可能時にリクエストをキャッチし、キャッシュから提供します
• 📱 スクリーンウェイクロック — 動画処理中は画面が自動的に常時有効になり、モバイルおよびデスクトップのエンコード中に端末のスリープやロックを防ぎます。
• 🌐 どこでも動作
  • Desktop: Chrome, Edge, Firefox, Safari
  • Android: Chrome, Firefox, Samsung Internet
  • iOS: Safari（iOS PWA サポートは限定的ですが利用可能）

PWA としての使用方法:

1. Web ブラウザ でアプリを訪問します。
2. ブラウザのアドレスバーまたはメニューにあるインストールボタンをクリック → インストール確認。
3. オフラインで動作: オンライン上で一度 ffmpeg をロードし、以降はインターネット接続なしで作業できます。
4. 画面が常時有効: 処理中に自動的に画面がオンになり、中断を防ぎます。

💻 ローカルでの実行

以下のコマンドを使用することで、ローカルサーバー上でも動作します。

git clone https://github.com/tejaswigowda/ffmpeg.wasm.editor.git
cd ffmpeg.wasm.editor
node server.js          # docs/ を提供し、必要な COOP/COEP ヘッダーを設定

サーバーは

Cross-Origin-Opener-Policy: same-origin

Cross-Origin-Embedder-Policy: require-corp

または、静的サーバーで上記の 2 つのヘッダーを設定した上で

docs/

# 代替案：npx serve を使用する場合
npx serve docs

📜 ライセンス

本プロジェクトは GNU General Public License v3.0 (GPL-3.0) に基づいてライセンスされています。詳細は LICENSE ファイルをご覧ください。

ライセンス概要

以下の権利を有されます：

• ✅ 任意の目的でこのソフトウェアを使用
• ✅ ソースコードの研究と修正
• ✅ ソフトウェアのコピーを配布
• ✅ 修正バージョンを配布

ただし、以下の条件を満たす必要があります：

• 📋 ライセンスの写しを含めること
• 📝 コードへの変更を文書化すること
• 📢 配布時にソースコードを提供すること

このプロジェクトは ffmpeg.wasm (LGPL-2.1) を構築しており、ffmpeg.wasm は FFmpeg (LGPL-2.1+) から構築されています。