VideoCallParticipantView

The VideoCallParticipantView component is used to render a participant in a call. It renders the participant video if their track is not null and is correctly published, or a user avatar if there is no video to be shown.

The component has a ViewModifier called VideoCallParticipantModifier, that renders the user label, which includes the user’s name and call status, such as mute state and a connection indicator. Additionally, if the user is focused, the component renders a border to indicate that the participant is the primary speaker.

Let’s see how to use it.

Usage

To use the VideoCallParticipantView component, embed it anywhere in your custom UI and pass in the necessary parameters:

VideoCallParticipantView(
    participant: participant,
    id: id,
    availableFrame: availableFrame,
    contentMode: contentMode,
    customData: customData,
    call: call
)
.modifier(
    VideoCallParticipantModifier(
        participant: participant,
        call: call,
        availableFrame: availableFrame,
        ratio: ratio,
        showAllInfo: true
    )
)

If you are using our ViewFactory, these parameters are provided in the factory method for the call participant view its view modifier in the following methods:

public func makeVideoParticipantView(
    participant: CallParticipant,
    id: String,
    availableFrame: CGRect,
    contentMode: UIView.ContentMode,
    customData: [String: RawJSON],
    call: Call?
) -> some View {
    VideoCallParticipantView(
        participant: participant,
        id: id,
        availableFrame: availableFrame,
        contentMode: contentMode,
        customData: customData,
        call: call
    )
}

public func makeVideoCallParticipantModifier(
    participant: CallParticipant,
    call: Call?,
    availableFrame: CGRect,
    ratio: CGFloat,
    showAllInfo: Bool
) -> some ViewModifier {
    VideoCallParticipantModifier(
        participant: participant,
        call: call,
        availableFrame: availableFrame,
        ratio: ratio,
        showAllInfo: showAllInfo
    )
}

For the VideoCallParticipantView, the required parameters are:

• participant - the CallParticipant object representing a user in a call
• id - the SwiftUI id for the view (you can pass the id of the participant here)
• availableFrame - the available frame for the view
• contentMode - the content mode of the view
• customData - any custom data that you can pass to the view
• call - the current call

For the VideoCallParticipantModifier you should provide the following parameters:

• participant - the CallParticipant object representing a user in a call
• participantCount - the number of participants in the call
• pinnedParticipant - optional binding of the pinned participant (if any)
• availableFrame - the available frame≈ for the view
• ratio - the ratio for the view slot
• showAllInfo - if all information should be shown in the card

If you are using your custom UI without our ViewFactory, you can fetch the information needed in these components via the Call object and its participants property. For example, you can iterate through the participants with ForEach and show a grid or any other UI container representation, based on your app’s requirements.

Each of the VideoCallParticipantView items with its modifier applied will look something like this:

The users will have their video visible, or an avatar if there are no tracks available. On top of that, there is a label that has the name or ID displayed, as well as the current mute or speaking state, with the connection quality being on the side.