AWS S3 + CloudFront で動画ストリームの続きです。
iPhone や iPad が使用しているiOSでは、RTMPプロトコルに対応をしていないため、簡単には動画ストリームが出来ないようです。
FMS(Flash Media Server)では、動的にiOS向けに、HTTP(S)通信を用いて配信を行ってくれます。
ここではHTTP Live Streaming（HLS）というAppleが提唱した企画を用います。
各サイトに参考情報が出ているのを見ながらまとめて以下の作業をしてみようと思います。
作業内容
- Amazon Elastic Transcoder を用いてiOS用の動画フォーマットに変換
- S3のバケットを２つ準備
- 変換の設定
- 変換後のファイルを再生
- CloudFrontの設定
- HTMLに埋込み
Amazon Elastic Transcoder
S3バケット準備
- 変換前の動画を保存するバケット("c2-video-test-in" とした)
- Lifecycle設定で、１日後に"Permanently Delete"を実施
- 変換後の動画を保存するバケット(既存の "c2-video-test" を使う)
- 変換後の動画を保存するバケット内に "ios" というフォルダを作った
変換の設定
- Create a new Pipelineボタンをクリック
- Create New Pipeline
- Pipelineの名前を設定 (c2-video-test-transcoder)
- Input Bucketの設定 (c2-video-test-in)
- Output Backetの設定 (c2-video-test)
- "Add Permissionをクリックし" 出力されたデータを 「Amazon S3 Group の All Users に open/download の権限を割り当て」
- Thumbnailも同様に設定
- Create New Job
- Input Keyにファイル名を指定
- Output Key Prefixには、フォルダを記述 "ios/"
- Output details
- Preset: System Preset: HLS 400K
- Segment Duration: "10" とした
- Output Key: "hls_400_" とした
- Create Thumbnails: Yes
- Thumbnail Filename Pattern: "thumb"
- Playlist として Output で指定したファイルを指定
- Master Playlist Name: "index"としてみた
参考にしたサイト
ファイルを再生
CloudFrontの設定
HTTP(S)通信用に新規に準備(Create Distribution)
delivery method: Web
Origin Domain Name: S3-c2-video-test
Domain Name: dgk03b4kg3q7d.cloudfront.net
Logging: On
Bucket for Logs: c2-video-test.streamlog
Log Prefix: web-logs/
HTMLに埋込み
Video.jsを用いた設定
index.html(source部分のみ)
<source src="http://dgk03b4kg3q7d.cloudfront.net/ios/hls_400_.m3u8"
type="application/x-mpegURL" />
閲覧用テストサイトURL
前回同様同じURLでiOSからの閲覧も可能になりました。
http://c2-video-test.s3-website-ap-northeast-1.amazonaws.com/
HTMLファイル(全て)
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' />
<source src="http://dgk03b4kg3q7d.cloudfront.net/ios/hls_400_.m3u8"
type="application/x-mpegURL" />
<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>
TODO
- バケットにアップロードされたファイルを順次変換する方法 (後日botoを使って自動的に行う調査を行った http://qiita.com/terapyon/items/589acd22d1904a1b985b)