Adaptive Streamingサンプル


Amazon Elastic Transcoderを使いHLS Adaptive Streamingコンテンツを作成する手順です。

  • 元素材
  • S3準備
    • ファイル置き場として適当な入力および出力Bucketを作成する
      • 例:nowhere-in、nowhere-out
    • 出力用Bucketについては以下のディレクトリを作成する
      • 400K、1M、2M、2K、4K
    • 前記元素材を入力Bucketにコピー
      • aws s3 cp  tearsofsteel_4k.mov s3://nowhere-in
  • Elastic Transcoder設定
    • パイプライン作成
      • パイプライン概要
        • 入出力の定義
      • 変更点
        • Create New Pipeline
          • Pipeline Name:hls test
            • 適当な名前(hls test)
          • Input Bucket:nowhere-in
            • 作成したS3 Bucket名(入力用)
        • Configuration for Amazon S3 Bucket for Transcoded Files and Playlists
          •  Bucket:nowhere-out
            • 作成したS3 Bucket名(出力用)
        • Configuration for Amazon S3 Bucket for Thumbnails
          •  Bucket:nowhere-out
            • 作成したS3 Bucket名(出力用)
    • プリセット作成
      • プリセット概要
        • 実際のトランスコード定義
      • 400K(bps)、1M(bps)、2M(bps)用についてはシステムにプリセットされているものを使用
        • System preset: HLS 400K (400*288)
        • System preset: HLS 1M (640*432)
        • System preset: HLS 2M (1024*768)
      • 2Kおよび4KについてはHLS 2Mをベースに新規作成
        • HLS 4K
          • 変更点(解像度を元素材に合わせる)
            • Bitrate:Auto
            • Max Width: 3840
            • Max Height: 1714
        • HLS 2K
          • 変更点(解像度を元素材の1/4とする)
            • Bitrate:Auto
            • Max Width: 1920
            • Max Height: 858
  • Transcode実行
    • ジョブ生成(2Mのサンプル、他のビットレートも同様に行う)
      • 入力項目
        • Create a New Transcoding Job
          • Pipeline: hls test(作成したpipeline名)
          • Output Key Prefix:2M (出力用Bucketに作成したディレクトリ)
        • Input Details (1 of 1)
          • Input Key:tearsofsteel_4k.mov (入力用Bucketに置いた元ファイル)
        • Output Details (1 of 1)
          • Preset:System Preset: HLS 2M (選択する)
          • Segment Duration:2 (Adaptiveサンプルのため短め設定)
          • Output Key:Tears (TSファイルのファイル名)
        • Watermarks(Watermarkを設定する場合)
          • Preset Watermark ID: TopLeft
          • Input key for Preset Watermark Id TopLeft: 2M.png (watermark用のイメージ)
  • S3からHTTPサーバにファイル転送
    • aws s3 cp –recursive s3://nowhere-out .
  • adaptive Streaming用のm3u8作成
    • all-tears.m3u8
      • #EXTM3U
        #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=400000
        /media/ToS/400K/Tears.m3u8
        #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1000000
        /media/ToS/1M/Tears.m3u8
        #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2000000
        /media/ToS/2M/Tears.m3u8
        #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4000000
        /media/ToS/2K/Tears.m3u8
        #EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=16000000
        /media/ToS/4K/Tears.m3u8
  • サンプルページ
  • CDNキャッシュサーバ設定
    • テスト(再生毎にネットワークからメディアファイルを取得させる)のため、以下のようなキャッシュ動作を/media/以下に設定する:
      • CDNサーバ:キャッシュさせる
      • ブラウザ:キャッシュさせない
    • 設定(CDNextの場合)
      • オリジンサーバ:メディアファイルに対して”cache-control: no-store”を付ける
        • これでブラウザはキャッシュしない
      • CDN設定:cache-controlを無視してキャッシュする設定を入れる(TTL:604800)
  •  動作テスト
    • Windows上ではNetLimiter(https://www.netlimiter.com/)等によりアプリケーションの上限帯域を設定可能
    • 今回のプレイヤー実装では表示Windowsサイズは最初に開いた大きさから変化せず、表示コンテンツのみが変化する
    • ビットレートの確認
      • 各ビットレートを示すWatermark
      • Chrome Developer Tool等で読み込んでいるTSファイルのディレクトリを確認