アクティブスピーカーを表示する

RealtimeKit は、ミーティングで発言中の参加者を自動で検出して追跡します。デザイン要件に応じて、アクティブスピーカーを 1 人だけ表示するか、複数人を表示できます。

RealtimeKit のアクティブスピーカーは、その時点で音声活動が目立つリモート参加者です。SDK は、UI の構築に使える次の 2 種類のデータを保持します。

アクティブスピーカー — 現在もっとも目立って発言しているリモート参加者 1 人です。
アクティブな参加者 — 音声活動がもっとも目立つリモート参加者の集合です。

SDK は、発言状況の変化に合わせてこれらのプロパティを自動更新し、参加者のメディアを購読します。目立つ音声活動を優先するため、UI に表示していない参加者が、より活発に発言すると、表示中の参加者と入れ替わることがあります。

active マップの参加者数の上限は、ローカル参加者の Preset で設定したグリッドサイズより 1 人少ない値です。UI 上でローカル参加者の枠を確保するためです。たとえばグリッドサイズが 6 の場合、active マップには最大 5 人のリモート参加者が入ります。

アクティブスピーカーを 1 人表示する

lastActiveSpeaker を使い、直近でもっとも活発に発言した参加者を UI に表示します。useRealtimeKitSelector フックで現在のアクティブスピーカーを取得します。

const activeSpeaker = useRealtimeKitSelector((meeting) => {
	const activeSpeakerId = meeting.participants.lastActiveSpeaker;
	return meeting.participants.joined.get(activeSpeakerId);
});

if (activeSpeaker) {
	// Render the active speaker video
}

useRealtimeKitSelector フックは、アクティブスピーカーが変わるとコンポーネントを自動で更新します。

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、別の参加者がアクティブスピーカーになると、meeting.participants で activeSpeaker イベントも発行します。命令的な更新や副作用が必要な場合は、このイベントをリッスンします。

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {
	const activeSpeaker = meeting.participants.joined.get(peerId);
	// Update your UI or trigger side effects
});

lastActiveSpeaker を使い、直近でもっとも活発に発言した参加者を UI に表示します。

lastActiveSpeaker プロパティで参加者 ID を取得し、参加済み参加者のマップから参加者オブジェクトを取り出します。

const activeSpeakerId = meeting.participants.lastActiveSpeaker;
const activeSpeaker = meeting.participants.joined.get(activeSpeakerId);

if (activeSpeaker) {
	// Render the active speaker video
}

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、別の参加者がアクティブスピーカーになると、meeting.participants で activeSpeaker イベントを発行します。

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {
	const activeSpeaker = meeting.participants.joined.get(peerId);
	// Update your UI to display the new active speaker
});

lastActiveSpeaker を使い、直近でもっとも活発に発言した参加者を UI に表示します。

lastActiveSpeaker プロパティで参加者 ID を取得し、参加済み参加者のマップから参加者オブジェクトを取り出します。

const activeSpeakerId = meeting.participants.lastActiveSpeaker;
const activeSpeaker = meeting.participants.joined.get(activeSpeakerId);

if (activeSpeaker) {
	// Render the active speaker video
}

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、別の参加者がアクティブスピーカーになると、meeting.participants で activeSpeaker イベントを発行します。

meeting.participants.on("activeSpeaker", ({ peerId, volume }) => {
	const activeSpeaker = meeting.participants.joined.get(peerId);
	// Update your UI to display the new active speaker
});

activeSpeaker を使い、直近でもっとも活発に発言した参加者を UI に表示します。

activeSpeaker プロパティで現在のアクティブスピーカーを取得します。

val activeSpeaker = meeting.participants.activeSpeaker

if (activeSpeaker != null) {
	// Render the active speaker video
}

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、別の参加者がアクティブスピーカーになるとイベントを発行します。RtkParticipantsEventListener でこのイベントをリッスンします。

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {
	override fun onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {
		// Update your UI to display the new active speaker
	}
})

activeSpeaker を使い、直近でもっとも活発に発言した参加者を UI に表示します。

activeSpeaker プロパティで現在のアクティブスピーカーを取得します。

let activeSpeaker = meeting.participants.activeSpeaker

if let activeSpeaker = activeSpeaker {
	// Render the active speaker video
}

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、別の参加者がアクティブスピーカーになるとイベントを発行します。RtkParticipantsEventListener を実装して、このイベントをリッスンします。

extension MeetingViewModel: RtkParticipantsEventListener {
	func onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {
		// Update your UI to display the new active speaker
	}
}

meeting.addParticipantsEventListener(self)

const activeSpeaker = useRealtimeKitSelector((meeting) => {
	const activeSpeakerId = meeting.participants.lastActiveSpeaker;
	return meeting.participants.joined.get(activeSpeakerId);
});

if (activeSpeaker) {
	// Render the active speaker video
}

useRealtimeKitSelector フックは、アクティブスピーカーが変わるとコンポーネントを自動で更新します。

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

meeting.participants.on("activeSpeaker", (participant) => {
	// Update your UI or trigger side effects
});

