sw-participants

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

Attributes

Slots

Events