AWS+Video.jsでお手軽ストリーミング動画配信 #AWS

以下のサービス・ライブラリを利用してHLSでお手軽ストリーミング配信できたので、やったことをメモしておく。

AWS S3：動画をHLS配信しVideo.jsで閲覧できるように
Amazon Elastic Transcoder：動画のHLS変換
Video.js：safari以外のブラウザでHLSを再生できるように

S3準備

以下のようなバケットポリシーのバケット作成

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::[バケット名]/*",
                "arn:aws:s3:::[バケット名]/js/*",
                "arn:aws:s3:::[バケット名]/css/*",
                "arn:aws:s3:::[バケット名]/css/font/*"
            ],
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "[アクセス許可するCIDR]"
                }
            }
        }
    ]

動画ファイルをバケットに配置

Amazon Elastic TranscoderでHLS変換

以下の記事を参照し、入出力先は作成したバケットを指定して以下のようなジョブを実行。
[HTML5] Amazon Elastic Transcoder で変換した HLS（HTTPライブストリーミング）形式の動画を video タグで再生する｜ Developers.IO

Input Key：配置した動画ファイル
Output Key Prefix：hls_sample/
Preset：System Preset HLS 400K
Segment Duration: 10
Output Key：hls_400k_
他はデフォルト値

video.js配置

以下の記事を参照してvideo.jsを作成したバケットに配置

video.js で m3u8 形式の動画ファイルをブラウザで再生する - Hack Your Design!
Video.js を使って HLS形式の動画をストリーミング再生する - akiyoko blog

以下の3つのライブラリをダウンロード

バケットに以下のように配置(精査してないので不要なものがありそう)

.
├── [動画ファイル]
├── hls_sample/
│   ├── hls_400k_.m3u8
│   ├── hls_400k_00000.ts
│   ...
├── index.html
├── css
│   ├── video-js.min.css
│   └── font
│       └── VideoJS.*
└── js
    ├── video.min.js
    ├── videojs-contrib-hls.min.js
    └── videojs-contrib-media-sources.min.js

index.htmlは以下のような内容にした(試行錯誤したので不要な設定ありそう)

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <link href="css/video-js.min.css" rel="stylesheet">
  <script src="js/video.min.js"></script>
  <script src="js/videojs-contrib-media-sources.min.js"></script>
  <script src="js/videojs-contrib-hls.min.js"></script>
</head>
<body>
<video id="test" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360" data-setup="{}">
  <source src="hls_sample/hls_400k_.m3u8" type="application/x-mpegURL">
</video>
  <script type="text/javascript">

var player = videojs("test", {html5: {
  hls: {
    withCredentials: true
  }
},
flash: {
  hls: {
    withCredentials: true
  }
}});
  player.play();

  </script>
</body>
</html>

動画閲覧

https://[バケット名].s3.amazonaws.com/index.htmlにアクセスして動画閲覧