複数のアクティブスピーカーを表示する

音声活動が目立つ複数の参加者を、通常はグリッドレイアウトで表示するには active マップを使います。useRealtimeKitSelector フックで現在のアクティブな参加者を取得します。

const activeMap = useRealtimeKitSelector(
	(meeting) => meeting.participants.active,
);

const activeParticipants = activeMap.toArray();

// Render active participants in your grid
activeParticipants.forEach((participant) => {
	// Render participant video tile
});

useRealtimeKitSelector フックは、アクティブスピーカーの集合が変わるとコンポーネントを自動で更新します。

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、アクティブスピーカーの集合が変わると、active マップで participantsUpdate イベントも発行します。active マップの変化に応じて命令的な更新や副作用を行う場合は、このイベントをリッスンします。

meeting.participants.active.on("participantsUpdate", () => {
	const activeParticipants = meeting.participants.active.toArray();
	// Perform side effects
});

（任意）特定の参加者が active マップに追加または削除されたときに反応する必要がある場合は、meeting.participants.active マップで participantJoined と participantLeft をリッスンします。

meeting.participants.active.on("participantJoined", (participant) => {
	console.log("Participant added to active map:", participant.id);
});

meeting.participants.active.on("participantLeft", (participant) => {
	console.log("Participant removed from active map:", participant.id);
});

音声活動が目立つ複数の参加者を、通常はグリッドレイアウトで表示するには active マップを使います。

const activeParticipants = meeting.participants.active.toArray();

// Render active participants in your grid
activeParticipants.forEach((participant) => {
	// Render participant video tile
});

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、アクティブスピーカーの集合が変わると、active マップで participantsUpdate イベントを発行します。このイベントをリッスンし、更新後の配列を取得してグリッドを再描画します。

meeting.participants.active.on("participantsUpdate", () => {
	const activeParticipants = meeting.participants.active.toArray();
	// Update your grid UI with the new active participants
});

meeting.participants.active.on("participantJoined", (participant) => {
	console.log("Participant added to active map:", participant.id);
});

meeting.participants.active.on("participantLeft", (participant) => {
	console.log("Participant removed from active map:", participant.id);
});

音声活動が目立つ複数の参加者を、通常はグリッドレイアウトで表示するには active マップを使います。

const activeParticipants = meeting.participants.active.toArray();

// Render active participants in your grid
activeParticipants.forEach((participant) => {
	// Render participant video tile
});

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

meeting.participants.active.on("participantsUpdate", () => {
	const activeParticipants = meeting.participants.active.toArray();
	// Update your grid UI with the new active participants
});

meeting.participants.active.on("participantJoined", (participant) => {
	console.log("Participant added to active map:", participant.id);
});

meeting.participants.active.on("participantLeft", (participant) => {
	console.log("Participant removed from active map:", participant.id);
});

音声活動が目立つ複数の参加者をグリッドレイアウトで表示するには active リストを使います。

val activeParticipants = meeting.participants.active

// Render active participants in your grid
activeParticipants.forEach { participant ->
	// Render participant video tile
}

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、アクティブスピーカーの集合が変わるとイベントを発行します。RtkParticipantsEventListener でこのイベントをリッスンします。

meeting.addParticipantsEventListener(object : RtkParticipantsEventListener {
	override fun onActiveParticipantsChanged(active: List<RtkRemoteParticipant>) {
		// Update your grid UI with the new active participants
	}
})

音声活動が目立つ複数の参加者を、通常はグリッドレイアウトで表示するには active リストを使います。

let activeParticipants = meeting.participants.active

// Render active participants in your grid
for participant in activeParticipants {
	// Render participant video tile
}

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

SDK は、アクティブスピーカーの集合が変わるとイベントを発行します。RtkParticipantsEventListener を実装して、このイベントをリッスンします。

extension MeetingViewModel: RtkParticipantsEventListener {
	func onActiveParticipantsChanged(active: [RtkRemoteParticipant]) {
		// Update your grid UI with the new active participants
	}
}

meeting.addParticipantsEventListener(self)

const activeMap = useRealtimeKitSelector(
	(meeting) => meeting.participants.active,
);

const activeParticipants = activeMap.toArray();

// Render active participants in your grid
activeParticipants.forEach((participant) => {
	// Render participant video tile
});

useRealtimeKitSelector フックは、アクティブスピーカーの集合が変わるとコンポーネントを自動で更新します。

参加者の動画の描画方法は、参加者の動画を表示するを参照してください。

meeting.participants.active.on("participantsUpdate", () => {
	const activeParticipants = meeting.participants.active.toArray();
	// Perform side effects
});

meeting.participants.active.on("participantJoined", (participant) => {
	console.log("Participant added to active map:", participant.id);
});

meeting.participants.active.on("participantLeft", (participant) => {
	console.log("Participant removed from active map:", participant.id);
});

アクティブスピーカーを表示する

アクティブスピーカーを 1 人表示する

複数のアクティブスピーカーを表示する

音声活動を可視化する

関連リソース