Participant Notification Sound
It's a common practice to give users a sound indication that a participant has joined or left their call. Fortunately it's very easy to do this since the SDK will fire events indicating that someone has joined or left a call. All we need to do is subscribe to these events.
But first, let's implement a helper function that will play a sound for us. We'll use the Audio
constructor to create an off-screen HTMLAudioElement
for each sound we want to play. We'll cache these audio elements so they don't have to be recreated each time we play a sound.
const audioCache = new Map<string, () => Promise<void>>();
async function playSoundFromUrl(url: string) {
let doPlay = audioCache.get(url);
if (!doPlay) {
// Wait for an audio file to load
const canPlayPromise = new Promise<HTMLAudioElement>((resolve) => {
const audio = new Audio(url);
audio.addEventListener('canplaythrough', () => resolve(audio), {
once: true,
});
});
doPlay = async () => {
const audio = await canPlayPromise;
await audio.play();
};
// Save to cache
audioCache.set(url, doPlay);
}
await doPlay();
}
Now it's just a matter of subscribing to the call.session_participant_joined
and call.session_participant_left
events. We can do this from a custom hook:
function useNotificationSounds() {
const call = useCall();
// We don't want to play the sound when the user joins themself
const isSelf = useCallback(
(userId: string) => userId === call?.currentUserId,
[call],
);
useEffect(() => {
if (!call) {
return;
}
const unlistenJoin = call.on('call.session_participant_joined', (event) => {
if (!isSelf(event.participant.user.id)) {
playSoundFromUrl('joined.mp3');
}
});
const unlistenLeft = call.on('call.session_participant_left', (event) => {
if (!isSelf(event.participant.user.id)) {
playSoundFromUrl('left.mp3');
}
});
return () => {
unlistenJoin();
unlistenLeft();
};
}, [call, isSelf]);
}
And that's all there is to it! Add this custom hook anywhere in a call UI (inside <StreamCall>
), and you'll get notification sounds when participants join and leave.