ブレイクアウトルーム

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

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 リクエストのボディに渡す必要があります。

権限を確認する

ブレイクアウトルームを作成する前に、現在の参加者の権限を確認します。作成に必要な権限があることを確かめてください。権限が足りないと、エラーが発生します。

// ブレイカウトルームに対応しているかを確認します
const areBreakoutRoomsSupported = meeting.connectedMeetings.supportsConnectedMeetings;

// ブレイカウトルームがすでに作成されているかを確認します
const areBreakoutRoomsActive = meeting.connectedMeetings.isActive;

// 現在の参加者がブレイカウトルームを作成する権限を持っているかを確認します
const hasPermissionToCreateBreakoutRooms = meeting.self.permissions.connectedMeetings.canAlterConnectedMeetings;

// 現在の参加者が親ミーティングへ切り替える権限を持っているかを確認します
const hasPermissionToSwitchToParentMeeting = meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;

// 現在の参加者が接続先ミーティングへ切り替える権限を持っているかを確認します
const hasPermissionToSwitchToConnectedMeeting = meeting.self.permissions.connectedMeetings.canSwitchConnectedMeetings;

// ブレイカウトルームに対応しているかを確認します
const areBreakoutRoomsSupported = meeting.connectedMeetings.supportsConnectedMeetings;

// ブレイカウトルームがすでに作成されているかを確認します
const areBreakoutRoomsActive = meeting.connectedMeetings.isActive;

// 現在の参加者がブレイカウトルームを作成する権限を持っているかを確認します
const hasPermissionToCreateBreakoutRooms = meeting.self.permissions.connectedMeetings.canAlterConnectedMeetings;

// 現在の参加者が親ミーティングへ切り替える権限を持っているかを確認します
const hasPermissionToSwitchToParentMeeting = meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;

// 現在の参加者が接続先ミーティングへ切り替える権限を持っているかを確認します
const hasPermissionToSwitchToConnectedMeeting = meeting.self.permissions.connectedMeetings.canSwitchConnectedMeetings;

// ブレイカウトルームに対応しているかを確認します
const areBreakoutRoomsSupported = meeting.connectedMeetings.supportsConnectedMeetings;

// ブレイカウトルームがすでに作成されているかを確認します
const areBreakoutRoomsActive = meeting.connectedMeetings.isActive;

// 現在の参加者がブレイカウトルームを作成する権限を持っているかを確認します
const hasPermissionToCreateBreakoutRooms = meeting.self.permissions.connectedMeetings.canAlterConnectedMeetings;

// 現在の参加者が親ミーティングへ切り替える権限を持っているかを確認します
const hasPermissionToSwitchToParentMeeting = meeting.self.permissions.connectedMeetings.canSwitchToParentMeeting;

// 現在の参加者が接続先ミーティングへ切り替える権限を持っているかを確認します
const hasPermissionToSwitchToConnectedMeeting = meeting.self.permissions.connectedMeetings.canSwitchConnectedMeetings;

val connectedMeetings = meeting.connectedMeetings

// ブレークアウトルームが有効かどうかを確認する
val areBreakoutRoomsActive = connectedMeetings.isActive

// ローカル参加者の権限を確認する
val permissions = meeting.self.permissions.connectedMeetings

// 現在の参加者がブレークアウトルームの作成・変更権限を持つかを確認する
val hasPermissionToAlterBreakoutRooms = permissions.canAlterConnectedMeetings

// 現在の参加者がブレークアウトルーム間の切り替え権限を持つかを確認する
val hasPermissionToSwitchConnectedMeetings = permissions.canSwitchConnectedMeetings

// 現在の参加者が親ミーティングへ戻る権限を持つかを確認する
val hasPermissionToSwitchToParentMeeting = permissions.canSwitchToParentMeeting

let connectedMeetings = meeting.connectedMeetings

// Check if breakout rooms are active
let areBreakoutRoomsActive = connectedMeetings.isActive

// Check permissions on the local participant
let permissions = meeting.self.permissions.connectedMeetings

// Check if the current participant has permission to create/alter breakout rooms
let hasPermissionToAlterBreakoutRooms = permissions.canAlterConnectedMeetings

