読者です 読者をやめる 読者になる 読者になる

サーバーで動画生成するサービスのつくり方

clientwork ffmpeg aws ruby rails

はじめまして。カヤック技術部の杉山です。 主にクライアントワークでサービスを開発しています。

今回は、とある動画生成サイトに関して書きます。

動画生成サイトのサービス内容

ユーザーの撮影した写真と、サイト内でいくつかの選択肢を選ぶと、オリジナルの動画が生成できるサービスです。 画像にはロゴなどの合成が出来、映像作家によるアニメーションと、ミュージシャンによるBGMがつきます。

今回は、サーバーアプリケーションの実装に関して解説してみます。

利用技術

  • Ruby on Rails
  • AWS
  • FFmpeg
  • ImageMagick

主な処理

  • クライアント側から画像を複数枚アップロードし、サーバーへ保存
  • 動画、画像、BGMを合成
  • 動画生成のチューニング

それぞれの内容

クライアント側から画像を複数枚、サーバーへ保存

画像をサーバーへアップロードする前に、ロゴやテキストの合成をフロント側で行っています。

動画、画像、BGMを合成

Amazon SQSを使い、Webサーバーとは分かれた、Workerサーバーでリクエストを受け取り、FFmpegを利用することで、動画を生成しています。

動画を構成する素材として、 背景になる動画、ユーザーの画像、画像に対するフィルター処理、上に重ねる背景透過の動画、BGM があります。 これらを合成して1つの動画を生成するのですが、ブラウザで再生するため最終的にmp4(H.264+aac)にエンコードする必要があります。

動画生成のチューニング

ユーザーは写真をアップロードした後に、動画が出来上がるまでWebサイト上で待機しているため、動画生成時間は少しでも短くする必要があります。 動画処理はどれも時間がかかりますが、部分的に処理を行う、短い動画に対して処理を行う、最後に連結する、というのが高速化のポイントです。

今回行っている流れとしては、

  1. 動画にoverlayする前に、画像としてImageMagickなどで加工する(フィルター処理)
  2. FFmpeg で背景動画、画像、透過動画 を短い動画の状態でoverlay合成
  3. FFmpeg での処理時は、mp4への変換に再エンコードが不要で、連結が高速な、tsファイルとして出力する
  4. tsファイルをまとめて concat し、さらに aac 音声と結合する

さらに、

  • 事前に、素材となる動画・画像のクオリティー・動画の長さ・フレーム数・動画の分割を試行錯誤する
  • 素材の動画は、シンプルなエンコードの方がデコードが高速ではあるが、ファイルサイズが増える
  • 加工するファイルサイズがおおきいと、ディスクのIOがボトルネックになり、処理が遅くなる
  • 事前にtsにする、透過が使いたい場合は、avi(png)にする

これらを考慮していい感じのところを探りました。

さいごに

以上、中身はこんな処理になっていました。

生成時間はサーバー費用に直結するので、動画のクオリティー、演出方法、さらにはユーザー体験や企画にも影響する、なかなか骨の折れる仕事ですね。

こんな仕事が面白そうだと思った人はこちらから! 杉山のブログを読んだと書いてもらえると、筆が進みます。

関連記事

techblog.kayac.com

techblog.kayac.com

触れるミュージックビデオ!? インライン動画再生のはなし

html5 canvas

HTMLファイ部ののびーです。12月ぶりです。 さて今回は、以前にとあるアイドルさんのWebサイトを制作した際に使った、 インライン動画再生 という技術について、その仕組みや使い所を解説していこうと思います。

今回のために作ったデモサイトがこちらになります。ぜひこちらのページもスマホで開きつつ、記事をご覧ください。

https://fnobi.github.io/plays-inline-demo/demo/

続きを読む