ブレークアウトルーム

コード例

例を見て学びたい場合は、それぞれのサンプルリポジトリを確認してください。

Web の例

ブレイクアウトルームは、ミーティングの参加者が少人数のグループに分かれて、目的を絞った議論や共同作業を行うための機能です。リモートワークやオンライン学習の広がりに伴い、仮想環境での参加促進とコミュニティ形成に欠かせないツールになっています。ワークショップ、オンライン教室、またはメインミーティングの外で一部の参加者と個別に話す必要がある場合に適しています。

RealtimeKit では、ブレイクアウトルームは別のミーティングとして作成されます。各ブレイクアウトルームは独立したミーティングであり、ほかの RealtimeKit ミーティングと同じように管理できます。RealtimeKit は、ブレイクアウトルームの作成、管理、切り替え用の SDK API を提供します。

主な機能

RealtimeKit のブレイクアウトルームの主な機能は次のとおりです。

プリセットを使って、ホストと参加者の権限と特権を管理します
ホストはブレイクアウトルームの作成、参加者の割り当て、開始と終了、ルーム間の切り替えができます
参加者はビデオの開始と停止、チャットと投票でのやり取り、音声のミュート / ミュート解除ができます
ほかの RealtimeKit ミーティングと同様に、各ブレイクアウトセッションを個別に録画できます

ブレイクアウトルームのロール

ブレイクアウトルームのロールはプリセットで管理します。

ホスト

ホストはブレイクアウトルームの作成、参加者の割り当て、開始と終了、ルーム間の切り替えができます。

参加者

ブレイクアウトルームの参加者として、次のことができます。

Switch to Parent Meeting - 必要な権限がある場合、メインミーティングに戻ります
Switch Connected Meetings - メインミーティングから、共同作業向けの少人数の議論グループ（ブレイクアウトルーム）へ移動します
Collaborate - ブレイクアウトセッション中にチャットや投票などのツールを使います

音声とビデオ

各ブレイクアウトルームは独立したミーティングとして動作します。メインミーティングからブレイクアウトルームへ切り替えると、音声とビデオは自動でブレイクアウトセッションのものに切り替わります。ブレイクアウトセッション中は、メインミーティングと同様に、いつでも音声をミュート / ミュート解除でき、ビデオを開始 / 停止できます。

ブレイクアウトセッションが終了すると、音声とビデオは自動でメインミーティングに戻ります。

ブレイクアウトセッション中にビデオがオンだった場合、メインセッションに戻ってもオンのままです
ブレイクアウトセッション中にマイクがオンだった場合、メインセッションに戻ってもオンのままです

ブレイクアウトセッションの録画

各ブレイクアウトセッションは別のセッションです。各ブレイクアウトセッションの録画は、ほかの RealtimeKit ミーティングと同様に、個別に保存および管理されます。詳細は Recording を参照してください。

ブレイクアウトルームの管理

ブレイクアウトルームは、参加者が別セッションに分かれるための機能です。ホストはブレイクアウトルームの作成、参加者の割り当て、開始と終了ができます。

プリセットを作成する

プリセットは、ホストと参加者に適用する権限と UI 設定のセットです。ブレイクアウトルームの見た目、操作感、動作を決めます。

ブレイクアウトルームでは、Connected Meetings でホストと参加者に次の権限を設定する必要があります。

ホスト

ホストのプリセットには、Connected Meetings で Full Access 権限が必要です。これにより、ホストは次のことができます。

ブレイクアウトルームを作成する
参加者をルームに割り当てる
ブレイクアウトルームを開始および終了する
ルーム間を切り替える

参加者

参加者には、次の権限を付与できます。

Switch Connected Meetings - 参加者がブレイクアウトルーム間を移動できるようにします
Switch to Parent Meeting - 参加者がメインミーティングに戻れるようにします

プリセットを保存する

プリセットへの変更が終わったら、Save を選択します
プリセット名を入力し、Save を選択します
プリセットが一覧に表示されます。変更する場合は Edit を選択します

ミーティングを作成する

Create meeting API を使って RealtimeKit ミーティングを作成します。この API はミーティングの一意の識別子を返します。

