Web Components

sw-participants

View as MarkdownOpen in Claude

Renders one absolutely-positioned overlay tile per remote participant in the MCU layout, plus per-participant menu hooks.

1<sw-call-provider token="YOUR_GUEST_TOKEN">
2  <sw-call-media>
3    <sw-participants></sw-participants>
4  </sw-call-media>
5</sw-call-provider>

Subscribes to call.layoutLayers$ and call.participants$ and renders a <div> for each layer whose member_id matches a remote participant (the local user is excluded — use <sw-self-media> for that). Each overlay is positioned via percentage top / left / width / height, so it tracks the MCU layout exactly as the renderer sees it.

Each tile also exposes a small ”⋯” menu trigger in its top-left corner. Clicking it opens a popover whose content is provided by a named slot keyed on the participant’s id: controls-${memberId}. Drop a <sw-participant-controls> (or any UI of your choosing) into that slot to expose mute / volume / pin / remove actions for that participant only.

Input precedence (most specific wins): .call > context. Mounting <sw-participants> outside <sw-call-media> is allowed but usually you want it to overlay the remote video, so it should live inside the default slot of <sw-call-media>.

Class: SwParticipants · Module: packages/web-components/src/components/sw-participants.ts

class: SwParticipants, sw-participants

Fields

call
Call | undefined

Explicit Call — when set, subscribes directly and bypasses context.

Attributes

NameFieldInherited From
callcall

Slots

NameDescription
Default slot for any overlay content rendered above the tiles.
controls-{memberId}Replace `{memberId}` with a participant’s `member_id` to inject the popover content shown when that participant’s ”⋯” trigger is clicked.

Events

NameDetailDescription
sw-participant-mute-audio—User muted/unmuted a participant’s audio.
sw-participant-mute-video—User muted/unmuted a participant’s video.
sw-participant-remove—User removed a participant from the call.