🙄

Cloudflare Stream ライブ配信機能を試す

2023/09/11に公開

今日の記事ではCloudflare Streamのライブ配信機能を使ってみます。オンデマンドとライブ配信では管理者画面が分かれています。

Live inputsをクリックします。

Create Live Inputを押し、適当な名前を入力します。

Live Playback and Recordingにチェックを付けると録画しながら配信が可能となります。このため、巻き戻しや、ライブ配信後のオンデマンド配信が自動で作成されます。このオプションをオンにしておくとマネージメントコンソール上で動画配信が確認できますので、便利なため今回はこのオプションをオンにしておきます。

Require Signed URLsは俗に、認証付き配信と言われます。あるウェブサイトの認証を通過した人の見に一時的なURLを配布する方式です。ただしそのURLは有効期限の間はコピーされても別の人がライブ配信を見ることは可能ですので、高いセキュリティを提供できるわけではないことに注意してください。

録画された動画が何日間配信されるか？の設定が可能です。

Create Live Inputを押します。

RTMPS URLとRTMPS Keyをそれぞれコピーしておきます。

RTMPS とは

Real Time Messaging Protocol (RTMP)は映像配信でよく使われる業界標準のプロトコルです。それにTLS処理を加えたのがRTMPSです。もともとはFlash Video用プロトコルでしたが、多くの映像機材が当該プロトコルをサポートしていた関係で、ライブ配信現場ではいまだに使われている古のプロトコルです。ただし、クライアントブラウザへの動画配信にRTMP(s)が使われることは今はほとんどなくなっています。
このような関係からエンコーダ（生の映像を受け取って初期エンコードを行い、指定された場所へ動画をアップロードする存在）からの情報をCloudflare StreamではRTMPSで受け取ります。
また映像配信ソースとしてはWebRTCを活用したWebRTC-HTTP Ingestion Protocol(WHIP)もサポートしています。この記事では一般的なRTMPSを用います。

インプット映像ソースは現時点でH.264 ビデオおよび AAC オーディオコーデックのみをサポートしています。

OBSの設定

エンコーダにはおなじみOBSを使います。OBSのインストールや初期セットアップなどはこの記事からは割愛します。画面右下の設定を押し、出てきた画面で配信を押します。

サービスでカスタムを選びます。
サーバ、ストリームキーに先ほどコピーした値を入力しOKを押します。

ソースを右クリックしてカメラを認識させると、画面上部に映像が出てきます。

配信開始ボタンを押します

暫くすると以下のDisconnectがConnectedになります。

そうすると管理者画面でライブ配信動画が出てきます。

あとは出力された以下をHTMLにすれば完成です。

<div style="position: relative; padding-top: 56.25%;">
  <iframe
    src="https://customer-8d7vafw8vgke2agn.cloudflarestream.com/250d9f5271c198d9eb5edc5b57a17599/iframe"
    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>

Player URL 取得API

いちいち管理者画面からEmbeded用HTMLから動画URLを取得するのは手間です。以下のAPIで取得が可能です。

curl.exe -X GET -H "Authorization: Bearer <api token>" https://api.cloudflare.com/client/v4/accounts/<account id>/stream/live_inputs/<video input id>/videos

以下のパラメータが戻ります。

<snip>
 "preview": "https://customer-8d7vafw8vgke2agn.cloudflarestream.com/04efc45067dafc7c561285ae8f4c9291/watch",
<snip>

RTMPS とは

OBSの設定

Player URL 取得API

Discussion