参加者を追加する

ミーティングを作成したあと、Add participant API を使って各参加者を追加します。先ほど作成した presetName を、Add Participant API リクエストのボディに渡す必要があります。

ブレークアウトルームを開始する

ブレークアウトルームを組み込む

API でブレークアウトルームを用意したあと、RealtimeKit SDK を使ってアプリケーションへ組み込みます。

ブレークアウトルーム対応で SDK を初期化する

SDK を初期化し、ブレークアウトルーム用のイベントハンドラーを追加します。

import {
	RealtimeKitProvider,
	useRealtimeKitClient,
} from "@cloudflare/realtimekit-react";
import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";
import { useEffect, useState } from "react";

function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();
	const [authToken, setAuthToken] = useState("<participant_auth_token>");

	useEffect(() => {
		if (authToken) {
			initMeeting({
				authToken: authToken,
			});
		}
	}, [authToken]);

	// Add event handler for breakout rooms
	useEffect(() => {
		if (meeting) {
			meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
				// Meeting object is automatically updated in React
				console.log("Switched to breakout room or main meeting");
			});
		}
	}, [meeting]);

	return (
		<RealtimeKitProvider value={meeting}>
			<RtkMeeting showSetupScreen={true} meeting={meeting} />
		</RealtimeKitProvider>
	);
}

meetingChanged イベントは、参加者がメインミーティングとブレークアウトルームのあいだを切り替えたときに発火します。React では、meeting オブジェクトはプロバイダーが自動で管理します。

<script type="module">
	import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";

	let meeting = await RealtimeKitClient.init({
		authToken: "<participant_auth_token>",
	});

	// Add event handler for breakout rooms
	meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
		meeting = newMeeting;
		document.querySelector("rtk-meeting").meeting = meeting;
	});
</script>

meetingChanged イベントは、参加者がメインミーティングとブレークアウトルームのあいだを切り替えたときに発火します。このイベントが発火したら、meeting オブジェクトの参照を更新します。

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import RealtimeKitClient from '@cloudflare/realtimekit';
import { RtkMeeting } from '@cloudflare/realtimekit-angular';

@Component({
	selector: 'app-root',
	template: `<rtk-meeting #myid [showSetupScreen]="true"></rtk-meeting>`
})
export class AppComponent implements AfterViewInit {
	@ViewChild('myid') meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		let meeting = await RealtimeKitClient.init({
			authToken: '<participant_auth_token>',
		});

		// Add event handler for breakout rooms
		meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {
			meeting = newMeeting;
			if (this.meetingComponent) {
				this.meetingComponent.meeting = meeting;
			}
		});

		this.rtkMeeting = meeting;
		if (this.meetingComponent) {
			this.meetingComponent.meeting = meeting;
		}
	}
}

RealtimeKitUI.startMeeting() を使う場合、SDK が RtkConnectedMeetingsListener を自動で管理します。ブレークアウトルームの切り替えに追加の設定は不要です。

カスタムのミーティング UI を作る場合（MeetingViewController を使わない場合）は、リスナーを自分で登録します。

import RealtimeKit
import RealtimeKitUI

let listener = RtkConnectedMeetingsListener(rtkClient: rtkClient)

listener.onChangingMeeting = { meetingId in
    // Show a loading overlay; the SDK is switching rooms
    let isReturningToMain = meetingId == rtkClient.connectedMeetings.parentMeeting?.id
    showLoadingOverlay(message: isReturningToMain ? "Returning to Main Room\u{2026}" : "Joining breakout room\u{2026}")
}

listener.onMeetingChanged = { error in
    hideLoadingOverlay()
    if let error {
        showErrorAlert(message: error.message)
    } else {
        // Re-register all feature event listeners — the SDK clears them during the room switch
        // Re-register your listener instances, for example:
        // rtkClient.addSelfEventListener(selfEventListener: mySelfListener)
        // rtkClient.addParticipantsEventListener(participantsEventListener: myParticipantsListener)
    }
}

listener.onStateUpdate = { meetings, parentMeeting in
    // Refresh your breakout-rooms UI list
}

