Circular video tiles with an animated border for the active speaker

Options
Lazer
Lazer Dailynista
in Code Share

Threw together a small example to show how someone could implement some tile styling (making tiles circular), and consume Daily's active speaker events to create an animated border around the active speaker. The border color also serves as an indicator to whether someone has their mic on or off (yellow for mic on, black for mic off, color morph for active speaker): https://codesandbox.io/s/github/lazeratops/daily-tile-style

This is by no means polished! Just something quick to show a rough idea. Let me know if you run into any issues.

Couple of notes:

  • The "active-speaker-change" event handler is the one I rely on to tell me when there is a new active speaker.
  • I keep some state to keep track of current active speaker. This is to know which video element to remove the "active" class from when the active speaker change.
  • In index.ts, I'm specifying userMediaVideoConstraints when instantiating the call object because we know our tiles are going to be of a certain (small) size.


Tagged:

Categories