Manage participants

Note: This tutorial comes after the Integrate video. It is highly recommended to follow the previous tutorial before going through this one.

You have a basic video conference application with which you can video call your friends using a conference room. But you don't control or have any information about conference participants.

This tutorial will take you through some simple steps to follow to have a full participants' list with the possibility to mute and unmute them.

Note: If you want to skip this tutorial, you can get full access to the source code at the end of it.

Step 1: Create the participants' list

Note: Participants' list will only be visible when the user has joined the conference.

Open the index.html file and add participants <div> and participants-list <ul> elements in join-panel, right after the actions div:

    <div id="actions">...</div>
    <!-- Add participants div just after actions div -->
    <div id="participants">
        <h3>Participants</h3>
        <ul id="participants-list"></ul>
    </div>
    ...

Implement the participants' list in the ViewController.swift.

Layout modification

class ViewController: UIViewController {
    ...

    // Participant label.
    var participantsLabel: UILabel!
    
    ...
}

Interface linking

...

func initConferenceUI() {
    ...

    // Participants label.
    participantsLabel = UILabel(frame: CGRect(x: 100, y: videosView1.frame.origin.y + videosView1.frame.height + 16, width: 200, height: 30))
    participantsLabel.backgroundColor = .lightGray
    participantsLabel.adjustsFontSizeToFitWidth = true
    participantsLabel.minimumScaleFactor = 0.1
    self.view.addSubview(participantsLabel)
}

...

@objc func leaveButtonAction(sender: UIButton!) {
    VoxeetSDK.shared.conference.leave { error in
    
        ...
        self.participantsLabel.text = nil /* Reset participants label */
        
    }
}

...

Layout modification

Edit the main_activity.xml with the following items :

<LinearLayout ...>
    ...

    <!-- Step 6. Please put below the layout modification with the view participants step -->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="users :" />

    <EditText
        android:id="@+id/participants"
        android:enabled="false"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Interface linking

Fields for MainActivity

@Bind(R.id.participants)
EditText participants;

Methods for MainActivity

public void updateUsers() {
    List<User> participants = VoxeetSDK.conference().getUsers();
    List<String> names = new ArrayList<>();


    for (User participant : participants) {
        names.add(participant.getUserInfo().getName());
    }

    participants.setText(TextUtils.join(",", names));
}

Step 2: Add a participant to the list

Note: The participants' list will be updated upon receiving the participantJoined and participantLeft events. The same way the participants' streams were added in the previous tutorial.

Open the ui.js file and create a function named addParticipantNode that will add the participant's name to the participants-list element.

const addParticipantNode = (participant) => {
    const participantsList = document.getElementById('participants-list');

    // if the participant is the current session user, don't add himself to the list
    if (participant.id === VoxeetSDK.session.participant.id) return;

    let participantNode = document.createElement('li');
    participantNode.setAttribute('id', 'participant-' + participant.id);
    participantNode.innerText = `${participant.info.name}`;

    participantsList.appendChild(participantNode);
};

Then, open client.js file and call the addParticipantNode upon receiving the streamAdded event.

     voxeet.on('streamAdded', (participant, stream) => {
        ...
        // Call addParticipantNode here
        addParticipantNode(participant);
    });

...

extension ViewController: VTConferenceDelegate {
    ...

    func streamUpdated(participant: VTParticipant, stream: MediaStream) {
        ...
        
        // Update participants label.
        updateParticipantsLabel()
    }
    
    func updateParticipantsLabel() {
        // Update participants label.
        let participants = VoxeetSDK.shared.conference.current?.participants
            .filter({ $0.streams.isEmpty == false }) /* Gets only participants with stream */
        let usernames = participants?.map({ $0.info.name ?? "" })
        participantsLabel.text = usernames?.joined(separator: ", ")
    }
}

Logic implementation

Implementation for the related event

This step will register our ui update call to the participant added related event :

  • UserAddedEvent
@Subscribe(threadMode = ThreadMode.MAIN)
public void onEvent(UserAddedEvent event) {
    updateUsers();
}

Step 3: Remove a participant from the list

Open the ui.js file and create a function named removeParticipantNode that removes child nodes of the participants-list based on the participant ID:

const removeParticipantNode = (participant) => {
    let participantNode = document.getElementById('participant-' + participant.id);

    if (participantNode) {
        participantNode.parentNode.removeChild(participantNode);
    }
};

Then, open client.js file and update the streamRemoved handler by calling the removeParticipantNode:

const main = () => {
    /* Events handlers */
    ...
    voxeet.on('streamRemoved', (participant) => {
        ...
        removeParticipantNode(participant);
    });
};

...

extension ViewController: VTConferenceDelegate {
    ...
    
    func streamRemoved(participant: VTParticipant, stream: MediaStream) {
        updateParticipantsLabel()
    }
}

Logic implementation

Implementation for the related event

This step will register our ui update call to the updated participant related event :

  • UserUpdatedEvent
@Subscribe(threadMode = ThreadMode.MAIN)
public void onEvent(UserUpdatedEvent event) {
    updateUsers();
}

What's next ?

If you want to learn more about creating conference applications, go to the Implement screen sharing tutorial.