RealtimeKitUIBuilder と startMeeting() を使う場合、SDK が RtkConnectedMeetingsEventListener を自動で登録・管理します。ブレークアウトルームの切り替えに追加の設定は不要です。

カスタムのミーティング UI を作る場合は、リスナーを自分で登録します。

import com.cloudflare.realtimekit.ui.RtkConnectedMeetingsEventListener
import com.cloudflare.realtimekit.models.MeetingError

val connectedMeetingsListener = object : RtkConnectedMeetingsEventListener {
    override fun onChangingMeeting(meetingId: String) {
        // Show a transition screen; the SDK is switching rooms
        val isReturningToMain = meetingId == meeting.connectedMeetings.parentMeeting?.id
        showLoadingOverlay(isReturningToMain)
    }

    override fun onMeetingChanged(error: MeetingError?) {
        hideLoadingOverlay()
        if (error != null) {
            showErrorMessage(error.message)
        }
        // No need to re-register listeners — the SDK handles this automatically
    }
}

meeting.addConnectedMeetingsEventListener(connectedMeetingsListener)

onChangingMeeting コールバックは、SDK が現在のルームからの退出を始めたときに発火します。onMeetingChanged コールバックは、切り替えが完了したとき（または失敗したとき）に発火します。

useRealtimeKitClient フックは meetingChanged イベントを自動で処理し、参加者がブレークアウトルーム間を移動すると、アクティブなクライアント参照を差し替えます。手動のイベント処理は不要です。

import { useEffect } from "react";
import { useRealtimeKitClient } from "@cloudflare/realtimekit-react-native";
import { RtkMeeting } from "@cloudflare/realtimekit-react-native-ui";

function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    initMeeting({ authToken: "<participant_auth_token>" });
  }, []);

  if (!meeting) return null;

  return <RtkMeeting meeting={meeting} showSetupScreen={true} />;
}

RtkMeeting は、ブレークアウトルーム間の切り替え時に「Joining…」の遷移画面を自動で表示します。追加の設定は不要です。

ミーティング UI を描画する

組み込みのブレークアウトルーム対応を含む、デフォルトのミーティング UI コンポーネントを使います。

import {
	RealtimeKitProvider,
	useRealtimeKitClient,
} from "@cloudflare/realtimekit-react";
import { RtkMeeting } from "@cloudflare/realtimekit-react-ui";
import { useEffect, useState } from "react";

function App() {
	const [meeting, initMeeting] = useRealtimeKitClient();
	const [authToken, setAuthToken] = useState("<participant_auth_token>");

	useEffect(() => {
		if (authToken) {
			initMeeting({
				authToken: authToken,
			});
		}
	}, [authToken]);

	useEffect(() => {
		if (meeting) {
			meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
				console.log("Switched to breakout room or main meeting");
			});
		}
	}, [meeting]);

	return (
		<RealtimeKitProvider value={meeting}>
			<RtkMeeting showSetupScreen={true} meeting={meeting} />
		</RealtimeKitProvider>
	);
}

showSetupScreen プロパティは、セットアップ画面を表示するかどうかを制御します。参加者はセッション参加前に、音声と映像をプレビューできます。

<body>
	<rtk-meeting id="my-meeting"></rtk-meeting>

	<script type="module">
		import RealtimeKitClient from "https://cdn.jsdelivr.net/npm/@cloudflare/realtimekit@latest/dist/index.es.js";

		let meeting = await RealtimeKitClient.init({
			authToken: "<participant_auth_token>",
		});

		// Add event handler for breakout rooms
		meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
			meeting = newMeeting;
			document.querySelector("rtk-meeting").meeting = meeting;
		});

		document.querySelector("rtk-meeting").showSetupScreen = true;
		document.querySelector("rtk-meeting").meeting = meeting;
	</script>
</body>

