Amazon Elastic Transcoderで動画をスマホ向けにライブストリーミング配信
Amazonでお急ぎ便予約した商品が、発売日前日の朝に届きました。もろやです。
AWSで柔軟な動画エンコード Elastic Transcoder
オタクとしてもエンジニアとしても、公私共にAmazonさんのお世話になりっぱなしなんですが、今年の頭に発表されたAmazon Elastic Transcoderを使ってみました。
先に、完成形がこちらです。
Elastic Transcoder Test
http://aet-enc-test.s3-website-ap-northeast-1.amazonaws.com
PCで見ても特に何もないですが、スマホで見ると3G回線だと低画質で再生され、そのままWiFi回線を掴むと再生したままスムーズに高画質に切り替わります。
TranscoderはEC2のように利用時間単位ではなく、変換する動画の長さに応じて課金されるんですね。
リーズナブルだから、割と個人でも使いやすそうです。
使い方を簡単に説明すると、S3のbucketに置かれた動画ファイルをTranscoderのPipelineにJobとして投入すると、自動的にエンコードが実行されてS3に書き出されるという感じです。
S3に動画をアップロード
サービスとして構築するときは、EC2のインスタンスで動作しているWebアプリで動画のアップロードを受けてS3に置く形になると思います。
今回はテストなので、S3にテストのBucketを作成して動画をアップロードします。
テストに使わせてもらった動画はこちらです。300MBのMPEG動画となってます。
OPムービーの転載が許可されていたのでお借りしました。
IAM (AWS Identity and Access Management) でRoleを作成
続いて、TranscoderでPipelineを作成するときに必要となるRoleを作ります。
IAM Management Consoleに入って、Create New Roleを選択します。
AWS Service Rolesの中に、Amazon Elastic Transcoderがプリセットとして用意されているので、これを選択してさくっと作成。
ちなみに、RoleはTranscoderがS3にアクセスしてファイルを読み書きするために必要です。
通知用のSNS (Amazon Simple Notification Service) を作成
これはなくてもOKですが、エンコードが開始・完了したときやエラーが発生したときに通知を行うにはAmazon SNSを使うので、メールを送るようなTopicをサクッと作っておきました。
TranscoderにPipelineを作成
まずTranscoderでは、Pipelineというファイルの一連の流れとなる枠を作成します。
その中にJobを投入することでエンコードが実行されます。
さっき作ったS3のBucketをインプット先、アウトプット先、サムネイル書き出し先に指定。
IAM Roleもさっきのものを指定。
なお、この操作にはiam:PassRoleの権限が必要です。
（EC2に権限をアタッチする感じっぽい）
Jobを作成してエンコード！
さて、ではCreate New Jobからエンコードのジョブを作成します！
さて、ここでプリセットから「HLS」というものを選んでいるのですが、これが結構面白いです。
ざっくり説明すると、動画ファイルを10秒ごとの細切れにして、それらを次々にダウンロードしながら継ぎ目なく再生するという形式です。
iOS 3.1以上か、Android 3.0以上で対応しています。
これの面白いところは、利用している回線速度に応じてビットレートの違う動画ファイルを再生することが出来るところです。
つまり、3G回線で動画を再生しているときは低ビットレートだけど、WiFiをつかんだら再生を途切れさせずに高画質の動画に切り替えるということが出来ます。すばらですね。
と、いうわけで。
Segment Durationは細切れにする秒数で、10秒が推奨されています。
今回は400kbpsと2Mbpsの2つのビットレートで動画を書きだしてみます。
続いてPlaylistというものを設定。
これで2つのビットレートの動画を、1つの動画としてプレイヤーに認識させるんですね。
実際、Videoタグを使って再生するときはここで書き出される".m3u8"という拡張子のプレイリストファイルをsrc属性に指定します。
設定が終わったらjobを作成。すぐに動画のエンコードが開始されます。Processingになってますね。
エンコード時間はだいたい、動画の長さの3分の1くらいになります。
エンコード完了
完了すると、こんな感じで細切れになった動画ファイルがBucketに入っています。
これを以下のようなVideoタグを書いたHTMLで開きます。
<video src="/output/magical_charming/magical_charming.m3u8" width="1280" height="720" controls></video>
HLSストリーミングは、今のところPCのブラウザでは対応していないのでスマホかタブレットで開きます。
キターー！
ただ、このままではブラウザで見られないので、普通にMP4にエンコードしたものをBacketに追加してVideoタグを書き換えます。
<video width="1280" height="720" controls> <source src="/output/magical_charming/magical_charming.m3u8" type="application/vnd.apple.mpegurl" /> <source src="/output/magical_charming/mc-720p.mp4" type="video/mp4" /> <p class="warning">Your browser does not support HTML5 video.</p> </video>
これで、HLSに対応していなくても見られますね！
出来たものがこちら。PCで見ても特に何もないですが、スマホで見ると3G回線だと低画質に切り替わるのがわかると思います。
やっぱAWSすごいですね！
