Help us understand the problem. What is going on with this article?

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

More than 5 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 でプライベート動画の配信手順の確立

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした