CloudFront による動画のストリーミング配信

2021年1月2日

はじめに

CloudFront を用いて動画のストリーミング配信 (HLS 配信) を行う方法について。

S3 の準備

1. S3 でバケットを作る。
2. フォルダ "movie-in", "movie-out" などを作る。
3. "movie-in" に動画を入れる。
4. IAM で S3 のバケットにアクセスできるロールを用意しておく。サービスで MediaConvert を選択する。ポリシーは勝手にアタッチされる。"media-convert-s3" など。

movie-out を公開設定にする。

また、バケットの [アクセス権限]-[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>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

CloudFront の準備

1. CloudFront にアクセスし、[Create Distribution] をクリック。[Web] の [Get Started] をクリック。
2. "Origin Domain Name" に S3 のバケットを設定 (バケット名を入れたら候補が出るので、それを選択)。あとはそのままで [Create Distribution]。"Status" が "Deployed" になるまで待つ。
3. [Behaviors] で項目を選択し [Edit] をクリック。
4. "Cache and origin request settings" で "Use legacy cache settings" を選び、"Cache Based on Selected Request Headers" で "Whitelist" を選択。"Whitelist Headers" で "Origin" を [ADD >>] する。
5. [Yes, Edit] をクリック。デプロイを待つ。

MediaConvert の準備

1. MediaConvert にアクセスし、ジョブを作成する。[今すぐ始める]。
2. "入力1" の "入力ファイルURL" に S3 に入れた動画のパスを入れる。
3. "出力グループ" の [追加] をクリック。[Apple HLS] を選択する。
4. "送信先" に S3 の動画出力先 (movie-out) を選択する。[作成] ボタン。
5. "出力" の "名前修飾子" を設定する ("hls" など)。
6. "出力" の "Output1" をクリックするか、左の "Apple HLS" の下にある項目をクリックする。ビットレートを設定する (350000 など)。
7. 左の [ジョブの設定] の [設定] で IAM ロールを設定する。
8. [作成] ボタンを押す。

変換されるのを待つ。終わったら S3 のフォルダにデータが作成される。

動画の配信

video.js を用いる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>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="https://xxxxxxxxxxxxxx.cloudfront.net/movie-out/testhls.m3u8"
         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 のアドレスは、CloudFront の Domain Name を調べる。

特定の人にだけ動画を配信したい場合

HLS が複数のファイルを参照するため、S3 の署名つき URL のような方法は単純には使えないらしい。署名つきクッキーを使うとか。

参考

• CloudFrontとS3を用いたサーバーレスの動画ストリーミング配信 (デーコムラボ)