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

モロ屋

アキバではたらくWebエンジニア。JavaScript / AWS / Mac

Amazon Elastic Transcoderで動画をスマホ向けにライブストリーミング配信

Amazonお急ぎ便予約した商品が、発売日前日の朝に届きました。もろやです。

AWSで柔軟な動画エンコード Elastic Transcoder

オタクとしてもエンジニアとしても、公私共にAmazonさんのお世話になりっぱなしなんですが、今年の頭に発表されたAmazon Elastic Transcoderを使ってみました。

f:id:molov2:20130528210140p:plain

先に、完成形がこちらです。

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を作成して動画をアップロードします。

f:id:molov2:20130528213248p:plain

テストに使わせてもらった動画はこちらです。300MBのMPEG動画となってます。

Magical Charming!


『Magical Charming!』 オープニング・ムービー - YouTube

OPムービーの転載が許可されていたのでお借りしました。

IAM (AWS Identity and Access Management) でRoleを作成

続いて、TranscoderでPipelineを作成するときに必要となるRoleを作ります。

IAM Management Consoleに入って、Create New Roleを選択します。

f:id:molov2:20130528212004p:plain

AWS Service Rolesの中に、Amazon Elastic Transcoderがプリセットとして用意されているので、これを選択してさくっと作成。

ちなみに、RoleはTranscoderがS3にアクセスしてファイルを読み書きするために必要です。

通知用のSNS (Amazon Simple Notification Service) を作成

これはなくてもOKですが、エンコードが開始・完了したときやエラーが発生したときに通知を行うにはAmazon SNSを使うので、メールを送るようなTopicをサクッと作っておきました。

f:id:molov2:20130528212817p:plain

TranscoderにPipelineを作成

まずTranscoderでは、Pipelineというファイルの一連の流れとなる枠を作成します。

f:id:molov2:20130528212329p:plain

Amazon Web Services Blog: The New Amazon Elastic Transcoder

その中にJobを投入することでエンコードが実行されます。

さっき作ったS3のBucketをインプット先、アウトプット先、サムネイル書き出し先に指定。

f:id:molov2:20130528212853p:plain

IAM Roleもさっきのものを指定。

なお、この操作にはiam:PassRoleの権限が必要です。
(EC2に権限をアタッチする感じっぽい)

Jobを作成してエンコード

さて、ではCreate New Jobからエンコードのジョブを作成します!

f:id:molov2:20130528213423p:plain

さて、ここでプリセットから「HLS」というものを選んでいるのですが、これが結構面白いです。

HTTP Live Streaming Resources - Apple Developer

ざっくり説明すると、動画ファイルを10秒ごとの細切れにして、それらを次々にダウンロードしながら継ぎ目なく再生するという形式です。

iOS 3.1以上か、Android 3.0以上で対応しています。

これの面白いところは、利用している回線速度に応じてビットレートの違う動画ファイルを再生することが出来るところです。

つまり、3G回線で動画を再生しているときは低ビットレートだけど、WiFiをつかんだら再生を途切れさせずに高画質の動画に切り替えるということが出来ます。すばらですね。

と、いうわけで。

Segment Durationは細切れにする秒数で、10秒が推奨されています。

今回は400kbpsと2Mbpsの2つのビットレートで動画を書きだしてみます。

続いてPlaylistというものを設定。

f:id:molov2:20130528213810p:plain

これで2つのビットレートの動画を、1つの動画としてプレイヤーに認識させるんですね。

実際、Videoタグを使って再生するときはここで書き出される".m3u8"という拡張子のプレイリストファイルをsrc属性に指定します。

設定が終わったらjobを作成。すぐに動画のエンコードが開始されます。Processingになってますね。

f:id:molov2:20130528214117p:plain

エンコード時間はだいたい、動画の長さの3分の1くらいになります。

エンコード完了

完了すると、こんな感じで細切れになった動画ファイルがBucketに入っています。

f:id:molov2:20130528214451p:plain

これを以下のようなVideoタグを書いたHTMLで開きます。

<video src="/output/magical_charming/magical_charming.m3u8" width="1280" height="720" controls></video>

HLSストリーミングは、今のところPCのブラウザでは対応していないのでスマホタブレットで開きます。

キターー!

f:id:molov2:20130528215422p:plain

ただ、このままではブラウザで見られないので、普通に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回線だと低画質に切り替わるのがわかると思います。

Elastic Transcoder Test

やっぱAWSすごいですね!