AWS
CloudFront
VideoJS
Stream

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

More than 3 years have passed since last update.


準備

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


ここまでの参考サイト

参考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

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


著者関連Blog記事

AWS CloudFront でプライベート動画の配信手順の確立