AWS Elemental MediaConvert で動画変換

虎の穴虎の穴虎の穴虎の穴虎の穴虎の穴
Copyright (C) 2019 Toranoana Inc. All Rights Reserved.
AWS Elemental MediaConvert
で動画変換
虎の穴ラボ株式会社
西志村友基
【とらのあな主催】オタクが最新技術を追うライトニングトークイベント10回目 in 秋葉原
2019/11/27

自己紹介
名前：西志村友基
（ニシシムラトモキ）
入社：2018年4月
好きなアニメ：きんいろモザイク
2

目次
• 同人×動画
• 動画配信について
• ストリーミングについて
• AWS Elemental MediaConvert とは
• 使ってみる
• まとめ
3

同人×動画
• 同人≠漫画
• ゲーム、コスプレ、アニメ、3Dなど
のコンテンツを作っているサークルは
動画でアピールしたいはず
→静止画ではいまいち伝わらない
• Webカタログなら動画再生できる！
（動くサークルカットとか）
4

動画配信サービスの
形式
• ダウンロード再生
– ダウンロードに時間がかかる
– ストレージを圧迫
– ファイルが��バイスに残る
• ストリーミング再生
– 細切れでダウンロード
→待ち時間が少ない
– ストレージ不要
– ネット環境が必要 5

ストリーミングに
は変換が必要
6
XXXX.mp4
OOOO.mov
など
XXXX.m3u8
OOOO.ts
など
特定のルールにしたがって
なんやかんやして変換する
動画ファイル配信形式
高い知識・技術が
必要

ストリーミング再
生のプロトコル
ストリーミング配信のためのルール
• HTTP Live Streaming (HLS)
→使えるブラウザが多い
• MPEG-DASH
• RTSP (Real Time Streaming Protocol)
など
7

AWS Elemental
MediaConvert とは
• 動画ファイルをストリーミング再生に
必要な形式になんやかんやして変換し
てくれるサービス
• おまけにキャプチャー（サムネイル画
像）も作ってくれる
8

料金
• 出力のフレームレートや解像度によっ
て異なる
• 分刻みで料金が発生(最小再生時間:1
秒)
30fps,HDの場合：0.017USD/分
https://aws.amazon.com/jp/mediaconvert
/pricing/ 9

使ってみる
10
以下のようなシステム構成でサーバーレスな動画サイト
を作成してみます

前提
• 動画ファイルを入力・出力するS3バケ
ットを作成する
• MediaConvertを利用できるIAMロール
を作成する
11

Elemental MediaConvert
の設定
やることは以下の２つ
• ジョブテンプレート作成
• ジョブテンプレートからジョブを作成
12

ジョブテンプレー
ト作成
• 一般設定（テンプレート名など）
• 入力（今回はデフォルト）
• 出力グループ
13

出力グループ
名前修飾子(変換ファイル名の末尾)：_hls
配信プロトコル：HLS
エンコード設定
ビデオコーデック：H.264
解像度：1280 x 720
フレームレート：30fps
ビットレート：5,000,000bps
14

設定例(出力)
15

ジョブテンプレート
からジョブを作成
• 作成したジョブテンプレートを選択し、
ジョブを作成する
• 入力のS3バケットと動画ファイルを指
定する。
• 出力先のS3バケットを指定する。
• IAMロールを設定
16

設定例（入力）
17

実行結果
サムネイルとm3u8+tsファイル
18

動画をWebサイト
に表示する
• Video.jsというライブラリを利用する
（HLSをSafari以外で再生するため）
• CloudFrontで配信した動画をHTMLで
表示する
• HTMLファイルはS3に配置し、静的ウ
ェブサイトホスティング
19

フロント側
<!DOCTYPE html>
<html>
<head>
<title>HTTP Live Streaming Example</title>
<link href="https://vjs.zencdn.net/7.6.6/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.6.6/video.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="https://[CloudFrontのURL]/test_hls.m3u8" type="application/x-
mpegURL">
</video>
</body>
</html>
20

動作確認
※Webブラウザで動画を再生
してみます。
21

まとめ
• MediaConvertで、動画についてよく知
らなくても変換処理が簡単にできる
• 次はLambdaなどと組み合わせてアッ
プロードされるたびに自動変換される
ようにする予定
• 動画を極めて、動くWebカタログを作
る！ 22

AWS Elemental MediaConvert で動画変換

More Related Content

AWS Elemental MediaConvert で動画変換