Learn Skype Web SDK Day 28 : Listing Participants in a Conference

There are two ways to find out about who is in a conference which you have just joined. The first is to get a snapshot of the participant list. This can be useful if you need to quickly build up a picture of who is in the conference, perhaps to build a UI control showing the participants. You can do this by calling:

conversation.participants

which is a collection of the different participants. For instance, conversation.participants.size() will tell you how many participants are in the conference. You can also iterate through each item in the collection and refer to the .person object of each one.

However, to truly make an interactive display you need to know when people join and leave. There are .added and .removed events which you can subscribe to on the participants object. You should do this before you join the conference (i.e. before you call start on whatever service you’re using). In this example I’m using the chatService:

conversation.participants.added(function (participant){
$("#lblPartitcipants").append('<li><b>' + "Joined:" + '</b>&amp;nbsp; ' + participant.person.displayName() + '</li>');
});

conversation.participants.removed(function (participant){
$("#lblPartitcipants").append('<li><b>' + "Left:" + '</b>&amp;nbsp; ' + participant.person.displayName() + '</li>');
});

conversation.chatService.start();

For each participant, you can also subscribe to their state. Valid values are “Disonnected”, “Connecting”, “InLobby”, “Connected”, “Disconnected”, “Disconnecting”. You can also read whether or not they have joined as an anonymous user by using the isAnonymous flag, and their role in the conference. The role object (valid values are “Attendee”, “Leader”) is settable as well as gettable – so you can use this to promote or demote attendees.

The code sample for today’s post covers both of these approaches, by giving you an initial count of the number of participants, then notifying you of each joiner and leaver:

<div class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="username" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogIn">Log in</button>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogOut">Log out</button>
</div>
</div>
</div>

<div>
<span id="loginStatus"></span>
</div>

<hr/>

<div class="form-horizontal">
<div class="form-group">
<label for="confURI" class="col-sm-2 control-label">Join Conference URI:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="confURI" placeholder="sip:[email protected];gruu;opaque=app:conf:focus:id:Q740UACR">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnStartConversation" disabledvvv="disabled">Join</button>
</div>
</div>
</div>

<div>
Conversation State: <span id="lblConversationState"></span><br/>
Participants: <ul id='lblPartitcipants'></ul>

<hr/>

<div id="footer"></div>

<!-- This is not needed for the samples to run, but adds standard headers and footers to the samples, to display title, instructions, about etc.
If you're taking this code and using it yourself, you can remove this.-->
<script type="text/javascript" src="../../assets/layoutcodesample-min.js"></script>

<script type="text/javascript">

<!-- These variables are only needed for laying out the code sample, they are not part of the sample code. -->
var pageTitle = 'Listing Participants in a Conference';
var blogPostLocation = "http://thoughtstuff.co.uk";
var githubLocation = "http://github.com";

var client;
$(function () {
'use strict';

Skype.initialize({
apiKey: 'SWX-BUILD-SDK',
}, function (api) {
client = new api.application();

// whenever client.state changes, display its value
client.signInManager.state.changed(function (state) {
$('#loginStatus').text("Login State: " + state);
});

}, function (err) {
alert('Error loading Skype Web SDK: ' + err);
});

$('#btnLogIn').click(function () {

// start signing in
client.signInManager.signIn({
username: $('#username').val(),
password: $('#password').val()
}).then(function () {
//log in worked!
alert('Logged in!');
$('#btnStartConversation').prop('disabled', false);

}, function (error) {
//Something went wrong.
alert(error);
});
});

$('#btnLogOut').click(function () {
// start signing out
client.signInManager.signOut()
.then(function () {
//log out worked!
alert('Logged out!');
$('#btnStartConversation').prop('disabled', true);
$('#btnSendIM').prop('disabled', true);
}, function (error) {
//Something went wrong.
alert(error);
});
});

$('#btnStartConversation').click(function () {
StartConversation();
});

function StartConversation () {
var conferenceURI = $('#confURI').val();
conversation = client.conversationsManager.getConversationByUri(conferenceURI);

//register for the conversation state changing to connected.
conversation.chatService.state.changed(function(newState){
$('#lblConversationState').text(newState);
if (newState == 'Connected') {
var numOfParticipants = conversation.participants.size();
alert('There are ' + numOfParticipants + ' people in the conference.');
}
});

conversation.participants.added(function (participant){
participant.role.get().then(function (role){

$("#lblPartitcipants").append('<li><b>' + "Joined:" + '</b>&amp;nbsp; ' + participant.person.displayName() + '. Role:' + role + '</li>');

});
});

conversation.participants.removed(function (participant){
$("#lblPartitcipants").append('<li><b>' + "Left:" + '</b>&amp;nbsp; ' + participant.person.displayName() + '</li>');
});

conversation.chatService.start();

}

});

</script>

Demo Online

You can try this code out against your own Skype for Business environment by going to the demo page. From here you can also download the code from GitHub if you want to host it locally, or take it and use it in your next project.

Good to Know

• Before you can run this code, make sure you've read my post on all the prerequisites you need to have in place.
• You don't have to copy the code from here - it's all on GitHub!
• If you liked this post, there are more! Check out the dedicated Skype for Web SDK Collection page, or signup to the newsletter
• Need a Skype for Web SDK solution, but not in a position to build yourself? Hire me!

Written by Tom Morgan

Tom is a Microsoft Teams Platform developer and Microsoft MVP who has been blogging for over a decade. Find out more.

---

Buy the book: Building and Developing Apps & Bots for Microsoft Teams. Now available to purchase online with free updates.

Related posts:

Learn Skype Web SDK Day 26 : Creating a Conference Learn Skype Web SDK Day 27 : Joining a Conference via URI Learn Skype Web SDK Day 13 : Starting a New IM Conversation Learn Skype Web SDK Day 25 : Listing & Changing Devices Learn Skype Web SDK Day 2 : Logging Out