// Check if the current participant has permission to switch between breakout rooms
let hasPermissionToSwitchConnectedMeetings = permissions.canSwitchConnectedMeetings

// Check if the current participant has permission to switch back to the parent meeting
let hasPermissionToSwitchToParentMeeting = permissions.canSwitchToParentMeeting

const [meeting] = useRealtimeKitClient();

// Check if any breakout rooms are currently active
const areBreakoutRoomsActive = meeting?.connectedMeetings.isActive;

// Check whether the local participant can create, rename, or delete rooms and move any participant
const canAlterBreakoutRooms = meeting?.self.permissions.connectedMeetings.canAlterConnectedMeetings;

// Check whether the local participant can move themselves to any breakout room
const canSwitchRooms = meeting?.self.permissions.connectedMeetings.canSwitchConnectedMeetings;

// Check whether the local participant can return to the parent meeting
const canReturnToParent = meeting?.self.permissions.connectedMeetings.canSwitchToParentMeeting;

ブレイクアウトルームを作成する

const breakoutRooms = await meeting.connectedMeetings.createMeetings([
  { title: "Breakout Room 1" },
  { title: "Breakout Room 2" },
  { title: "Breakout Room 3" },
]);

console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));

breakoutRooms は、id や title などの基本的なミーティング情報の配列です。これらのオブジェクトの id を使って、参加者をブレイクアウトルームへ移動できます。

const breakoutRooms = await meeting.connectedMeetings.createMeetings([
  { title: "Breakout Room 1" },
  { title: "Breakout Room 2" },
  { title: "Breakout Room 3" },
]);

console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));

const breakoutRooms = await meeting.connectedMeetings.createMeetings([
  { title: "Breakout Room 1" },
  { title: "Breakout Room 2" },
  { title: "Breakout Room 3" },
]);

console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));

meeting.connectedMeetings.createMeetings(
    titles = listOf("Breakout Room 1", "Breakout Room 2", "Breakout Room 3")
) { result ->
    result.onSuccess { breakoutRooms ->
        val roomInfo = breakoutRooms.joinToString("\n") { "Id:: ${it.id} --- Title:: ${it.title}" }
        println("Created Breakout Rooms: $roomInfo")
    }.onFailure { error ->
        println("Failed to create breakout rooms: ${error.value.message}")
    }
}

breakoutRooms は、id や title などの基本的なミーティング情報のリストです。これらのオブジェクトの id を使い、参加者をブレイクアウトルームへ移動できます。

meeting.connectedMeetings.createMeetings(titles: ["Breakout Room 1", "Breakout Room 2", "Breakout Room 3"]) { result in
    switch result {
    case .success(let breakoutRooms):
        let roomInfo = breakoutRooms.map { "Id:: \($0.id) --- Title:: \($0.title)" }.joined(separator: "\n")
        print("Created Breakout Rooms: \(roomInfo)")
    case .failure(let error):
        print("Failed to create breakout rooms: \(error.value.message)")
    }
}

breakoutRooms は、id や title などの基本的なミーティング情報の配列です。これらのオブジェクトの id を使って、参加者をブレークアウトルームへ移動できます。

const breakoutRooms = await meeting.connectedMeetings.createMeetings([
  { title: "Breakout Room 1" },
  { title: "Breakout Room 2" },
  { title: "Breakout Room 3" },
]);

console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));

ブレイクアウトルームと参加者の一覧を取得する

ルーム内にホストが複数いて、それぞれがブレイクアウトを作成している場合、次の API でブレイクアウトルームの統合一覧を取得できます。

const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();

breakoutRoomsInfo は、ブレイクアウトルームとその参加者の一覧、親ミーティングの詳細を含むオブジェクトです。

このデータを使い、UI にブレイクアウトルームと参加者の一覧を表示できます。この API はブレイクアウトルームと参加者の一覧を再取得するため、ブレイクアウトルームと参加者の信頼できる情報源として扱えます。変更が進行中のときは、最新の一覧を得るためにこの API を呼び出すことを推奨します。

stateUpdate イベントを購読すると、リアルタイムで更新される最新のブレイクアウトルームと参加者の一覧も取得できます。

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
  console.log("stateUpdate", {meetings, parentMeeting});

  // または、connectedMeetings オブジェクトから meetings と parentMeeting を参照できます
  console.log("Meetings List", meeting.connectedMeetings.meetings);
  console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);
});

