CloudflareのサービスでLive配信機能を試してみた

GitHub Page でデプロイした個人ブログに、もっと短くて覚えやすいドメイン名をつけるきっかけとして、Cloudflare のサービスを使い始めました。そして最近久々に Dashboard を開いたら、Stream というサービスに気づきました。さっそく使ってみました。

## サービス紹介

Cloudflare Stream サービスは Serverless なライブ動画配信サービスで、サーバーの設置やメンテナンス不要な PaaS サービスです。サイトオーナーにとって、生成されたリンクを使って OBS Studio などのツールで配信すれば、ウエブページに Embed する Cloudflare が提供したプレーヤー経由で、閲覧者が自由に視聴できます。さらに事前アップした動画を配信したり、ライブ配信した動画をレコードしたりも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/c48c8044-22d7-975b-e510-ee695c5b9066.png)

ライブ動画配信の Live Input（Room と似たような概念）を作成すると、Dashboard に以下の画面が出てきます。
「Connection Information」の「RTMPS URL」と「RTMPS Key」を OBS Studio にコピペして配信開始したら、この Dashboard で配信内容を preview することができます。そして右側に Streaming 状態が動的に更新されます。

![Screenshot 2023-12-19 213554.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/1086edc1-bbfa-0f4e-904a-771d636a70c6.png)

そして録画は Overview 画面で確認できます。

![Screenshot 2023-12-19 214317.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/4962737a-d7e0-e5fe-7170-659e43f43541.png)


### 料金の計算ロジック

Stream サービス自体は無料ではないですが、個人的な趣味として使うなら全然高いわけでわないと思います。もし Cloudflare の Image hosting サービスも一緒に使うとしたら、さらにお得なプランがありますが、Stream サービスだけなら月々 5 ドルで 1000 分のライブ配信と最大 1000 分の動画を保存するができます。

| サービス | 値段 | 説明 |
|:-:|:-:|:-|
| ライブ配信 | 1ドル / 1000分 | rtmps / srt サーバーとして push / pull できる |
| 動画保存 | 5ドル / 1000分 | 事前アップした動画やライブ配信のレコードを hls / dash で配信できる |

Cloudflare の料金の計算はほかのクラウドサービスと違って結構面白いです。GCP、AWS、Alibaba Cloud、Tencent Cloud などのライブ配信サービスはいちいち Encoding、Transcoding、動画の解像度に対して課金し、その上でデータ転送量あるいは動画配信時間によって大量の料金が発生されます。しかし Cloudflare は視聴者数・解像度・Transcoding などを問わずに、ただ単純に配信の長さに課金するだけです。

とは言って、動画保存の部分の料金には迷ってました。最初は一ヶ月以内に最大 1000 分の動画をアップできると思ってましたが、実際にはアップロードしてみると、「最大 1000 分」はストレージの容量を指します。アップロードした動画を削除したらストレージ容量がまた戻ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/3e778509-5e46-aee1-7dd8-bbd5adac1d2e.png)

### 動画保存だけではない

さらに面白いところは、Stream のライブ配信サービスはデフォルトで録画されて、そしてストレージに保存されます。これでライブ配信が停止した時点で「再放送」にスムーズに切り替えることも可能になります。もちろんストレージ容量を使いたくなければライブ配信サーバーだけを走らせるのもできますが、しかしその場合は rtmps と srt 二つのプロトコルだけ再生できます。hls あるいは dash で再生したい場合にはデフォルトの録画をそのまま機能させなければなりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/76f219db-2bc0-1a8d-701b-fd56dd545e08.png)

勝手な推測ですが、rtmps / srt から hls / dash にプロトコル変換のロジックは、ライブ配信に存在するのではなく、動画保存の部分にあります。つまり、rtmps サーバーはただ手元にあるデータを client 側に渡すでけで、hls ならライブ配信中でもだいぶ前の内容から動画を再生することが可能になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/0c58eeb2-3dcd-a2ad-00d0-cd84c0ceb742.png)

### スペック

Stream Live が対応できるのが H.264 の動画と AAC の音声の Up Stream のみ。

| 解像度 | 推薦ビットレート |
| :-: | :-: |
| 1080p | 8 Mbps |
| 720p | 4.8 Mbps |
| 480p | 2.4 Mbps |
| 360p | 1 Mbps |

## アーキテクチャ

Cloudflare 公式サイトで掲載された画像によって、一般的なライブ配信アプリにはこのような部分が含まれています：



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/ac8d4dac-b8ee-d367-ffca-97f812904d32.png)

などなどのニーズをもとにして、このようなアーキテクチャでサービスを立てます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/c49439e3-9f09-bb91-952f-a387776d7644.png)


（WIP）

## Frontend

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/ccd6621a-6e71-2605-e210-83e0cf50d0a8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/a3f366c5-7232-264c-3a7b-166eee7b47fb.png)


## Backend

![Screenshot 2023-12-19 234419.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517850/ef3514f4-812b-d480-25f6-306c8b2670aa.png)