• Docs
  • Web SDK
  • Store States
  • Active Speaker

Active Speaker States

You can access the volume of every user in the room. In store, peerId is mapped to the volume of the user. You can use this to show the volume of the user in the room. We have also added a new state called activeSpeaker which will be updated with the peerId of the active speaker in the room.

States

type IActiveSpeakerState {
    dominantSpeaker: string;
    peerIdToVolume: Record<string, number>;
}
  • dominantSpeaker - peerId of the active speaker in the room.
  • peerIdToVolume - peerId mapped with the volume of the user.

Example

You can access the room state using the useHuddleStore hook.

 
import { useHuddleStore } from "huddle01-client/hooks";
 
interface Props {
    peerId: string;
}
 
const Component = ({ peerId }) => {
    const activeSpeakerPeerId = useHuddleStore((state) => state.activeSpeaker);
 
    return (
        <div>
            {peerId === activeSpeakerPeerId && <div>Active Speaker</div>}
            ...
        <div />
    )
}

NOTE: Doing this will subscribe activeSpeaker state to that component and will re-render the component when the state changes. Pro Tip: You dont need to add useEffect to subscribe to the state and change certains states based on this, it is already done for you.

ChatNetworks