const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();

breakoutRoomsInfo は、ブレイクアウトルームとその参加者の一覧、親ミーティングの詳細を含むオブジェクトです。

stateUpdate イベントを購読すると、リアルタイムで更新される最新のブレイクアウトルームと参加者の一覧も取得できます。

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
  console.log("stateUpdate", {meetings, parentMeeting});

  // または、connectedMeetings オブジェクトから meetings と parentMeeting を参照できます
  console.log("Meetings List", meeting.connectedMeetings.meetings);
  console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);
});

const breakoutRooms = await meeting.connectedMeetings.createMeetings([
  { title: "Breakout Room 1" },
  { title: "Breakout Room 2" },
  { title: "Breakout Room 3" },
]);

console.log("Created Breakout Rooms: ", breakoutRooms.map((room) => "Id:: " + room.id + " --- Title:: " + room.title).join("\n"));

meeting.connectedMeetings.getConnectedMeetings { result ->
    result.onSuccess { breakoutRoomsInfo ->
        println("Parent Meeting: ${breakoutRoomsInfo.parentMeeting}")
        println("Breakout Rooms: ${breakoutRoomsInfo.meetings}")
    }.onFailure { error ->
        println("Failed to fetch breakout rooms: ${error.value.message}")
    }
}

breakoutRoomsInfo は、ブレイクアウトルームとその参加者の一覧、および親ミーティングの詳細を含むオブジェクトです。

このデータは、UI にブレイクアウトルームと参加者の一覧を表示するために使えます。この API はブレイクアウトルームと参加者の一覧を再取得するため、信頼できる情報源として扱えます。変更が多数進行中の場合は、最新の状態を得るためにこの API を呼び出すことを推奨します。

onStateUpdate イベントをリッスンして、ブレイクアウトルームと参加者の一覧のリアルタイム更新を受け取ることもできます。

meeting.addConnectedMeetingsEventListener(object : RtkConnectedMeetingsEventListener {
    override fun onStateUpdate(meetings: List<RtkConnectedMeeting>, parentMeeting: RtkConnectedMeeting?) {
        println("State updated. Meetings: $meetings, Parent: $parentMeeting")

        // Alternatively, access state directly from the connectedMeetings object
        println("Meetings List: ${meeting.connectedMeetings.meetings}")
        println("Parent Meeting: ${meeting.connectedMeetings.parentMeeting}")
    }

    override fun onChangingMeeting(meetingId: String) {}
    override fun onMeetingChanged(error: MeetingError?) {}
})

meeting.connectedMeetings.getConnectedMeetings { result in
    switch result {
    case .success(let breakoutRoomsInfo):
        print("Parent Meeting: \(String(describing: breakoutRoomsInfo.parentMeeting))")
        print("Breakout Rooms: \(breakoutRoomsInfo.meetings)")
    case .failure(let error):
        print("Failed to fetch breakout rooms: \(error.value.message)")
    }
}

breakoutRoomsInfo は、ブレークアウトルームとその参加者の一覧、および親ミーティングの詳細を含むオブジェクトです。

このデータは、UI にブレークアウトルームと参加者の一覧を表示するために使えます。この API はブレークアウトルームと参加者の一覧を再取得するため、正とするデータソースとして扱えます。変更が進行中の場合は、最新の状態を得るためにこの API を呼び出すことを推奨します。

onStateUpdate イベントを購読すると、ブレークアウトルームと参加者の一覧のリアルタイム更新も受け取れます。

class MyListener: RtkConnectedMeetingsEventListener {
    func onStateUpdate(meetings: [RtkConnectedMeeting], parentMeeting: RtkConnectedMeeting?) {
        print("State updated. Meetings: \(meetings), Parent: \(String(describing: parentMeeting))")

        // Alternatively, access state directly from the connectedMeetings object
        print("Meetings List: \(meeting.connectedMeetings.meetings)")
        print("Parent Meeting: \(String(describing: meeting.connectedMeetings.parentMeeting))")
    }

    func onChangingMeeting(meetingId: String) {}
    func onMeetingChanged(error: MeetingError?) {}
}

meeting.addConnectedMeetingsEventListener(MyListener())

