Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
90
Help us understand the problem. What is going on with this article?
@mechamogera

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

More than 1 year has passed since last update.

以下のサービス・ライブラリを利用して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にアクセスして動画閲覧

90
Help us understand the problem. What is going on with this article?
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
mechamogera
https://github.com/mechamogera/MyTips/wiki で技術メモを登録してましたが使いやすそうなので引っ越してみました。 保有資格:CSM、EXIN Agile Scrum Foundation、AWS認定ソリューションアーキテクトプロフェッショナル、Ruby技術者認定試験Silver/Gold、SJC-P/SJC-D、ソフトウェア開発技術者、基本情報技術者
jrits
信頼と魅力のある先進のITをもとに、お客様のワークスタイル・イノベーションの実現を目指します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
90
Help us understand the problem. What is going on with this article?