You have a basic video conference application with which you can video call your friends using a conference room. However, you do not control the conference nor have any information about the conference participants.

This tutorial will take you through some simple steps to follow to have a full participants’ list.

Step 1: Create the participants’ list

Note: The participants’ list is only visible when the user has joined the conference.

Add UI for showing participants in ViewController.swift.

1. In ViewController.swift, add a variable to the ViewController class to refer to the user interface element that will be created in step 2.

class ViewController: UIViewController {
    ...

    // Participant label.
    var participantsLabel: UILabel!

    ...
}

2. Modify initConferenceUI to extend the user interface and clear participantsLabel when the conference is left.

...

func initConferenceUI() {
    ...

    // Participants label.
    participantsLabel = UILabel(
        frame: CGRect(
            x: margin,
            y: videosView1.frame.origin.y + videosView1.frame.height + margin,
            width: textFieldWidth,
            height: textFieldHeight
        )
    )
    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 */

    }
}

...

Step 2: Add a participant to the list

Note: The participants’ list is updated upon receiving the participantJoined and participantLeft events, the same way the participants’ streams were added in the previous tutorial.

1. Add a method for updating the participants list to the VTConferenceDelegate extension in ViewController.swift.

...

extension ViewController: VTConferenceDelegate {
    ...

    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: ", ")
    }
}

2. When a participant joins the conference, the application calls the streamAdded event which calls streamUpdated event. In streamUpdated, call updateParticipantsLabel to update the participants list.

...

extension ViewController: VTConferenceDelegate {
    ...

    func streamUpdated(participant: VTParticipant, stream: MediaStream) {
        ...

        // Update participants label.
        updateParticipantsLabel()
    }
}

Step 3: Remove a participant from the list

1. When a participant leaves the conference, the conference delegate’s method streamRemoved is called. In that method, call updateParticipantsLabel to remove that participant from the participants list.

...

extension ViewController: VTConferenceDelegate {
    ...

    func streamRemoved(participant: VTParticipant, stream: MediaStream) {
        updateParticipantsLabel()
    }
}