const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();

breakoutRoomsInfo は、ブレイクアウトルームとその参加者の一覧、親ミーティングの詳細を含むオブジェクトです。

stateUpdate イベントを購読すると、リアルタイムで更新される最新のブレイクアウトルームと参加者の一覧も取得できます。

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
  console.log("stateUpdate", {meetings, parentMeeting});

  // または、connectedMeetings オブジェクトから meetings と parentMeeting を参照できます
  console.log("Meetings List", meeting.connectedMeetings.meetings);
  console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);
});

参加者をブレイクアウトルームへ移動する

ブレイクアウトルームを作成したら、参加者を各ルームに割り当てます。

// Retrieve list of breakout rooms & participants
const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();

/*
* You can retrieve meetingIds and participantIds from the breakoutRoomsInfo object.
* Based on where the participant currently is, you can decide the sourceMeetingId and targetMeetingId.
*/

// Move participants to breakout rooms
const response = await meeting.connectedMeetings.moveParticipants(
  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in
  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved
  ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"], // participantIds, array of participant ids to be moved
);

// Retrieve list of breakout rooms & participants
const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();

/*
* You can retrieve meetingIds and participantIds from the breakoutRoomsInfo object.
* Based on where the participant currently is, you can decide the sourceMeetingId and targetMeetingId.
*/

// Move participants to breakout rooms
const response = await meeting.connectedMeetings.moveParticipants(
  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in
  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved
  ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"], // participantIds, array of participant ids to be moved
);

// Retrieve list of breakout rooms & participants
const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();

/*
* You can retrieve meetingIds and participantIds from the breakoutRoomsInfo object.
* Based on where the participant currently is, you can decide the sourceMeetingId and targetMeetingId.
*/

// Move participants to breakout rooms
const response = await meeting.connectedMeetings.moveParticipants(
  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in
  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved
  ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"], // participantIds, array of participant ids to be moved
);

// ブレイクアウトルームと参加者の一覧を取得します
meeting.connectedMeetings.getConnectedMeetings { result ->
    result.onSuccess { breakoutRoomsInfo ->
        /*
         * breakoutRoomsInfo から meetingIds と participantIds を取得できます。
         * 参加者が今いる場所に基づいて、sourceMeetingId と targetMeetingId を決めます。
         */

        // 参加者をブレイクアウトルームへ移動します
        meeting.connectedMeetings.moveParticipants(
            sourceMeetingId = "SOURCE_MEETING_ID",
            destinationMeetingId = "TARGET_MEETING_ID",
            participantIds = listOf("PARTICIPANT_ID_1", "PARTICIPANT_ID_2")
        ) { error ->
            if (error != null) {
                println("Failed to move participants: $error")
            } else {
                println("Participants moved successfully")
            }
        }
    }
}

// ブレークアウトルームと参加者の一覧を取得します
meeting.connectedMeetings.getConnectedMeetings { result in
    switch result {
    case .success(let breakoutRoomsInfo):
        /*
         * breakoutRoomsInfo から meetingIds と participantIds を取得できます。
         * 参加者の現在位置に基づいて、fromMeetingId と toMeetingId を決めます。
         */

        // 参加者をブレークアウトルームへ移動します
        meeting.connectedMeetings.moveParticipants(
            sourceMeetingId: "SOURCE_MEETING_ID",
            destinationMeetingId: "TARGET_MEETING_ID",
            participantIds: ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"]
        ) { error in
            if let error = error {
                print("Failed to move participants: \(error)")
            } else {
                print("Participants moved successfully")
            }
        }
    case .failure(let error):
        print("Failed to fetch breakout rooms: \(error.value.message)")
    }
}

// Retrieve list of breakout rooms & participants
const breakoutRoomsInfo = await meeting.connectedMeetings.getConnectedMeetings();

/*
* You can retrieve meetingIds and participantIds from the breakoutRoomsInfo object.
* Based on where the participant currently is, you can decide the sourceMeetingId and targetMeetingId.
*/

// Move participants to breakout rooms
const response = await meeting.connectedMeetings.moveParticipants(
  "SOURCE_MEETING_ID", // sourceMeetingId, meeting id where participants are currently in
  "TARGET_MEETING_ID", // targetMeetingId, meeting id where participants are to be moved
  ["PARTICIPANT_ID_1", "PARTICIPANT_ID_2"], // participantIds, array of participant ids to be moved
);

