💨

Cloudflare Stream その２ Adaptive Bit Rateを試す

2023/09/06に公開

前回の記事を投稿したところ、こんな反応をいただきました。

とうことで早速検証しました。

Adaptive Bit Rate とは

動画配信を行う際に、あらかじめ複数の解像度でエンコードしておきクライアントのプレイヤーが計測したインターネット速度をもとに最適な解像度の画像を出力する技術です。昔はこれを行う場合
１．複数のが解像度サイズでエンコードしておく
２．プレイヤーがクライアントの通信速度を計測する
３．サーバとのやり取りで自動で出力する解像度を変更する
といったかなりの作りこみが必要で、また動画エンコードも時間がかかる作業でした。Cloudflare Streamでは自動で動画取り込み時に複数の解像度のエンコードを行います。またプレイヤーもそれに対応しているため、開発不要で実装できます。便利な時代になりました。

やってみる

まず、管理者画面のEmbedタブから動画配信URLをテスト用に抜き出してコピーしておきます。

https://customer-8d7vafw8vgke2agn.cloudflarestream.com/77a78a73c850ba9e8300e3f69468307c/iframe?poster=https%3A%2F%2Fcustomer-8d7vafw8vgke2agn.cloudflarestream.com%2F77a78a73c850ba9e8300e3f69468307c%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D200

SettingsタブのHLS Manifest URLをブラウザで開いてみます。

#EXTM3U
#EXT-X-VERSION:6
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-STREAM-INF:RESOLUTION=1920x1080,CODECS="avc1.4d4028",BANDWIDTH=3333313,AVERAGE-BANDWIDTH=2588918,SCORE=5.0,FRAME-RATE=29.970
stream_t3070367078b530377e4f9b71d1f8f086_r524661763.m3u8?useMezzanine=false
#EXT-X-STREAM-INF:RESOLUTION=1280x720,CODECS="avc1.4d401f",BANDWIDTH=1179041,AVERAGE-BANDWIDTH=940962,SCORE=4.0,FRAME-RATE=29.970
stream_t3070367078b530377e4f9b71d1f8f086_r524661748.m3u8?useMezzanine=false
#EXT-X-STREAM-INF:RESOLUTION=854x480,CODECS="avc1.4d401f",BANDWIDTH=565804,AVERAGE-BANDWIDTH=463752,SCORE=3.0,FRAME-RATE=29.970
stream_t3070367078b530377e4f9b71d1f8f086_r524661736.m3u8?useMezzanine=false
#EXT-X-STREAM-INF:RESOLUTION=640x360,CODECS="avc1.4d401e",BANDWIDTH=402871,AVERAGE-BANDWIDTH=319094,SCORE=2.0,FRAME-RATE=29.970
stream_t3070367078b530377e4f9b71d1f8f086_r524661730.m3u8?useMezzanine=false
#EXT-X-STREAM-INF:RESOLUTION=426x240,CODECS="avc1.42c015",BANDWIDTH=283189,AVERAGE-BANDWIDTH=226061,SCORE=1.0,FRAME-RATE=29.970
stream_t3070367078b530377e4f9b71d1f8f086_r524661735.m3u8?useMezzanine=false

5つのResolutionで動画が作成されているようです。これが解像度です。BANDWIDTH,AVERAGE-BANDWIDTHに異なる値がセットされています。これが通信速度でその速度に合致した解像度の動画が出力されるようです。BANDWIDTHとAVERAGE-BANDWIDTHの違いはドキュメントに記載がなく良くわかりませんでしたが、おそらく上限と平均の速度２つで最適な解像度を判断しているようです。

ChromeのデベロッパーツールでNetworkタブを開きます。その状態で動画を再生してみると、複数のmp4ファイル(seg_1 から seg_4)までが連続して読み込まれていることがわかります。これが前回の記事で触れた、分割された動画ファイルです。

URLを見てみると以下のようになっています。

https://customer-8d7vafw8vgke2agn.cloudflarestream.com/77a78a73c850ba9e8300e3f69468307c/video/1080/seg_3.mp4?<snip>

これは1080pの解像度の動画が出力された、という意味です。
ではここで通信速度を遅くしてみます。（面倒な場合は、動画表示用左画面を小さくしてみて下さい。通信速度だけではなく、画面サイズでも勝手に低い解像度の画像に切り替わります）
画面上にあるこのボタンを押します。

Disable Cacheを有効にしてSlow 3Gを選びます。

再度動画を読み込みます。
今度は解像度が240pになっていることがわかります。

https://customer-8d7vafw8vgke2agn.cloudflarestream.com/77a78a73c850ba9e8300e3f69468307c/video/240/seg_1.mp4?<snip>

Adaptive Bit Rate とは

やってみる

Discussion