hls.jsでクッキーをセットする方法

お疲れ様です。すぺきよです。

今回はたまたま仕事で使う必要があったAWS CloudFront + hls.jsでのストリーミング動画配信をする際に、CloudFront用の署名付きクッキーをセットする方法をメモしておきます。

あちこちで、hls.jsとCloudFrontを組み合わせる際に、署名付きクッキーを設定する必要があるという記述を見かけたのですが、なかなか具体例が見つからず苦労しました。

各バージョンなど
1. hls.js
hls.jsを利用した経緯
この記事で何がわかるか
書き方
このコードの勘所
なぜ、この設定が必要か
参考文献

各バージョンなど

hls.js

バージョン 1.4.6

hls.jsを利用した経緯

今回hls.jsを使うことにした理由は、システムにアップロードされた単一mp4の動画ファイルを、HLS(Http Live Streaming)形式で配信するためです。

HLS形式で配信する方法として、動画ファイルをtsファイルに分割し、m3u8ファイルでプレイリストとして記述する方法があります。

今回は、システムにアップロードされた動画ファイルを、AWS Elemental MediaConvertでm3u8形式に分割し、S3に保存、CloudFront経由で配信する形としました。

しかし、このtsファイルとm3u8ファイルでのライブストリーミングに標準で対応しているブラウザは、現時点(2023年12月現在)でSafariのみのようで、主要なブラウザであるFireFox、Chrome、Edgeが対応していないという問題があります。

このSafari以外の主要なブラウザでも、tsファイルとm3u8ファイルでのライブストリーミングをできるようにしてくれるのがHLS.jsというライブラリです。

この記事で何がわかるか

以下のことがわかります。

hls.jsでファイルにアクセスするときに、CloudFront用の署名付きクッキーなどのクッキーをセットする方法がわかります。

書き方

署名付きクッキーなどのクッキーをセットしてファイルにアクセスするためには、以下のように記述します。

window.addEventListener("load", () =>
{
    const video = document.getElementById('video');
    if(video)
    {
        const src = "https://****/****/****.m3u8";
        if(Hls.isSupported()) 
        {
            const config = 
            {
                xhrSetup: function (xhr, url)
                {
                    xhr.withCredentials = true; // do send cookies
                },
                fetchSetup: function (context, initParams)
                {
                    // Always send cookies, even for cross-origin calls.
                    initParams.credentials = 'include';
                    return new Request(context.url, initParams);
                },
            };

            const hls = new Hls(config);
            hls.loadSource(src);
            hls.attachMedia(video);
        }
        else
        {
            video.src = src;
        }
    }
})