気軽に作成できるようになった動画、より汎用的に使えるスクリーンレコーダーを作りました。
弾幕の動画化には、「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インターンオススメです!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS