Pinning Users

The StreamVideo SDK has support for pinning users, both locally for the current user, and remotely for everyone in the call.

Every user can pin as many participants on the call as they want, and those users will be shown first in the list of participants for that user. Pinning someone for everyone in the call requires the pinForEveryone capability.

By default, the pinned users appear first on the participants array. The ones which are pinned remotely appear before the local ones. If there are several remotely pinned users, they are sorted by the pinning date (the most recent pins appear first). You can change this sorting behaviour with your own implementation.

Local pins

In order to pin a user locally, you should call the following method on the Call object:

try await call.pin(sessionId: "pinned_user_session_id")

To unpin the user, you should use the unpin method:

try await call.unpin(sessionId: "pinned_user_session_id")

Remote pins

If you want to pin a user for everyone in the call, you should use the following method:

let response = try await call.pinForEveryone(userId: "pinned_user_id", sessionId: "pinned_user_session_id")

Similarly, to unpin a user, you should call the following method:

let response = try await call.unpinForEveryone(userId: "pinned_user_id", sessionId: "pinned_user_session_id")

UI SDK support

By default, the UI components show a popup with these options (based on their permissions), on a double tap of the video feed of a particular user. This is implemented in the VideoCallParticipantModifier modifier that is attached on the video view.

If you want to change this behaviour, you should implement your own version of it, by using the ViewFactory method makeVideoCallParticipantModifier:

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