特定のプリセットの参加者をブレイクアウトルームへ移動する

ブレイクアウトルームを作成したら、参加者を各ルームに割り当てます。

const response = await meeting.connectedMeetings.moveParticipantsWithCustomPreset(
  "SOURCE_MEETING_ID", // sourceMeetingId。参加者が現在いるミーティングの ID
  "TARGET_MEETING_ID", // targetMeetingId。参加者の移動先ミーティングの ID
  [{ presetId: "PRESET_ID_1" }, { presetId: "PRESET_ID_2" }], // presetId フィールドを持つオブジェクトの配列
);

const response = await meeting.connectedMeetings.moveParticipantsWithCustomPreset(
  "SOURCE_MEETING_ID", // sourceMeetingId。参加者が現在いるミーティングの ID
  "TARGET_MEETING_ID", // targetMeetingId。参加者の移動先ミーティングの ID
  [{ presetId: "PRESET_ID_1" }, { presetId: "PRESET_ID_2" }], // presetId フィールドを持つオブジェクトの配列
);

const response = await meeting.connectedMeetings.moveParticipantsWithCustomPreset(
  "SOURCE_MEETING_ID", // sourceMeetingId。参加者が現在いるミーティングの ID
  "TARGET_MEETING_ID", // targetMeetingId。参加者の移動先ミーティングの ID
  [{ presetId: "PRESET_ID_1" }, { presetId: "PRESET_ID_2" }], // presetId フィールドを持つオブジェクトの配列
);

meeting.connectedMeetings.moveParticipantsWithCustomPreset(
    sourceMeetingId = "SOURCE_MEETING_ID",
    destinationMeetingId = "TARGET_MEETING_ID",
    participants = listOf(
        MoveParticipantPayload(id = "PARTICIPANT_ID_1", presetId = "PRESET_ID_1"),
        MoveParticipantPayload(id = "PARTICIPANT_ID_2", presetId = "PRESET_ID_2")
    )
) { error ->
    if (error != null) {
        println("Failed to move participants: $error")
    } else {
        println("Participants moved with custom preset successfully")
    }
}

meeting.connectedMeetings.moveParticipantsWithCustomPreset(
    sourceMeetingId: "SOURCE_MEETING_ID",
    destinationMeetingId: "TARGET_MEETING_ID",
    participants: [
        MoveParticipantPayload(id: "PARTICIPANT_ID_1", presetId: "PRESET_ID_1"),
        MoveParticipantPayload(id: "PARTICIPANT_ID_2", presetId: "PRESET_ID_2")
    ]
) { error in
    if let error = error {
        print("Failed to move participants: \(error)")
    } else {
        print("Participants moved with custom preset successfully")
    }
}

const response = await meeting.connectedMeetings.moveParticipantsWithCustomPreset(
  "SOURCE_MEETING_ID", // sourceMeetingId。参加者が現在いるミーティングの ID
  "TARGET_MEETING_ID", // targetMeetingId。参加者の移動先ミーティングの ID
  [{ presetId: "PRESET_ID_1" }, { presetId: "PRESET_ID_2" }], // presetId フィールドを持つオブジェクトの配列
);

ローカル参加者をブレイクアウトルームへ移動する

ローカル参加者を別のブレイクアウトルームへ移動する、または親ミーティングへ戻すときは、ほかの参加者を移動するときと同じ API を使い、ローカル参加者の ID を渡します。ホスト以外のローカル参加者がリクエストする場合は、適切な権限が必要です。ブレイクアウトルーム間の切り替えには canSwitchConnectedMeetings、親ミーティングへ戻るには canSwitchToParentMeeting が必要です。

ブレイクアウトルームのイベントを処理する

参加者がブレイクアウトルームへ移動すると、changingMeeting イベントのあとに meetingChanged イベントが発生します。メインミーティングとブレイクアウトルームのあいだを切り替えたときも、同じイベントが発生します。割り当てられたブレイクアウトルームには、参加者が自動で参加します。明示的にミーティングへ参加する必要はありません。

