準備
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をクリックし、
{
"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
ここまでの参考サイト
動画閲覧ページ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 を参考にした。
<!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
ログの取得
バケットの準備
- サイト用 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/
これを参考に対処してみようかと思います。
さらに、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 で動画ストリーム
本エントリーです。iOS向けにAWS S3 + CloudFrontで動画ストリーム
iOS向けにHLSに対応させるための設定サンプルAWS CloudFrontでプライベートコンテンツを配信
ワンタイムパスワード(Signed URL)を用いた配信方法の説明とbotoのサンプルコード
動画(RTMP)での設定方法iOS対応ストリーミングをプライベート(制限付き)に対応
HLSの時にプライベート配信をどのように行えばいいのかをまとめたものAWSのストリーミング 自動化する為の事前調査
HLSへの対応、サムネイルの取得などを Elastic Transcoder を使って行う