Company
Date Published
Author
Kimberlee Johnson
Word count
1699
Language
English
Hacker News points
None

Summary

This post walks through how to implement an active speaker spotlight in a custom React app using Daily React Hooks, a ready-to-use embeddable video chat interface. The demo uses the `active-speaker-change` event to update the app state and render the current speaker more prominently than other participants. The `ParticipantsProvider` component listens for this event and updates the app's active speaker state, which is then used to calculate the `currentSpeaker` value. This value is used to display the active speaker in a `SpeakerView` component, while other participants are displayed in a `ParticipantBar` component. The demo also handles screen sharing and edge cases where participants may leave or unmute, using various techniques such as sorting and reversing lists of participants, and debouncing scrolling events.