// changingMeeting イベントを待ち受け、ミーティング切り替え中であることを示すカスタム UI を表示します
meeting.connectedMeetings.on("changingMeeting", (meetingId) => {
	console.log("Switching to breakout room or main meeting with id: " + meetingId);
	console.log("Show a Custom UI to indicate that a meeting switch is happening");
});

// meetingChanged イベントを待ち受け、meeting オブジェクトの参照を更新します
meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
	console.log("Switched to breakout room or main meeting");
	console.log("Every action now should be performed on this meeting");
});

// changingMeeting イベントを待ち受け、ミーティング切り替え中であることを示すカスタム UI を表示します
meeting.connectedMeetings.on("changingMeeting", (meetingId) => {
	console.log("Switching to breakout room or main meeting with id: " + meetingId);
	console.log("Show a Custom UI to indicate that a meeting switch is happening");
});

// meetingChanged イベントを待ち受け、meeting オブジェクトの参照を更新します
meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
	console.log("Switched to breakout room or main meeting");
	console.log("Every action now should be performed on this meeting");
});

// changingMeeting イベントを待ち受け、ミーティング切り替え中であることを示すカスタム UI を表示します
meeting.connectedMeetings.on("changingMeeting", (meetingId) => {
	console.log("Switching to breakout room or main meeting with id: " + meetingId);
	console.log("Show a Custom UI to indicate that a meeting switch is happening");
});

// meetingChanged イベントを待ち受け、meeting オブジェクトの参照を更新します
meeting.connectedMeetings.on("meetingChanged", (newMeeting) => {
	console.log("Switched to breakout room or main meeting");
	console.log("Every action now should be performed on this meeting");
});

meeting.addConnectedMeetingsEventListener(object : RtkConnectedMeetingsEventListener {
    // ミーティング切り替え開始時に呼ばれます。読み込み中の UI を表示するために使います
    override fun onChangingMeeting(meetingId: String) {
        println("Switching to breakout room or main meeting with id: $meetingId")
        println("Show a custom UI to indicate that a meeting switch is happening")
    }

    // ミーティング切り替え完了時に呼ばれます
    override fun onMeetingChanged(error: MeetingError?) {
        if (error != null) {
            println("Failed to switch meeting: $error")
        } else {
            println("Switched to breakout room or main meeting successfully")
        }
    }

    override fun onStateUpdate(meetings: List<RtkConnectedMeeting>, parentMeeting: RtkConnectedMeeting?) {}
})

class MyListener: RtkConnectedMeetingsEventListener {
    // ミーティング切り替えが開始されたときに発火します。ローディング UI の表示に使います
    func onChangingMeeting(meetingId: String) {
        print("Switching to breakout room or main meeting with id: \(meetingId)")
        print("Show a custom UI to indicate that a meeting switch is happening")
    }

    // ミーティング切り替えが完了したときに発火します
    func onMeetingChanged(error: MeetingError?) {
        if let error = error {
            print("Failed to switch meeting: \(error)")
        } else {
            print("Switched to breakout room or main meeting successfully")
        }
    }

    func onStateUpdate(meetings: [RtkConnectedMeeting], parentMeeting: RtkConnectedMeeting?) {}
}

meeting.addConnectedMeetingsEventListener(MyListener())

useRealtimeKitClient フックは meetingChanged イベントを自動で処理します。ローカル参加者がブレイクアウトルームへ移動したとき、またはメインミーティングへ戻ったときに、アクティブなクライアント参照を切り替えます。追加の設定は不要です。

RtkMeeting UI Kit コンポーネントを使っている場合、遷移 UI（「Joining…」画面）も自動で処理されます。

切り替え中にカスタムの読み込み画面を表示するには、changingMeeting イベントをリッスンします。

useEffect(() => {
  if (!meeting) return;

  const onChangingMeeting = (meetingId: string) => {
    console.log("Switching to meeting:", meetingId);
    // Show a loading indicator
  };

  meeting.connectedMeetings.on("changingMeeting", onChangingMeeting);
  return () => meeting.connectedMeetings.removeListener("changingMeeting", onChangingMeeting);
}, [meeting]);

ブレイクアウトルームを閉じる

ブレイクアウトルームを閉じる（削除する）ことができます。対象ミーティングにいる参加者は、メインルームへ戻されます。

