手持ちの動画からほぼオフラインでgifアニメを作成する機能を作った

タイトルの通り、手持ちの動画からgifアニメを作成する機能をGIFMAGAZINEに追加した。

• 動画からgif作成

以前、Youtubeからgifアニメを作成する機能をつくったけど、今回はその時とは別のアプローチをとってみた。

以前は、

① youtubeの動画のURLを指定

②切り出す範囲をyoutube apiで操作して選択

③選択した動画情報をサーバー側へ送り、ffmpegで切り出し

④preview用にcanvasに書き込み

⑤再度サーバー側へcanvasをbase64して送り、imagemagickでgif化

っていう手順を採ってた。

これ、すごくまどろっこしい。

でもffmpegjsとか使えば動画の処理はローカルでできるのかもしれないけど、そうすると今度はyoutubeの動画を落としてくるのが難しいということでどのみち壁にぶつかる。

そういうことで仕方なくyoutubeの動画はサーバー側の処理で済ませていた。

つかったことある人は分かると思うけどffmpegとかimagemagickはサーバに結構負荷がかかる。

キューに突っ込んで非同期に処理を溜めててもユーザー体験として”待ち”の時間は変わらない。

フラストレーション。

だけどすでにダウンロードもしくは自主制作した手持ちの動画なら話は別だ。

ローカルPCにすでに落としてある動画ならサーバー側の処理を挟まなくてもgifがつくれるはず。

わざわざyoutubeに動画をアップしてあの機能を使ってgifアニメをつくってる方とかもいると聞いたのでなんとか頑張ってみた。

仕組みとしては、前回画像からgifアニメを作成する際に使用したjsgifというライブラリとcanvasの組み合わせの応用。

手順としては、

①動画をアップロードしvideoタグで操作、ループ

②切り出す範囲を指定

③requestAnimationFrameとdrawImageで指定範囲をcanvasに書き出す

④jsgifでgif化

って感じ。

肝はrequestAnimationFrame。

setIntervalでも似たようなことができるけど、動画の切り出し時に固まる。

この辺のフレームの切り出しタイミングとcanvasへの書き出しタイミングの調整が面倒だった。

このようにしてサーバー側の処理を挟むこと無く動画からgifアニメが作成できるようになったわけだけど、問題もある。

それは、ちゃんと動作するブラウザがPCのchromeとIE10しかしかないこと。

safariもfirefoxもAPI上はちゃんと動作するはずなんだけどな。。。

結構粘ったけど力尽きてしまった。

あとこれは仕方ないところではあるんだけど、各ブラウザのvideoタグの対応動画フォーマットがバラバラなこと。

このせいで、mp4とwebmからしかgifに変換できない。

firefoxが動けばoggとかいけるんだけどなたぶん...。

それはまたあとで頑張ってみる。

といった感じで良いとこも至らないところもあるんだけど、オフラインで動画からgifを手軽に作成できて、サーバー負荷もほぼないという点でそれなりに誰かの役に立つ機能だと思うのでよかったら使ってみて下さい〜。

• 動画からgif作成

では。