Vex: シンプルかつ高速な動画ビルドツール
はじめに
Web技術(HTMLやCSSやJavaScript)でシンプルに動画を生成できるビルドツールを作成したので紹介したいと思います。
開発動機
私は元々Remotionという、Reactで動画を生成できるフレームワークを利用していたのですが、いくつかの点で自分の利用に合っていないなと感じたので、自分で作成をすることにしました。
React以外の技術が使えない
RemotionはもちろんReactベースのフレームワークなので、React以外のVueやSvelte、バニラなどは利用不可です。
これが自分の中の動機で一番大きいですね。
有料ライセンス関係の問題
コマーシャル、いわば営利団体では使えない？などのことが明記されていて、一部有料のプロダクトなんだなと思いました。
今の所団体利用するつもりはありませんが、なんか興醒めしました。
ビルドがかなり遅い...
(これは少し後出しになりますが...)
Remotionのパフォーマンスに関する資料があまりなかったので、実際何回か30fps•25s(750pics)の動画をビルドしてみました。
するとだいたい平均で23sほど時を要しました。
これは遅いですね...
バックでは8台ほど並列実行していたようですが、それでこの遅さ？とは正直思いました。
Remotionの実装について
わかったこととしては、ヘッドレスブラウザとFFmpegを利用している？ことでした。
簡単にいうとヘッドレスブラウザでフレーム分写真撮りまくる→FFmpegで結合！てかんじです。
ここらは予想してたのと一致していたので、そのまま続けることにしました。
ただ、フレームの指定方法や、それの検知などをどのように実装しているか全くわからなかったので、そこら辺は独自実装で行くことにしました。
Vexについて
自分の作ったVexの実装について書こうと思います。
まず、特徴的な内容は以下です。
- (8倍)並列で動作
- ヘッドレスブラウザ+FFmpeg
- Remotionの3倍強のビルドスピード
- ハッシュでいい感じにスクレイピング
(8倍)並列で動作
Goroutineを利用した並列動作で8台並列で動かしています。
8台というのは、Remotionもx8 speedと書いていたのでそれに則ってやりました。
ちなみにこの8台の台数はCLIのフラグで変更可能です。
自分は128台とかも試しましたが、まだまだ最適化の余地はありそうです。
ヘッドレスブラウザ+FFmpeg
これはRemotionとさほど変わりませんが、一度ファイル保存してからFFmpegに通しています。
メモリに負担がかかりにくいからこっちの方がいいかな？と思いましたが、Remotionはどうしているんでしょうか。
そこら辺は模倣してみたいところです。
Remotionの3倍強のビルドスピード
やってることはRemotionとあまり変わりませんが、
30fps•25s(750pics)の動画を生成するのにRemotionでは23s、Vexでは7sとかなりの差が出ています。
JavaScriptとGoの間に差があるのか？とも思いましたが、ここまで変わるのが驚きです。
そもそもGoが並列動作に強いおかげかもしれません。
ハッシュでいい感じにスクレイピング
Remotionのコードを見る気にはなれなかったので、xxx://ooo/ppp#hashの#hashの値をフレーム値に変更することで、いい感じにスクレイピングが可能になりました。
一応ユーザはwindow.addEventListener('hashchange', handle)で操作可能だと思います。
アニメーションとかはフレームに沿ったものになるので、CSSアニメーションは使えないことを留意してください。
一体どんなことができるの？
Remotionをもっと高速かつ拡張可能にしたバージョンです。
バニラ環境で構築したようなものや初心者アプリでも動画にエクスポートできますし、SvelteやVueなどの他のものもビルドできますし、RemixやNext.js、もちろんReactも...本当に全てのフレームワークで動きます。
また、動画のビルド時間も高速なので、長い動画にもおすすめです。
近々実際に何か動画を作ろうと思うので、ぜひご期待ください。
何ができないか
致命的ですが、オーディオの再生が不可能なんです。
これはやばいので現在実装しようと思ってます。
出来次第またご報告いたします。
終わりに
Goで何かを作るのは楽しいということを学びました。
これからもできるだけ高速化するような内容はGoでやろうと思います。
それでは。
Discussion