Display active speakers·续

Display active speakers·续

Refer to Display participant videos to learn how to render the participant video in your UI.

The SDK emits a participantsUpdate event on the active map when the set of active speakers changes. Listen to this event, retrieve the updated array, and re-render your grid:

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

(Optional) If your application needs to respond when a specific participant is added to or removed from the active map, listen for participantJoined and participantLeft on meeting.participants.active map.

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);
});

Use the active map to show multiple participants with prominent audio activity, typically in a grid layout.

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

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

Refer to Display participant videos to learn how to render the participant video in your UI.

The SDK emits a participantsUpdate event on the active map when the set of active speakers changes. Listen to this event, retrieve the updated array, and re-render your grid:

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);
});

Use the active list to show multiple participants with prominent audio activity, in a grid layout:

val activeParticipants = meeting.participants.active

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

Refer to Display participant videos to learn how to render the participant video in your UI.

The SDK emits an event when the set of active speakers changes. Listen to this event using RtkParticipantsEventListener:

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

Use the active list to show multiple participants with prominent audio activity, typically in a grid layout:

let activeParticipants = meeting.participants.active

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

Refer to Display participant videos to learn how to render the participant video in your UI.

The SDK emits an event when the set of active speakers changes. Listen to this event by implementing RtkParticipantsEventListener:

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

meeting.addParticipantsEventListener(self)

Use the active map to show multiple participants with prominent audio activity, typically in a grid layout. Access the current active participants with the 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
});

The useRealtimeKitSelector hook automatically updates your component when the set of active speakers changes.

Refer to Display participant videos to learn how to render the participant video in your UI.

The SDK also emits a participantsUpdate event on the active map when the set of active speakers changes. For imperative updates or side effects when the active map changes, listen to this event:

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);
});

Visualize audio activity

You can create custom audio visualizations using audio data from a participant's audio track. Extract volume information from the audio track to calculate amplitude series. Use this data to render waveforms, speech indicators, or audio level meters in your UI.

Audio activity visualization is not supported on Android.

Audio activity visualization is not supported on iOS.

Audio activity visualization is not supported on React Native.

Meeting object explained - Understand the meeting object structure and available properties.
Remote participant - Learn more about remote participants in a session and how to display their video.

Was this helpful?

YesNo

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/display-active-speakers/#page","headline":"Display active speakers","description":"Detect and display active speakers in RealtimeKit meetings using the Core SDK.","url":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/display-active-speakers/","inLanguage":"en","image":"https://developers.cloudflare.com/realtime/realtimekit/humans/core/display-active-speakers/og.png?v=b094da7e86dcd500","dateModified":"2026-10-19","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: End a RealtimeKit session for all participants and stop active recordings. title: End a session image: https://developers.cloudflare.com/realtime/realtimekit/humans/core/end-a-session/og.png?v=893bca79b6b5d26c

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/realtime/llms.txt
Use this file to discover all available pages before exploring further.

Display active speakers·续

Display active speakers·续

Visualize audio activity

Related resources

On this page