AWS S3 + CloudFront で動画ストリーム

#準備
AWSのアカウント
動画ファイル

#S3のバケット

##バケットの作成
今回は、"c2-video-test"というバケットを新規に作成。Tokyoリージョンとした。

##Static Website Hostingの設定
Enable website hosting に変更
Index Document の設定が必要だったので、"index.html"と入力

Endpointは以下のとおり
Endpoint: c2-video-test.s3-website-ap-northeast-1.amazonaws.com

##Permissionの設定
Add bucket Policyをクリックし、

```Permisson
{
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"AddPerm",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::c2-video-test/*"
      ]
    }
  ]
}
```

##ファイルのアップロード

index.html と mp4ファイルをアップロード


#CloudFrontの設定

##Create Distribution
AWSの管理画面から、Create Distributionボタンをクリック
Delivery method を RTMPに設定
RTMP Distribution Settingsの各項目を入力 (Origin Domain Nameのみ。バケットネームを選択するだけ。)

##Domain Name
以下となった
Domain Name: s2ev6wge2z2w04.cloudfront.net


#ここまでの参考サイト
参考URL: http://www.scratchxscratch.com/%E3%81%8A%E3%81%9D%E3%82%89%E3%81%8F%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E8%A6%AA%E5%88%87%E3%81%AAamazoncloudfront%E3%81%A8s3%E3%81%A7%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%9F%E3%83%B3%E3%82%B0/


#動画閲覧ページHTMLの作成

##JavaScript
Video.jsを使う http://www.videojs.com/
他のプロダクトでも使用実績があるので、まずはこれでチャレンジ
今回はCDNから取得する方法とした

##Twitter Bootstrap
CDNから取得するようにしておく

##Video取得URL
rtmp://"Domain Name"/cfx/st/&mp4:"Upload File Name"
今回の場合: rtmp://s2ev6wge2z2w04.cloudfront.net/cfx/st/&mp4:PyConAPACTW2014terada.mp4

**重要**
- /cfx/st を忘れずに
- &mp4: が無いとだめ。<< これはVideo.jsの仕様だと思う。 http://qiita.com/uda922/items/900bd9977d93d77bba19 を参考にした。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>動画ストリーミングのテスト</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <link href="//vjs.zencdn.net/4.6/video-js.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/4.6/video.js"></script>

</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a class="glyphicon glyphicon-home" href="http://www.cmscom.jp">CMScom</a></li>
            </ul>
        </div>
    </div>
</nav>
<header><div class="jumbotron"><h1>動画ストリーミングのテスト</h1></div></header>
<article>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">台湾での発表</h3>
      </div>
      <div class="panel-body">
        <video id="example_video_1" class="video-js vjs-default-skin"
          controls preload="auto" width="640" height="264"
          data-setup='{"example_option":true}'>
         <source src="rtmp://s2ev6wge2z2w04.cloudfront.net/cfx/st/&mp4:PyConAPACTW2014terada.mp4" type='rtmp/mp4' />
         <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video>

      </div>
    </div>
    </article>
<footer>
    <div class="panel panel-default">
      <div class="panel-footer">(c)2014 terapyon</div>
    </div>
</footer>
</body>
</html>
```

#閲覧用テストサイトURL
http://c2-video-test.s3-website-ap-northeast-1.amazonaws.com/


#ログの取得

##バケットの準備

- サイト用 c2-video-test.weblog
- ストリーム用 c2-video-test.streamlog

## サイト用ログの設定

- S3の管理コンソールから、"Properties"を確認
- "Logging"プルダウンで、Enabledにし、TargetBucket:を選択し、Save

## ストリーム用ログの設定

- CloudFrontの管理コンソールから、"RTMP Properties"をEdit
- "Logging" On
- Bucket for Logs で"c2-video-test.streamlog.s3.amazonaws.com"を選択
- Log Prefixを st-logs/ とし、Save

##ログのアーカイブ化

- S3の管理コンソールから、"Properties"を確認
- "Lifecycle"プルダウンで、"Add Rule"をクリック
- Step1: バケット全体にRuleを適用するので、 "Apply the Rule to:"で"Whoie Bucket:xxx"を選択
- Step2: Configure Rule で、"Archive Only" を選択し、"2days"とした
- Step3: Ruleに名前を付けて終了

# iOSでの閲覧

iPhoneやiPadで使われている、iOSでは、RTMPプロトコルに対応していません。
HTTP通信を用いた、HLSでの配信を行う必要があるようです。
AWSのサービスである、Amazon Elastic Transcoderを使ってファイルを変換する方法が紹介されていました。
http://dev.classmethod.jp/references/amazon-elastic-transcoder-hls/
これを参考に対処してみようかと思います。

その他の情報
http://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/AMS5.0EmbeddingLiveStream.html

さらに、Video.jsのほうは、以下のサイトで紹介されていました。
http://techblog.willshouse.com/2013/02/27/videojs-m3u8-example/


#今後の予定

以下の調査を行う予定です。
- iOSでの閲覧対応の実装 -> http://qiita.com/terapyon/items/e4925c15c7ee58778f92
- ワンタイムパスワードでセキュアに動画を配信
  -> http://qiita.com/terapyon/items/ff2dd73bd479fbd44e82
  -> http://qiita.com/terapyon/items/fadecf13ed1d11dcd34d
- CMS (Plone) での表示
- CMS (Plone) からアップロードして管理

# 追記 20140714 #pyhack
iOSでの閲覧に対応する方法を以下に記述
http://qiita.com/terapyon/items/e4925c15c7ee58778f92


# 追記の追記 20140804

このシリーズのエントリーが増えたので、関連するエンリー一覧と簡単な説明を記載します。

- [AWS S3 + CloudFront で動画ストリーム](http://qiita.com/terapyon/items/b77ac981da790662e247)
  本エントリーです。

- [iOS向けにAWS S3 + CloudFrontで動画ストリーム](http://qiita.com/terapyon/items/e4925c15c7ee58778f92)
  iOS向けにHLSに対応させるための設定サンプル

- [AWS CloudFrontでプライベートコンテンツを配信](http://qiita.com/terapyon/items/ff2dd73bd479fbd44e82)
  ワンタイムパスワード(Signed URL)を用いた配信方法の説明とbotoのサンプルコード
  動画(RTMP)での設定方法

- [iOS対応ストリーミングをプライベート(制限付き)に対応](http://qiita.com/terapyon/items/fadecf13ed1d11dcd34d)
  HLSの時にプライベート配信をどのように行えばいいのかをまとめたもの

- [AWSのストリーミング 自動化する為の事前調査](http://qiita.com/terapyon/items/589acd22d1904a1b985b)
  HLSへの対応、サムネイルの取得などを Elastic Transcoder を使って行う


# 著者関連Blog記事

[AWS CloudFront でプライベート動画の配信手順の確立](https://www.cmscom.jp/blog/zijoee)