AWSで動画配信(オンデマンド配信)をするための手順 #AWS

WEBサイトに動画を埋め込む必要があり、実際にやってみたのでその備忘録になります。

対象者

自分のWEBサイトに動画を埋め込みたい方
WEBサーバー内に動画を置きたくない場合

やること

Youtubeのよう好きなタイミングで動画を視聴できるオンデマンド配信
自サイトからS3の動画ファイルを読み込み、再生

やらないこと

生放送のようなリアルタイムのライブ配信
動画の自動変換

構成

ユーザー目線で行くと、WEBサイトを経由してCloudFrontを介し、動画ファイルを閲覧する流れになります。
また、AWS内では動画をS3に動画をアップロードし、ElementalMediaConvertにて動画を変換します。
各詳細については後述。

料金

この構成だと若干料金がかかります。動画サイズは小さめのものにしておきましょう。

手順

S3バケット作成

特に細かい設定はいまのところありません。バケット名を入力して作成してください。
作成後、動画格納用にinputフォルダとoutputフォルダを作成しておきます。

CloudFront作成

バケットの作成後はCloudFrontを設定していきます。
CloudFrontの画面へ行き、「Create Distribution」をクリックします。

そして「Get Started」をクリックしてください。

Origin Domain Namen：先ほど作成したS3のバケットを選択
Restrict Bucket Access：Yes
Origin Access Identity：Create a New Identity
Grant Read Permissions on Bucket：Yes, Update Bucket Policy
Viewer Protocol Policy：Redirect HTTP to HTTPS

上記以外はデフォルトのままで大丈夫です。

Statusが「In Progress」になっていれば大丈夫です。また、S3にバケットポリシーが付与されていることを確認してください。

動画ファイル(HLS)の作成

次に、動画をHLSファイルを生成します。
HLSについてはV-CUBEさんの記事がわかりやすいです。
ザックリ言うと、HTTPストリーミング配信を行うためのファイル群です。

こちらをAWS Elemental Media Convertを使用して作成していきます。

まずは動画をS3に配置します。S3バケットのinputディレクトリに動画ファイルをアップロードしてください。動画サイズは軽い方が低コストです。

AWS Elemental MediaConvertの画面でジョブメニューを開き、ジョブの作成をクリックします。

入力1の入力ファイルURLには先ほどアップロードした動画ファイルのS3 URLを入力します。

左メニューの出力グループ右側にある追加ボタンをクリックします。すると、上の用がポップが出てくるのでApple HLSにチェックを入れてSelectをクリックしてください。

送信先にはmovie-outフォルダを選択します。

出力グループ内にあるH.264～と書いてある箇所を選択します。そして、名前修飾子の箇所に任意の名前を入力してください。返還後ファイルの最後に付与されます。

そしてビットレートを入力してください。今回は元の動画が467kbpsだったため500kbpsになるように設定しました。
動画ファイルのプロパティから参照できると思います。

ジョブの設定から設定メニューを開きます。その中からS3のバケットにアクセス権限のあるIAMロールを選択してください。

作成ボタンを押すとジョブの概要が出てきます。しばらく待つとS3に動画ファイルが生成されます。

Video.jsで動画再生

外部サーバーから動画を埋め込むことを想定したHTMLファイルを作成します。
また、動画を再生するためVideo.jsを使用します。以下のコードをコピーしてindex.htmlファイルとしてローカルに保存してください。

index.html

<html>
  <head>
    <title>VHS de HLS</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
  </head>
  <body>
    <video-js id=example-video width=1280 height=720 class="vjs-default-skin" controls>
      <source
         src="CloudFrontのURL/m3u8ファイルのS3パス"
         type="application/x-mpegURL">
    </video-js>
    <script src="https://vjs.zencdn.net/7.4.1/video.js"></script>
    <script>
      var player = videojs('example-video');
    </script>
  </body>
</html>

sourceのsrcは書き換えてください。また、m3u8ファイルはElemental MediaConvertにて名前修飾子を付与したファイルを指定してください。

例

https://xxxxxxxxxxxx.cloudfront.net/movie-out/ファイル名test.m3u8

CORSの設定

先ほど作成したindex.htmlファイルを開いてみると、うまく動画が読み込めないと思います。Chromeの場合、F12を押してデベロッパーツールを開き確認して見ましょう。

Access to XMLHttpRequest at 'URL' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
と出力されています。これは、CORS設定をしていないため出てくるエラーです。
なので、S3にCORS設定を行います。

以下をCORSに設定してください。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

もしも自分のサービスなどで使用する際にはAllowedOriginにはサイトのドメインを指定してください。
保存を押して再度index.htmlを確認してみます。

かわいいですね。

最後に

AWSのマネージドを使用することで動画をHTTP通信用に変換し、S3を動画サーバーとして構築することができました。
さらに、閲覧制限をかけるなどのことを今後はやっていきたいと思います。