<rtk-meeting #myid [showSetupScreen]="true"></rtk-meeting>

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import RealtimeKitClient from '@cloudflare/realtimekit';
import { RtkMeeting } from '@cloudflare/realtimekit-angular';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
	@ViewChild('myid') meetingComponent: RtkMeeting;
	rtkMeeting: RealtimeKitClient;

	async ngAfterViewInit() {
		let meeting = await RealtimeKitClient.init({
			authToken: '<participant_auth_token>',
		});

		// Add event handler for breakout rooms
		meeting.connectedMeetings.on('meetingChanged', (newMeeting) => {
			meeting = newMeeting;
			if (this.meetingComponent) {
				this.meetingComponent.meeting = meeting;
			}
		});

		this.rtkMeeting = meeting;
		if (this.meetingComponent) {
			this.meetingComponent.meeting = meeting;
		}
	}
}

import RealtimeKit
import RealtimeKitUI

let meetingInfo = RtkMeetingInfo(authToken: "<participant_auth_token>")
let rtkUI = RealtimeKitUI(meetingInfo: meetingInfo)

let setupVC = rtkUI.startMeeting { [weak self] in
    // Called when the participant leaves or ends the meeting
    self?.dismiss(animated: true)
}
present(setupVC, animated: true)

セットアップ画面（音声・映像のプレビュー）はデフォルトで表示されます。ルーム切り替えのオーバーレイやルームタイトルの更新を含む、組み込みのブレークアウトルーム対応は、MeetingViewController が自動で処理します。

import com.cloudflare.realtimekit.models.RtkMeetingInfo
import com.cloudflare.realtimekit.ui.RealtimeKitUIBuilder
import com.cloudflare.realtimekit.ui.RealtimeKitUIInfo

val meetingInfo = RtkMeetingInfo(authToken = "<participant_auth_token>")
val uiKitInfo = RealtimeKitUIInfo(
    activity = this,
    rtkMeetingInfo = meetingInfo,
)
val rtkUIKit = RealtimeKitUIBuilder.build(uiKitInfo)
rtkUIKit.startMeeting()

組み込みのブレークアウトルーム対応は、RtkMeetingActivity が自動で処理します。SDK が参加者をルーム間で移動すると、ローカライズされたメッセージ付きの遷移オーバーレイを表示します。ホストは RtkBreakoutRoomsBottomSheet でブレークアウトルームを管理できます。コントロールバーの Breakout Rooms ボタンをタップすると、自動で表示されます。

import { useEffect } from "react";
import { useRealtimeKitClient } from "@cloudflare/realtimekit-react-native";
import { RtkMeeting } from "@cloudflare/realtimekit-react-native-ui";

function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    initMeeting({ authToken: "<participant_auth_token>" });
  }, []);

  if (!meeting) return null;

  return <RtkMeeting meeting={meeting} showSetupScreen={true} />;
}

組み込みのブレークアウトルーム対応は、RtkMeeting が自動で処理します。参加者がルーム間を移動すると、「Joining…」の遷移画面が自動で表示されます。ホストはコントロールバーの RtkBreakoutRoomsToggle から使える RtkBreakoutRoomsManager で、ブレークアウトルームを管理できます。

次のステップ

RealtimeKit アプリケーションへブレークアウトルームを組み込めました。参加者は次ができます。

メインミーティングに参加する
ホストによってブレークアウトルームへ割り当てられる
メインミーティングとブレークアウトルームを切り替える
少人数のグループで協働する

さらにカスタマイズする場合は、次を参照してください。

UI Kit Components Library - 利用できるコンポーネントを確認します
UI Kit States - コンポーネントの同期方法を学びます
Build Your Own UI - 独自のミーティング画面を作ります

ブレークアウトルーム

コード例

Web の例

主な機能

ブレイクアウトルームのロール

ホスト

参加者

音声とビデオ

ブレイクアウトセッションの録画

ブレイクアウトルームの管理

プリセットを作成する

ホスト

参加者

プリセットを保存する

ミーティングを作成する

参加者を追加する

ブレークアウトルームを開始する

参加者を自動で割り当てる

参加者を手動で割り当てる

参加者を自動で割り当てる

参加者を手動で割り当てる

参加者を自動で割り当てる

参加者を手動で割り当てる

参加者を自動で割り当てる

参加者を手動で割り当てる

ブレークアウトルームを組み込む

ブレークアウトルーム対応で SDK を初期化する

ミーティング UI を描画する

次のステップ