RealtimeKit 会自动检测并跟踪会议中正在发言的参与者。您可以根据设计需求，在应用程序 UI 中显示单个活跃发言者或多个活跃发言者。
RealtimeKit 中的活跃发言者是在任何给定时刻具有显著音频活动的远程参与者。SDK 维护两种类型的数据以帮助您构建 UI：
- 活跃发言者（Active speaker） — 当前发言最显著的单个远程参与者。
- 活跃参与者（Active participants） — 具有最显著音频活动的一组远程参与者。
SDK 会随着发言活动的变化自动更新这些属性并订阅参与者媒体。它会优先考虑显著的音频活动，因此如果某个当前在您的 UI 中不可见的参与者的音频变得更加活跃，他可以替换可见的参与者。
active 映射中的最大参与者人数比本地参与者的 预设 中配置的网格大小少一人。
这会在您的 UI 中为本地参与者预留空间。例如，如果网格大小为 6，则 active 映射最多包含 5 个远程参与者。
使用 lastActiveSpeaker 在您的 UI 中显示最近活跃的参与者。使用 useRealtimeKitSelector hook 访问当前活跃的发言者：
const activeSpeaker = useRealtimeKitSelector((meeting) => {
const activeSpeakerId = meeting.participants.lastActiveSpeaker;
return meeting.participants.joined.get(activeSpeakerId);
});
if (activeSpeaker) {
// Render the active speaker video
}useRealtimeKitSelector hook 会自动更新您的组件当活跃发言者发生变化时。
请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
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
}请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当其他参与者成为活跃发言者时，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
}请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当其他参与者成为活跃发言者时，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
}请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当其他参与者成为活跃发言者时，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
}请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当其他参与者成为活跃发言者时，SDK 会触发一个事件。通过实现 RtkParticipantsEventListener 监听此事件：
extension MeetingViewModel: RtkParticipantsEventListener {
func onActiveSpeakerChanged(participant: RtkRemoteParticipant?) {
// Update your UI to display the new active speaker
}
}
meeting.addParticipantsEventListener(self)使用 activeSpeaker 在您的 UI 中显示最近活跃的参与者。
Flutter SDK 通过 onActiveSpeakerChanged 事件监听器跟踪活跃发言者：
class ParticipantsNotifier extends RtkParticipantsEventListener {
@override
void onActiveSpeakerChanged(RtkRemoteParticipant? participant) {
if (participant != null) {
// Update your UI to display the new active speaker
}
}
}
meeting.addParticipantsEventListener(ParticipantsNotifier());请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
使用 lastActiveSpeaker 在您的 UI 中显示最近活跃的参与者。使用 useRealtimeKitSelector hook 访问当前活跃的发言者：
const activeSpeaker = useRealtimeKitSelector((meeting) => {
const activeSpeakerId = meeting.participants.lastActiveSpeaker;
return meeting.participants.joined.get(activeSpeakerId);
});
if (activeSpeaker) {
// Render the active speaker video
}useRealtimeKitSelector hook 会自动更新您的组件当活跃发言者发生变化时。
请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
SDK 还会对 meeting.participants 触发 activeSpeaker 事件当其他参与者成为活跃发言者时。对于命令式更新或副作用，请监听此事件：
meeting.participants.on("activeSpeaker", (participant) => {
// Update your UI or trigger side effects
});使用 active 映射来显示具有显著音频活动的多个参与者，通常采用网格布局。使用 useRealtimeKitSelector hook 访问当前活跃的参与者：
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 hook 会自动更新您的组件当活跃发言者集合发生变化时。
请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当活跃发言者集合发生变化时，SDK 还会对 active 映射触发 participantsUpdate 事件。有关 active 映射更改时的命令式更新或副作用，请监听此事件：
meeting.participants.active.on("participantsUpdate", () => {
const activeParticipants = meeting.participants.active.toArray();
// Perform side effects
});（可选）如果您的应用程序需要在特定参与者被添加或从活跃映射中移除时做出响应，请监听 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
});请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当活跃发言者集合发生变化时，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 映射上的 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
});请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当活跃发言者集合发生变化时，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 映射上的 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 列表在网格布局中显示具有显著音频活动的多个参与者：
val activeParticipants = meeting.participants.active
// Render active participants in your grid
activeParticipants.forEach { participant ->
// Render participant video tile
}请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当活跃发言者集合发生变化时，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
}请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当活跃发言者集合发生变化时，SDK 会触发一个事件。通过实现 RtkParticipantsEventListener 监听此事件：
extension MeetingViewModel: RtkParticipantsEventListener {
func onActiveParticipantsChanged(active: [RtkRemoteParticipant]) {
// Update your grid UI with the new active participants
}
}
meeting.addParticipantsEventListener(self)使用 active 列表来显示具有显著音频活动的多个参与者，通常采用网格布局：
final activeParticipants = meeting.participants.active;
// Render active participants in your grid
for (var participant in activeParticipants) {
// Render participant video tile
}请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当活跃发言者集合发生变化时，SDK 会触发一个事件。使用 RtkParticipantsEventListener 监听此事件：
class ParticipantsNotifier extends RtkParticipantsEventListener {
@override
void onActiveParticipantsChanged(List<RtkRemoteParticipant> active) {
// Update your grid UI with the new active participants
}
}
meeting.addParticipantsEventListener(ParticipantsNotifier());使用 active 映射来显示具有显著音频活动的多个参与者，通常采用网格布局。使用 useRealtimeKitSelector hook 访问当前活跃的参与者：
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 hook 会自动更新您的组件当活跃发言者集合发生变化时。
请参阅 显示参与者视频 以了解如何在 UI 中渲染参与者视频。
当活跃发言者集合发生变化时，SDK 还会对 active 映射触发 participantsUpdate 事件。有关 active 映射更改时的命令式更新或副作用，请监听此事件：
meeting.participants.active.on("participantsUpdate", () => {
const activeParticipants = meeting.participants.active.toArray();
// Perform side effects
});（可选）如果您的应用程序需要在特定参与者被添加或从活跃映射中移除时做出响应，请监听 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);
});您可以使用来自参与者音频轨道的音频数据创建自定义音频可视化。从音频轨道中提取音量信息以计算振幅序列。使用此数据在您的 UI 中渲染波形、语音指示器或音频电平表。
您可以使用来自参与者音频轨道的音频数据创建自定义音频可视化。从音频轨道中提取音量信息以计算振幅序列。使用此数据在您的 UI 中渲染波形、语音指示器或音频电平表。
您可以使用来自参与者音频轨道的音频数据创建自定义音频可视化。从音频轨道中提取音量信息以计算振幅序列。使用此数据在您的 UI 中渲染波形、语音指示器或音频电平表。
Android 不支持音频活动可视化。
iOS 不支持音频活动可视化。
Flutter 不支持音频活动可视化。
React Native 不支持音频活动可视化。