【Media系】AWSだけでHLSのVOD配信をしてみた(ABRに対応)
1. 目次
1. 目次2. 環境説明2.1. 使用するAWSサービス一覧2.2. 使用する動画コンテンツ2.3. 使用するブラウザー3. S3の準備4. CloudFrontの準備4.1. CloudFront 作成手順5. Amazon Elastic Transcoder の準備5.1. Pipelines 作成手順5.2. 単一出力 Jobs 作成手順6. ABR出力 Jobs 作成手順7. 最後に
2. 環境説明
2.1. 使用するAWSサービス一覧
- Amazon Elastic Transcoder
- Amazon S3
- Amazon CloudFront
2.2. 使用する動画コンテンツ
2.3. 使用するブラウザー
- Safari
- Microsoft Edge
3. S3の準備
作成したS3バケットは以下の通り
| バケット名 | リージョン | 用途 | 備考 |
|---|---|---|---|
| vod-input-01 | アジアパシフィック(東京) | 元動画のアップロード用 | |
| vod-output-01 | アジアパシフィック(東京) | ETS出力用 | 設定は特に不要 |
- vod-input-01
- 事前に使用する動画コンテンツをアップロード
- output-01
- フォルダ作成を作成
| バケット名 | フォルダ名 |
|---|---|
| vod-output-v01 | outpu-01 |
4. CloudFrontの準備
作成したCloudFrontは以下の通り
| Domain Name | Origin名 |
|---|---|
| vod-test.cloudfront.net | vod-output-01.s3.amazonaws.com |
4.1. CloudFront 作成手順
Origin Settings 編
| 項目 | 設定内容 |
|---|---|
| Origin Domain Name | vod-output-01.s3.amazonaws.com |
| Origin ID | S3-vod-output-0 |
| Restrict Bucket Access | Yes |
| Origin Access Identity | Create a New Identity |
| Grant Read Permissions on Bucket | Yes, Update Bucket Policy |
Default Cache Behavior Settings 編
| 項目 | 設定内容 | 備考 |
|---|---|---|
| Viewer Protocol Policy | HTTPS Only | アクセスをHTTPS限定にする |
CloudFront Private Content Getting Started と表示されたら作成成功で､デプロイ中です｡約15分程掛かる場合があります｡
5. Amazon Elastic Transcoder の準備
5.1. Pipelines 作成手順
Create New Pipeline 編
| 項目 | 設定内容 |
|---|---|
| Pipeline Name | vod-pipeline-test |
| Input Bucket | vod-input-01 |
Configuration for S3 Bucket for Transcoded Files and Playlists 編
| 項目 | 設定内容 |
|---|---|
| Bucket | vod-output-01 |
Configuration for S3 Bucket for Thumbnails 編
| 項目 | 設定内容 |
|---|---|
| Bucket | vod-output-01 |
5.2. 単一出力 Jobs 作成手順
Create a New Transcoding Job 編
| 項目 | 設定内容 |
|---|---|
| Pipeline | vod-pipeline-test |
| Output Key Prefix | output-01/ |
Input Details (1 of 1) 編
| 項目 | 設定内容 |
|---|---|
| Input Key | bbb_sunflower_1080p_30fps.mp4 |
Output Details (1 of 1) 編
| 項目 | 設定内容 | 備考 |
|---|---|---|
| Preset | System preset: HLS 2M | |
| Segment Duration | 10 | 任意の範囲は 1～60 秒 |
| OutPut Key | vov_test |
Job Status が Complete になったら出力成功です｡
S3に行き、確認してみると出力されているかと思います。
本当に見れるかSafariやEdgeまたはiphoneで確認してみよう｡
https://vod-test.cloudfront.net/output-01/vod_test.m3u8 作成した cloudfront の Domain Name に置き換えてください｡
6. ABR出力 Jobs 作成手順
今回は Rotation の設定を行っています､理由としては､画面の回転度で現在使用しているプレイリストの確認をしやすくする為です｡
Create a New Transcoding Job 編
| 項目 | 設定内容 | 備考 |
|---|---|---|
| Pipeline | vod-pipeline-test | |
| Output Key Prefix | output-02/ | 事前にフォルダを作成 |
Input Details (1 of 1) 編
| 項目 | 設定内容 |
|---|---|
| Input Key | bbb_sunflower_1080p_30fps.mp4 |
Output Details (1 of 3) 編
| 項目 | 設定内容 | 備考 |
|---|---|---|
| Preset | System preset: HLS 2M | |
| Segment Duration | 10 | 任意の範囲は 1～60 秒 |
| OutPut Key | high_mid/high | 自動でフォルダを作成後その中に出力をしてくれる |
| Output Rotation (Clockwise) | auto | 任意 |
Output Details (2 of 3) 編
| 項目 | 設定内容 | 備考 |
|---|---|---|
| Preset | System preset: HLS 1M | |
| Segment Duration | 10 | 任意の範囲は 1～60 秒 |
| OutPut Key | mid_dir/mid | 自動でフォルダを作成後その中に出力をしてくれる |
| Output Rotation (Clockwise) | 90 | 任意 |
Output Details (3 of 3) 編
| 項目 | 設定内容 | 備考 |
|---|---|---|
| Preset | System preset: HLS 400k | |
| Segment Duration | 10 | 任意の範囲は 1～60 秒 |
| OutPut Key | low_dir/low | 自動でフォルダを作成後その中に出力をしてくれる |
| Output Rotation (Clockwise) | 180 | 任意 |
Playlist (1 of 1) 編
| 項目 | 設定内容 |
|---|---|
| Master Playlist Name | master |
| Playlist Format | HLSv3 |
| Outputs in Master Playlist | high_dir/high |
| Outputs in Master Playlist | mid_dir/mid |
| Outputs in Master Playlist | low_dir/low |
Job Status が Complete になったら出力成功です｡S3に行き、確認してみると出力されているかと思います。
本当に見れるかSafariやEdgeまたはiphoneで確認してみよう｡
https://vod-test.cloudfront.net/output-02/master.m3u8 作成した CloudFront の Domain Name に置き換えてください｡
low の180度バージョン
high の0度バージョン
以上で AWS だけで VOD 配信をしてみたでした｡
7. 最後に
個人のドメインで配信などを行いたい際は､CloudFrontのDomainNameをRoute53などに登録すると出来ます｡
使わなくなった S3 や CloudFront などは削除しましょう｡