# VideoParticipantsView

The `VideoParticipantsView` is a container view that displays the participants in a call in several different layouts.

The following layouts are supported at the moment:

- `grid` - the users are displayed in a scrollable grid.
- `spotlight` - the dominant speaker takes a large section of the view, while the other participants are displayed in a scrollable horizontal list below.
- `fullScreen` - only the dominant speaker is presented.

The layout for the participants is determined by the `participantsLayout` property in the `CallViewModel`.

Here's how the default grid UI looks like:

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

### Usage

The `VideoParticipantsView` is a stateful component that requires a `CallViewModel`. Here's an example of how to use it as a standalone component:

```swift
VideoParticipantsView(
    viewFactory: DefaultViewFactory.shared,
    viewModel: viewModel,
    availableFrame: availableFrame,
    onChangeTrackVisibility: onChangeTrackVisibility
)
```

The parameters needed for this component are as follows:

- `viewFactory` - the view factory used for creation of the views
- `viewModel` - the `CallViewModel`
- `availableFrame` - the available frame for the view
- `onChangeTrackVisibility` - called when the track changes its visibility

If you are using our `ViewFactory`, you can swap this component with your implementation by implementing the following method:

```swift
public func makeVideoParticipantsView(
    viewModel: CallViewModel,
    availableFrame: CGRect,
    onChangeTrackVisibility: @escaping @MainActor(CallParticipant, Bool) -> Void
) -> some View {
    CustomVideoParticipantsView(
        viewFactory: self,
        viewModel: viewModel,
        availableFrame: availableFrame,
        onChangeTrackVisibility: onChangeTrackVisibility
    )
}
```

The different layouts for this component are also provided as standalone components that you can use to build your own variations of the UI.

#### Grid

Here's an example how to use the grid layout in your views:

```swift
ParticipantsGridLayout(
    viewFactory: viewFactory,
    call: viewModel.call,
    participants: viewModel.participants,
    availableFrame: availableFrame
    onChangeTrackVisibility: onChangeTrackVisibility
)
```

#### Spotlight

This example shows the usage of the spotlight layout:

```swift
ParticipantsSpotlightLayout(
    viewFactory: viewFactory,
    participant: first,
    call: viewModel.call,
    participants: Array(viewModel.participants.dropFirst()),
    frame: availableFrame,
    onChangeTrackVisibility: onChangeTrackVisibility
)
```

#### Full Screen

You can use the full screen layout with the code below:

```swift
ParticipantsFullScreenLayout(
    viewFactory: viewFactory,
    participant: first,
    call: viewModel.call,
    frame: availableFrame,
    onChangeTrackVisibility: onChangeTrackVisibility
)
```


---

This page was last updated at 2026-05-13T13:39:06.841Z.

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