ffmpeg.wasmを使ってブラウザ上で画面録画機能を実装した話

CRANK

はじめに少し前までLinuxユーザだったので、Blogに使用するgifアニメを作るときにはffmpegを使っていました。最近Windowsに移行しまして、はてgifアニメを作るにはどうしたらいいのかな？と調べていたのですが、普通にffmpegで作れそうなことがわかりました(参考)。まぁ、結論としてはそうだったのですが、Windowsにいろんなアプリケーションをいれると動作不安定になるし嫌だな(久々にWindowsに戻ってきた人間の偏見です。)と思いまして、少し前にバズってたffmpeg.wasmを使ってブラウザ上でスクリーンを録画する機能でも作ってみるかということになりました。これで変なアプリケーションを入れずに済みそうだ。今回作ったものは、こんな感じのものです。左側でキャプチャ対象のエリアを指定して録画します。右側で録画の結果を表示して、ダウンロードします。余談ですが、Windows10だとWin+Gから録画できるよ、という話も知っています。知っていますが、まぁ、正直なところ今回のブラウザアプリを作った後に知ったので聞かなかったことにしています。だって、全画面録画とか複数ウィンドウ跨ぎで録画でとかできないらしいし。ffmpeg.wasmの使い方ffmpeg.wasmの公式ページ…