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

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

## 対象者

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

### やること

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

### やらないこと

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

## 構成

![Untitled Diagram (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/0d9ce89f-91aa-c8bd-f6ea-a66447411f7b.png)

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

## 料金

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

## 手順

### S3バケット作成

![screenshot_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/5567d913-af40-cf25-422a-f9c6b03493ac.png)

特に細かい設定はいまのところありません。バケット名を入力して作成してください。
作成後、動画格納用にinputフォルダとoutputフォルダを作成しておきます。
![screenshot_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/9c8bd95c-edd5-6721-2fa1-bbe7b97c04c6.png)


### CloudFront作成

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

![screenshot_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/51188db0-1d7d-d6af-a7e5-c8c90d31a4a3.png)
そして「Get Started」をクリックしてください。

![screenshot_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/0b6a641c-b79a-6f9b-be57-bdc078f91f44.png)
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

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

![screenshot_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/caa6e8a4-3c78-068e-0acc-42ea7efec259.png)
Statusが「In Progress」になっていれば大丈夫です。また、S3にバケットポリシーが付与されていることを確認してください。

![screenshot_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/b18bc234-4775-5791-85f0-d21ca53704e6.png)

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

次に、動画をHLSファイルを生成します。
HLSについては[V-CUBEさんの記事](https://jp.vcube.com/sdk/blog/hls-http-live-streaming.html)がわかりやすいです。
ザックリ言うと、HTTPストリーミング配信を行うためのファイル群です。

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

![screenshot_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/67b2b812-1a8e-a35d-26cb-bf5ea0b8aae9.png)
まずは動画をS3に配置します。S3バケットのinputディレクトリに動画ファイルをアップロードしてください。**動画サイズは軽い方が低コストです。**

![screenshot_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/6db924af-f681-11ba-65db-189c78c0bce4.png)
AWS Elemental MediaConvertの画面でジョブメニューを開き、ジョブの作成をクリックします。

![screenshot_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/9d0e1919-7174-9f0c-916a-a2649d6d38b4.png)
入力1の入力ファイルURLには先ほどアップロードした動画ファイルのS3 URLを入力します。

![screenshot_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/06796195-dee3-6cbc-74ab-99c7e7f348b3.png)
左メニューの出力グループ右側にある追加ボタンをクリックします。すると、上の用がポップが出てくるのでApple HLSにチェックを入れてSelectをクリックしてください。

![screenshot_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/d54894c7-0625-7d4e-4415-452c807eb76f.png)
送信先にはmovie-outフォルダを選択します。

![screenshot_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/403c1378-068a-cc08-15be-fdc5dd696355.png)
出力グループ内にあるH.264～と書いてある箇所を選択します。そして、名前修飾子の箇所に任意の名前を入力してください。返還後ファイルの最後に付与されます。

![screenshot_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/a1485323-2a0b-a9c1-3817-689a0c9678fb.png)
そしてビットレートを入力してください。今回は元の動画が467kbpsだったため500kbpsになるように設定しました。
動画ファイルのプロパティから参照できると思います。

![screenshot_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/97104cfd-0a3a-25d4-8663-e2cac08ad9d1.png)
ジョブの設定から設定メニューを開きます。その中からS3のバケットにアクセス権限のあるIAMロールを選択してください。

![screenshot_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/10326970-0607-a13f-8a8f-25ae1d20557b.png)
作成ボタンを押すとジョブの概要が出てきます。しばらく待つとS3に動画ファイルが生成されます。

![screenshot_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/8eca83a7-cca2-551b-0f86-aab1d107e5a8.png)

### Video.jsで動画再生

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

```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を押してデベロッパーツールを開き確認して見ましょう。
![screenshot_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/9d7fd4fe-79ba-cb07-272f-351b122faf9c.png)
```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設定を行います。

![screenshot_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/86979146-7928-f2a6-2adf-80a1d5f25ae5.png)
以下を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を確認してみます。
![screenshot_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165191/913af136-5ba1-a0c3-e956-ece0d83b47fc.png)
かわいいですね。

## 最後に

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