186
189

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-07-18

#準備
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

重要

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/

#今後の予定

以下の調査を行う予定です。

追記 20140714 #pyhack

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

追記の追記 20140804

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

著者関連Blog記事

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

186
189
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
186
189

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?