福野泰介の一日一創

気軽に作成できるようになった動画、より汎用的に使えるスクリーンレコーダーを作りました。
弾幕の動画化には、「h264-mp4-encoder.es」を使った「mp4-capture-canvas」を使いましたが、web標準で動画エンコードする方法もあります。 ただしmacでは、mp4にエンコードできるのはSafariだけ、ChromeやFirefoxではwebm形式になります。

「画面録画アプリ」(src on GitHub)
下ごしらえに、ffmpegのWebAssembly版、ffmpeg.wasmの配布ファイルの末尾に2行足してESモジュール化して、再配布するffmpeg.es.jsを作成。 Screen Capture APIを使って、キャプチャーデータをmp4に変換すればできあがり！そのままブログやTwitter、Facebookでシェアできます！（現状、ffmpeg.wasmの都合でSafariでは動きません）

この動画はスクリーンレコーダーアプリを開いて画面全体を選択して録画状態にした上に、もう1つのスクリーンレコーダーアプリを起動してデモを撮影しています。38秒でファイルサイズは500KB程度。気軽に扱えるサイズ感です。

オープンソースを使ってやりたいこと何でもすぐにできちゃいますね！
プログラミングで動画いじりしたい高専生や学生へ、jigインターンオススメです！