RealtimeKit ミーティングに参加すると、レイアウトは体験を最適化するように自動で決まります。共有コンテンツにフォーカスし、発言中のスピーカーを強調し、参加者は小さなサムネイルで表示されます。ミーティングの録画を開始すると、デフォルトの UI Kit コンポーネント RtkGrid ↗ を使い、同じレイアウトで録画されます。
録画アプリのレイアウトをカスタマイズしたい場合は、RealtimeKit のカスタム録画 SDK で、録画の見た目を好みに合わせて調整できます。次のような選択肢があります。
- アクティブスピーカービューだけを表示する
- 共有画面とサムネイルギャラリービュー
- 共有画面と、大きめのアクティブスピーカーサムネイル
- アクティブスピーカーやギャラリービューなしの共有画面
- 録画用のカスタム背景
- ポートレートレイアウトなど
Start Recording を呼び出すと、RealtimeKit は Cloudflare コンテナを起動し、その中で Chrome ブラウザを開き、録画アプリの URL を読み込みます。url パラメーター にカスタム URL を渡さない場合は、RealtimeKit 内蔵の録画アプリが使われます。
カスタム録画アプリを Chrome ブラウザで読み込む前に、RealtimeKit は URL に authToken と config のクエリパラメーターを付けます。たとえば、Start Recording API に次の URL を渡した場合です。
https://example.com/my-custom-recorderRealtimeKit は、次のパラメーター付きでアプリを読み込みます。
https://example.com/my-custom-recorder?authToken=AUTH_TOKEN_CREATED_BY_REALTIMEKIT&config=CONFIG_CREATED_BY_REALTIMEKITプレースホルダーの値は、RealtimeKit が渡すパラメーターです。Start Recording API に渡す URL へ、自分で authToken や config を付けないでください。アプリは、両方のパラメーターを URL から読み取る必要があります。
RealtimeKit は、録画を開始したミーティング向けに authToken を自動生成します。このトークンは recorder_preset_v2 プリセットで生成されます。recorder_preset_v2 プリセットを作成していない場合、RealtimeKit は同名のグローバルプリセットを使います。このプリセットは RealtimeKit が管理し、アカウントには表示されません。
カスタム録画アプリは、この authToken を受け取り、RealtimeKit SDK の初期化に使って meeting オブジェクトを取得する必要があります。
Start Recording API に渡した設定（透かしの設定など）は、config クエリパラメーター経由で録画アプリに渡されます。デフォルトの録画アプリは、この設定を自動で読み取り、適用します。
カスタム録画アプリを使う場合、config の読み取りと適用はアプリ側の責任です。ブラウザ上でアプリが描画した内容が、そのまま録画されます。RealtimeKit は、カスタム録画アプリの出力に対して、追加のレイアウト、透かし、そのほかの加工を行いません。
hidden_participant フラグは、レコーダーの表示だけを制御します。有効にすると、ミーティング内のほかの参加者からレコーダーが非表示になります。
is_recorder フラグは、その参加者がレコーダーであることを示し、録画が正しく動作するようにします。色や見た目を変えるためにカスタムの recorder_preset_v2 プリセットを作成する場合も、is_recorder は有効のままにしてください。is_recorder を外すと、録画が失敗することがあります。hidden_participant を外すと、レコーダーがほかの参加者に見えることがあります。
ローカルテストでは、録画アプリの UI を確認できます。録画アプリの URL をローカルマシンで直接開いても、録画は開始されません。
ローカルテスト専用に、hidden_participant: true の任意のプリセットを作成し、そのプリセットで作った認証トークンを authToken クエリパラメーターとして、ローカルの録画アプリ URL を開きます。これでレコーダー UI の見た目を確認できます。Start Recording API に渡す URL の authToken に、ローカルテスト用トークンを入れないでください。実際の録画では、RealtimeKit がレコーダー用トークンを生成して渡します。
開発を速くするには、Cloudflare Tunnel でローカルの録画アプリを公開します。たとえばアプリがポート 1111 で動いている場合、次のコマンドで Quick Tunnel を開始します。
cloudflared tunnel --url http://localhost:11111111 は、ローカルアプリが使うポートに置き換えます。cloudflared は公開の trycloudflare.com URL を出力します。この URL をカスタム録画アプリの URL として録画開始時に使い、Cloudflare コンテナからローカルアプリを読み込めます。
ローカルテスト中、ブラウザコンソールに WebSocket エラーが出ることがあります。ブラウザが localhost:8080 に接続できないためです。ローカルテストでは、このエラーは無視してかまいません。レコーダーはホスト側の Cloudflare コンテナ内でこのポートを使い、WebSocket 接続で録画アプリがコンテナに対して、描画された Web ページの録画を指示します。
実装例は Recording SDK アプリのサンプル ↗ を参照してください。透かし付き録画の例 ↗ もあります。
カスタム録画 SDK は、UI Kit または Core SDK の上で使います。@cloudflare/realtimekit-recording-sdk パッケージ ↗ は、録画機能を管理する RealtimeKitRecording クラスを提供します。
constructor(options)
RealtimeKitRecording クラスのインスタンスを作成します。
options (object): オプションオブジェクトです。コンストラクターのオプションはすべて任意です。省略した場合、RealtimeKit はデフォルト値を使います。
| options (object) | 説明 |
|---|---|
options.waitTimeMs (number) |
全ピアが退出してから録画を停止するまでの待ち時間（ミリ秒）です。このオプションは autoStop が true のときに適用されます。 |
options.autoStart (boolean) |
デフォルトは true で、init() の呼び出し時に録画が自動開始します。startRecording() で手動開始したい場合だけ false にします。false の場合、WebSocket 接続の確立から 2 分以内に startRecording() を呼び出さないと、録画処理でエラーになります。 |
options.autoStop (boolean) |
デフォルトは true で、全ピアが退出すると録画が自動停止します。stopRecording() で手動停止したい場合だけ false にします。 |
options.scanInterval (number) |
ピア退出の自動検出を行う間隔（ミリ秒）です。 |
options.devMode (boolean) |
開発モードを有効にする場合は true にします。ログが有効になり、一部機能が無効になります。録画アプリをローカルでテストするときは、必ず true にしてください。 |
init(client: RealtimeKitClient)RealtimeKitClient オブジェクトを渡して SDK を初期化します。meeting オブジェクトを作成したあと、meeting.joinRoom() を呼ぶ前に呼び出します。
startRecording();ほとんどの場合、autoStart は true（デフォルト）のままにして、録画を自動開始します。手動で開始するには、このメソッドを呼ぶ前にコンストラクターオプションで autoStart を false にします。
stopRecording();通常、このメソッドを呼ぶ必要はありません。autoStop のデフォルトは true です。手動で停止するには、このメソッドを呼ぶ前にコンストラクターオプションで autoStop を false にします。
cleanup();ミーティング退出後のクリーンアップ（追加したリスナーの解除、WebSocket 接続のクローズなど）を行います。
RealtimeKit ミーティング向けの録画アプリを作成する手順は、次のとおりです。
npm i @cloudflare/realtimekit-recording-sdkimport { RealtimeKitRecording } from "@cloudflare/realtimekit-recording-sdk";const recordingSdk = new RealtimeKitRecording(options);meeting オブジェクトを作成したあと、joinRoom を呼ぶ前に init を呼び出します。
// Call this after you have initialized the RealtimeKit SDK and have the meeting object
await recordingSdk.init(meeting);録画を手動で開始するには、RealtimeKitRecording のコンストラクターオプションで autoStart を false にします。UI コンテンツの読み込みが終わり、録画を開始できる状態になったら startRecording() を呼び出します。
await recordingSdk.startRecording();録画を手動で停止するには、RealtimeKitRecording のコンストラクターオプションで autoStop を false にします。録画を止めたいタイミングで stopRecording() を呼び出します。
await recordingSdk.stopRecording();stopRecording を呼び出すと、録画アプリ内のレコーダーは数秒後に終了します。このあと、録画アプリ内で追加の操作はできません。
アプリを作成したら、Cloudflare Workers ↗ などのプラットフォームでデプロイします。デプロイ先の URL を控えてください。RealtimeKit の録画 API にこの URL を入力します。
Start Recording a Meeting API に、前の手順で得たカスタム URL を指定し、デプロイしたアプリの場所を示します。この URL に authToken を付けないでください。RealtimeKit はアプリ読み込み時に、生成した authToken と config パラメーターを追加します。