await meeting.connectedMeetings.deleteMeetings([
  "MEETING_ID_TO_CLOSE_1",
  "MEETING_ID_TO_CLOSE_2",
]);

この操作は stateUpdate イベントも発火し、ブレイクアウトルームと参加者のリストを更新します。

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
  console.log("stateUpdate", {meetings, parentMeeting});
});

// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object
console.log("Meetings List", meeting.connectedMeetings.meetings);
console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);

await meeting.connectedMeetings.deleteMeetings([
  "MEETING_ID_TO_CLOSE_1",
  "MEETING_ID_TO_CLOSE_2",
]);

この操作は stateUpdate イベントも発火し、ブレイクアウトルームと参加者のリストを更新します。

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
  console.log("stateUpdate", {meetings, parentMeeting});
});

// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object
console.log("Meetings List", meeting.connectedMeetings.meetings);
console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);

await meeting.connectedMeetings.deleteMeetings([
  "MEETING_ID_TO_CLOSE_1",
  "MEETING_ID_TO_CLOSE_2",
]);

この操作は stateUpdate イベントも発火し、ブレイクアウトルームと参加者のリストを更新します。

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
  console.log("stateUpdate", {meetings, parentMeeting});
});

// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object
console.log("Meetings List", meeting.connectedMeetings.meetings);
console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);

meeting.connectedMeetings.deleteMeetings(
    meetingIds = listOf("MEETING_ID_TO_CLOSE_1", "MEETING_ID_TO_CLOSE_2")
) { error ->
    if (error != null) {
        println("Failed to close breakout rooms: $error")
    } else {
        println("Breakout rooms closed successfully")
    }
}

onStateUpdate イベントも発生し、ブレイクアウトルームと参加者のリストが更新されます。

meeting.addConnectedMeetingsEventListener(object : RtkConnectedMeetingsEventListener {
    override fun onStateUpdate(meetings: List<RtkConnectedMeeting>, parentMeeting: RtkConnectedMeeting?) {
        println("State updated. Meetings: $meetings, Parent: $parentMeeting")

        // Alternatively, access state directly from the connectedMeetings object
        println("Meetings List: ${meeting.connectedMeetings.meetings}")
        println("Parent Meeting: ${meeting.connectedMeetings.parentMeeting}")
    }

    override fun onChangingMeeting(meetingId: String) {}
    override fun onMeetingChanged(error: MeetingError?) {}
})

meeting.connectedMeetings.deleteMeetings(meetingIds: ["MEETING_ID_TO_CLOSE_1", "MEETING_ID_TO_CLOSE_2"]) { error in
    if let error = error {
        print("Failed to close breakout rooms: \(error)")
    } else {
        print("Breakout rooms closed successfully")
    }
}

これにより onStateUpdate イベントも発生し、ブレイクアウトルームと参加者の一覧が更新されます。

class MyListener: RtkConnectedMeetingsEventListener {
    func onStateUpdate(meetings: [RtkConnectedMeeting], parentMeeting: RtkConnectedMeeting?) {
        print("State updated. Meetings: \(meetings), Parent: \(String(describing: parentMeeting))")

        // Alternatively, access state directly from the connectedMeetings object
        print("Meetings List: \(meeting.connectedMeetings.meetings)")
        print("Parent Meeting: \(String(describing: meeting.connectedMeetings.parentMeeting))")
    }

    func onChangingMeeting(meetingId: String) {}
    func onMeetingChanged(error: MeetingError?) {}
}

meeting.addConnectedMeetingsEventListener(MyListener())

await meeting.connectedMeetings.deleteMeetings([
  "MEETING_ID_TO_CLOSE_1",
  "MEETING_ID_TO_CLOSE_2",
]);

この操作は stateUpdate イベントも発火し、ブレイクアウトルームと参加者のリストを更新します。

meeting.connectedMeetings.on("stateUpdate", ({meetings, parentMeeting}) => {
  console.log("stateUpdate", {meetings, parentMeeting});
});

// Alternatively, you can access the meetings and parentMeeting from the connectedMeetings object
console.log("Meetings List", meeting.connectedMeetings.meetings);
console.log("Parent Meeting", meeting.connectedMeetings.parentMeeting);

次のステップ

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

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

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

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