16
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HLS動画ストリームの確認方法

Last updated at Posted at 2018-08-30

streampack の田中です。

動画サービスを提供している場合、下記のような配信ストリームをブラウザにて確認するケースがあるかと思います。(再生に影響があった場合によく見ます。)

  • 配信形式 (mpeg-dash, HLS, progressive download)
  • ストリームの数
  • どのストリーム(ビットレート)を参照しているか - 動画の品質確認

今回は配信の定番で使用されている HLS でのストリームの確認方法です。

デベロッパーツールへアクセス

Chrome の場合

右上のアイコン -> その他のツール -> デベロッパーツール
または ツールバー[表示] -> 開発 / 管理 -> デベロッパーツール

Safari の場合

ツールバー[開発] -> ウェブインスペクタを表示

Firefox

ツールバー[ツール] -> ウェブ開発 -> 開発ツールを表示

Windows Edge

右上の設定アイコン -> デベロッパーツール

ストリームの詳細分析

まずは、[Network] -> 検索フィルターで '.m3u8' と絞りこみすると、下記のような結果になります。

m3u8.png

HLSの場合は m3u8 というマニフェストファイル、プレイリストファイルを参照します。
マニフェストファイルはストリームの本数、ビットレート情報(Bandwidth)、サイズ(Resolution)などが記載されています。
プレイリストファイルは分割されたファイルの順序を定義しているファイルです。(ここでは詳細は割愛)

下記はそれぞれの ts ファイルと呼ばれる動画の分割されたファイル(チャンクファイル)を取得した際のリクエストの履歴です。見やすいように '.ts' でフィルターしてます。

【ServerlessConf_Tokyo】Building_Serverless_Machine_Learning_Models_in_the_Cloud_by_Alex_Casalboni_-_Cloud_Academy___cloudpack公式チャンネル.png

それぞれ提供しているサービスの URL によって異なりますが、streampack では 3,4 本のストリームを提供してます。

  • 400k - 480x270
  • 1000k(1M) - 960x540
  • 2000k(2M) - 1280x720

あとはプレイヤー側が非同期で下記の条件によって、ストリームを定期的に取得し動画を再生します。

  • ネットワークの帯域
  • プレイヤーのサイズ
  • CPUなどの負荷

上記の添付画像にある右側のデベロッパーツールの結果を見る限りでは、

  1. 最初は sd_1000k のサイズのストリームを取得している
  2. 6番目の ts からネットワークの帯域などの影響により sd_400k を取得。つまり映像品質が悪くなる
  3. その後にhd_2000k を取得し続けて、より良い品質の動画が提供されている

という流れが確認できます。

最近の動画サイトは HLS/mpeg-dash で提供されているものがほとんどですので、
このサイトでは、このビットレートを準備しているんだとか、
回線が悪い環境のために映像ではなく Audio のストリームの提供してたりなど、
一度デベロッパーツールで見て見ると何か新たな発見があるかもしれません。

16
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?