概要

GCS に HTML ファイル、動画ファイルを配置し、それをクライアントから観れるようにします。
一応ありがちな Cloud CDN を経由するパターンにします。GCS の組み込みキャッシュも効きますが、ここは Cloud CDN で。
ちなみに 2024/02/23 現在 Media CDN は Google にリクエストしないと使えず、U-NEXT が本気で使っている代物で大衆化されてなさそうなので使ってません。

環境

Windows 11 Pro
Ubuntu 22.04 on WSL2
Python 3.10.7

やり方

Python を使うので必要な人は適当なディレクトリを掘って pyenv で local にバージョンを指定してください。以下は一例。

mkdir hls-poc && cd hls-poc
pyenv install 3.10.7
pyenv local 3.10.7

$ cat .python-version
3.10.7

ffmpeg をインストールする

sudo apt -y update
sudo apt install ffmpeg

動画ファイルを取得する

ファイルが入り乱れるのでフォルダ内で作業します。

mkdir resource && cd resource
wget https://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_720p_h264.mov
MOV=big_buck_bunny_720p_h264.mov

Big Buck Bunny(BBB) という動画が公開されています。感謝。ライセンスはご確認を。

ffmpeg でマニフェストとセグメントファイルを作成する

ffmpeg -i $MOV \
-c:v copy -c:a copy \
-f hls \
-hls_time 9 \
-hls_playlist_type vod \
-hls_segment_type fmp4 \
-hls_fmp4_init_filename "init.mp4" \
-hls_segment_filename "seg.%3d.mp4" \
media.m3u8

こんな感じに。元の mov ファイルは削除して大丈夫です。

$ ls
init.mp4     seg.003.mp4  seg.008.mp4  seg.013.mp4  seg.018.mp4  seg.023.mp4  seg.028.mp4  seg.033.mp4  seg.038.mp4  seg.043.mp4  seg.048.mp4  seg.053.mp4  seg.058.mp4  seg.063.mp4
media.m3u8   seg.004.mp4  seg.009.mp4  seg.014.mp4  seg.019.mp4  seg.024.mp4  seg.029.mp4  seg.034.mp4  seg.039.mp4  seg.044.mp4  seg.049.mp4  seg.054.mp4  seg.059.mp4  seg.064.mp4
seg.000.mp4  seg.005.mp4  seg.010.mp4  seg.015.mp4  seg.020.mp4  seg.025.mp4  seg.030.mp4  seg.035.mp4  seg.040.mp4  seg.045.mp4  seg.050.mp4  seg.055.mp4  seg.060.mp4  seg.065.mp4
seg.001.mp4  seg.006.mp4  seg.011.mp4  seg.016.mp4  seg.021.mp4  seg.026.mp4  seg.031.mp4  seg.036.mp4  seg.041.mp4  seg.046.mp4  seg.051.mp4  seg.056.mp4  seg.061.mp4  seg.066.mp4
seg.002.mp4  seg.007.mp4  seg.012.mp4  seg.017.mp4  seg.022.mp4  seg.027.mp4  seg.032.mp4  seg.037.mp4  seg.042.mp4  seg.047.mp4  seg.052.mp4  seg.057.mp4  seg.062.mp4

GCS バケットを用意し、CORS ポリシーを更新する

バケット作成

PROJECT=[YOUR_OWN_PROJECT_ID]
cd ..
gsutil mb gs://$PROJECT

JSON ファイル作成

cors.json

[
    {
      "origin": ["*"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

ポリシー適用

gcloud storage buckets update gs://$PROJECT --cors-file=cors.json

resource フォルダをアップロードする

gsutil cp -r resource gs://$PROJECT

index.html をアップロードする

videoSrc は GCS にアップロードした際の media.m3u8 ファイルの GCS パスに変更してください。あとはそのままで OK です。
あと、GCS は外部に公開してください。これ重要です。

<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<div>
  <h2>HTTP Live Streaming</h2>
  <video id="video" width="640" height="360" controls></video>
</div>
<script>
  var video = document.getElementById("video");
  var videoSrc =
    "https://storage.googleapis.com/[YOUR_OWN_BUCKET_NAME]/resource/media.m3u8";
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
    video.src = videoSrc;
  }
</script>

gsutil cp index.html gs://$PROJECT

いったん、これで GCS にある index.html にアクセスすれば BBB が再生される状態です。確認してみてください。
以下が表示される Web ページです。すでに LB を用意した後の URL ですが、私の場合は http://34.144.254.201/index.html にアクセスしています。（すでにこの IP アドレスは解放しています。アクセスできませんので悪しからず。）

Cloud CDN を有効化しつつ Cloud Load Balacing で公開する

今回は簡易に HTTP で公開します。
が、この手順についてはコンソール上でぽちぽちなり Terraform で管理するなりするための手順が公式ドキュメントにしっかり記載されていますので、こちらをご覧ください。

念のため確認

まずは GCS の index.html に直アクセスした場合の様子です。
200 OK が返ってきています。

次に、LB 経由で index.html にアクセスした場合の様子です。
一回目は Cloud CDN にキャッシュが保存されていないので、開いたらまず画面更新してください。
すると、以下の結果となるはずです。

304 Not Modified が返ってきています。

これはキャッシュされたリソースへの暗黙のリダイレクトです。

つまり、一回目のアクセスによって静的コンテンツは Cloud CDN（お近くのエッジキャッシュ）にキャッシュされ、二回目のアクセスは Cloud CDN のキャッシュにアクセスしています。
おめでとうございます 🎉

余談

実は、index.html はキャッシュヒットしていますが、その他の動画コンテンツは下図の通り from disk cache、つまりお使いのブラウザキャッシュから読み込まれています。

Cloud CDN と言えどそれを支えるのは単なるサーバです。できることならサーバの負荷は減らしたいですし、動画を見る側にとってもなるべく早く観たいはずです。
なので、毎回 Cloud CDN のキャッシュサーバにアクセスするのではなく、可能な範囲でブラウザのキャッシュから読み込むようになっています。
キャッシュに興味のある方は、以下 URL にアクセスしてキャッシュが保存されている場所を確認するなり、Chrome の設定画面よりキャッシュを削除するなりしてください。
chrome://version/

キャッシュなしで試したい場合は開発者ツールの Network タブより Disable cache を選択しましょう。毎回 200 OK で返ってくるようになります。
なぜこのチェックボックスをオンにしたらキャッシュヒットしなくなるの？と思った方、キャッシュの世界へようこそ。

参考にしたサイト

HLS.js 公式 GitHub リポジトリ

localhost で簡単に HLS 配信を Python でしてみる