🌊

Cloudflare Stream その１ MP4ファイルのオンデマンド配信

2023/09/05に公開

今日は、簡単に動画配信が行えるCloudflare Streamを用いてMP4ファイルをストリーミング配信します。

ストリーミング配信とは

ストリーイング配信とは、動画配信の１方式です。動画ファイルは一般的に巨大です。これをまとめてクライアントにダウンロードさせることは初期のインターネットでは非常に厳しく動画配信には課題がありました。その問題を解決するために、動画ファイルを細かく分割してファイルを１個ずつダウンロードしながら再生を行う、という手法がストリーミング再生です。色々なプロトコルが存在していますが今一般的に使われているのはこの２つです。
・HLS
・MPEG-DASH

m3u8というマニフェストファイルが存在し、そのファイルの中に細切れになった動画ファイルが順番に並んでいます。動画プレイヤー箱の順番通りにファイルを読み込みながら動画を再生します。
この図はHLS用ですが、MPEG-DASHも似たような仕組みと思ってください。動画本体であるMP4ファイルを上記の配信用に作り変える作業をエンコードと言います。

最近ではこの配信方式をさらに進化させた低遅延配信という技術も使われています。

低遅延配信とは

もう一度先ほどの図を見てみると3つのtsという動画ファイルが含まれています。これは規格上最低３つのファイル（１つのキーフレーム動画と２つの派生動画）を１セットして構成することになっています。仮に１個の動画ファイルが10秒だったとしましょう。３つ１セットは３０秒ですからユーザーがプレイヤーを起動したタイミングでは最大３０秒の遅延が発生します。これはライブ配信では致命的です。このため、さらにこの動画ファイルを小さく千切って配信することで低遅延配信は成立します。
HLSの場合LL-HLS、MEPG-DASHの場合CMAF Chunkなどがそれにあたります。

Cloudflare Stream

Cloudflare StreamはオンデマンドであればMP4ファイル、ライブブ配信であれば標準プロトコルであるRTMPにより動画をアップロードすることで自動でエンコードが行われ、配信が開始されます。動画プレイヤーもCloudflareが自動で準備します。AWSでいうとAmazon IVSに似た仕組みのさらに低価格版と言えますが違いもあります。Amazon IVSはデフォルトでLL-HLSに対応していますがCloudflare Streamは現在開発中です。年内にはリリースが予定されています。一方Cloudflare Streamはキャプションファイルを準備することで自動で字幕をつける機能が用意されています。またCloudflareの場合、WAFなどど機能が統合され、認証付き配信は開発無しで実現可能なことも特徴です。

なおこの機能はCloudflareのプランにかかわらず追加アドオンで利用が可能です。以下の通りかなり料金は安く設定されており、課金単位が配信分単位となっているのも特徴です。

さっそくやってみる

ではやっていきます。まずは適当なMP4ファイルを準備します。手持ちがない場合、こちらのサイトが無料の著作権フリーの動画を配布してくれていますので、感謝しつつダウンロードしておきます。

https://www.home-movie.biz/free_movie.html

マネージメントコンソール左のStreamをクリックします。

先ほどの動画をUploadします。

しばらくするとエンコードが開始されますので、待ちます。

Readyになれば配信準備完了です。
動画ファイルをクリックすると、様々な設定項目がでますが、これは今後の記事で触れていきたいと思います。

Embedのタブをクリックし、HTMLをcopyします。

<div style="position: relative; padding-top: 56.25%;">
  <iframe
    src="https://customer-8d7vafw8vgke2agn.cloudflarestream.com/77a78a73c850ba9e8300e3f69468307c/iframe?poster=https%3A%2F%2Fcustomer-8d7vafw8vgke2agn.cloudflarestream.com%2F77a78a73c850ba9e8300e3f69468307c%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>

このままではHTMLとして認識されないので以下のように少し付け加えます。

<html>
<body>
<div style="position: relative; padding-top: 56.25%;">
  <iframe
    src="https://customer-8d7vafw8vgke2agn.cloudflarestream.com/77a78a73c850ba9e8300e3f69468307c/iframe?poster=https%3A%2F%2Fcustomer-8d7vafw8vgke2agn.cloudflarestream.com%2F77a78a73c850ba9e8300e3f69468307c%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>
</body>
</html>

このhtmlを適当な名前で保存し（拡張子はhtml)ブラウザ開くともう動画配信が開始されます。
めちゃくちゃ簡単なことがわかります。今後複数回にわたってこの機能を色々検証していきます。