[clip-cast · ffmpeg.wasm on-device]

動画を、
ブラウザだけ
切り抜く。

FFmpeg をそのまま WebAssembly で動かして、動画をアップロードせずにトリミング。 タイムラインの両端ハンドルで範囲を決めたら、ストリームコピーで一瞬で書き出します。 mp4 / mov / webm / m4v / mkv に対応。

on-device ffmpeg.wasm stream-copy fast path

[ ./how_it_works ]

仕組み。

step / 01

動画を渡す

mp4 / mov / webm / mkv などをドロップ。動画ファイルは一切サーバーに送られず、ブラウザ内の FFmpeg.wasm に直接渡される。

step / 02

タイムラインで切り出す

両端のハンドルをドラッグして start / end を決める。0.1秒単位の微調整ボタンも用意。再生バーで内容を確認しながら範囲を絞る。

step / 03

書き出してダウンロード

FFmpeg がストリームコピーで瞬時にトリミング。再エンコードが必要な時だけ自動で切り替わる。完了したらそのままダウンロード。

[ ./faq ]

よくある質問。

本当に動画はサーバーに送られないのですか?+

送られません。 ClipCast は @ffmpeg/ffmpeg (WebAssembly 版 FFmpeg) を ブラウザ内で動かしているだけです。動画ファイルが私たちのサーバーに届くことはありません。 (初回のみ unpkg から FFmpeg コアファイルを取得します。これは FFmpeg 本体のダウンロードで、あなたの動画ではありません)

どのくらいの長さまで使えますか?+

短尺 (1〜5 分) を推奨。シングルスレッドのFFmpeg.wasm はブラウザのメモリ上で全フレームを扱うため、長尺になるほどクラッシュリスクが上がります。1080p で 1 〜 2 分が安心です。

再エンコードされてしまいますか?+

基本的には再エンコードなしのストリームコピー (`-c copy`) で出します。これだとほぼ一瞬で、画質劣化もありません。ストリームコピーが失敗するファイル (タイムスタンプ問題など) では、自動的に H.264/AAC (mp4) または VP9/Opus (webm) で再エンコードします。

対応形式は?+

ブラウザの video タグが読める形式 (mp4 / mov / webm / m4v / mkv / avi など)。出力は mp4 または webm を選べます (`auto` 指定時は入力に合わせます)。

なぜブラウザだけにこだわるのですか?+

動画は重く、プライバシー的に外に出したくないものが多いからです。撮影直後の素材、子供の動画、社内研修の録画、面接動画。これらをアップロードしないと切れない、というのは正しい設計ではありません。FFmpeg.wasm が動く今、これをブラウザだけで完結させるのが筋です。

[ ./journal ]

開発ログ。

ClipCast

ClipCast ができるまで — FFmpeg.wasm をブラウザで動かして動画をトリミングするまでの設計

FFmpeg.wasm をブラウザ内で動かし、動画を一切アップロードせずにトリミングできるWebサービスの設計記録。シングルスレッド core の選択、UX上の工夫、エンコード設計を解説します。

read log →

all_entries →

← back to ai-lab.org