Learn Azure Communication Services Day 13 – Managing the Participant List

Today, we’re going to look at how to read the participant list. Azure Communication Services provides an array of remote participants (so, not including you) in a call, plus events for when that array changes (when someone joins or leaves). I’ve taken the Day 8 sample (Teams Meeting Interop join) and built on it because it’s easier to drop in and our of a Teams meeting and see the participant list updated in Azure Communication Services.

Because people can join and leave at any time, most implementations will use the event remoteParticipantsUpdated to subscribe to any changes. There are two approaches you can take. The first is to query the arrays of added and removed participants which are passed to the callback function. These two arrays are passed every time and describe any changes to the participant list. You can use this information to either announce joiners/leavers or keep an existing participant list up to date.

The second approach is to get the full, updated participant list from call.remoteParticipants and rebuild it from there, overwriting anything you previously had.

I’ve used both approaches in the sample code: approach 1 to announce new joiners/leavers, and approach 2 to display a basic participant list.

If you want to dig deeper then check out all the other properties and events associated with a remoteParticipant.

Here’s the code: don’t forget, on Line 19, replace the placeholder text with the full URL of your Azure Function created in Day 3, including the code parameter:

index.html

client.js

Testing it out

Similar to previous days, this one is relatively straightforward to test out. As before, use a command-line to run this command then browse to the sample application in your browser (usually http://localhost:8080):

npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map

Try joining a Teams meeting, either an empty one, or one that already has people in it. Try joining and leaving that meeting using the Teams client to see the effect on the participant list, and the alerts about joiners and leavers.

What’s the code doing?

Everything new is happening within the event handler for call.remoteParticipantsUpdated. Approach 1 is to look at the added and removed arrays, each of which contain a collection of zero or more RemoteParticipant objects.

Approach 2 is to rebuild a participant list from call.remoteParticipants, which contains a full array of all RemoteParticipant objects.

---

Today, we explored the participant list in Azure Communication Services. Tomorrow we’re going to look at showing video and screen share content. Links for all blog posts can be found at learnACS.dev. You can also subscribe to my YouTube channel for videos about ACS (and much more!).