文字スクロール動画ジェネレーターというのを作った。
別のプロジェクトでffmpeg.wasmを使ってて面白かったので、もうちょっとわかりやすい応用を作ってみようという感じ。
Twitter はほぼそのまま再生されるけど、 Bluesky だとフレームレートが低くなっちゃうっぽい?
https://t.co/cekOpmGBTd pic.twitter.com/afsMpJ6StQ
— ショ糖 (@cho45) July 15, 2025
MediaRecorder vs ffmpeg.wasm
このジェネレータでは使ってないが、MediaRecorderというブラウザでcanvasを録画する標準機能がある。面白い機能なんだけどいくつか問題がある
- 出力フォーマットがブラウザ依存かつ限られる
- Chrome だと vp9+webm とか
- ダウンロードして編集ソフトに持っていくと読みこめなかったりする
- フレームレート可変になる
- これもブラウザ依存だけど、canvas の dirty さを監視してて dirty なフレームしか記録しないようだ
- ダウンロードして編集ソフトに持っていくと読みこめなかったりする
- リアルタイムでしか収録できない
- n秒録画するためにはn秒レンダリングして待つ必要がある
- 尻切れ
- なんかよくわからないが stop() したタイミングでうまく canvas を読んでくれない? みたい
ということで面白いけど使いにくい機能になっている。
「ダウンロードして編集ソフトに持っていくと読みこめなかったりする」を解決するために、MediaRecorder で録画したファイルを ffmpeg.wasm に読みこませてトランスコードする、という方針をとったりしていたけど、だったら直接 ffmpeg.wasm にフレーム画像全部渡せばいいとなり、MediaRecorder を使うのをやめてしまった。
MediaRecorder の使い道はストリーミングとかなんだろう。
