# 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:

```swift
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:

```swift
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:

![CallParticipants Grid](https://user-images.githubusercontent.com/17215808/223418304-d21a2018-f0d2-4d37-afd0-87ef071e49b6.png)

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.


---

This page was last updated at 2026-07-10T16:05:22.627Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/ios/ui-components/participants/call-participant/](https://getstream.io/video/docs/ios/ui-components/participants/call-participant/).