sw-self-media

Local video overlay automatically positioned over the matching tile in the MCU layout.

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

sw-self-media is designed to be slotted inside <sw-call-media>. It listens to three observables on the Call:

• call.localStream$ for the camera/microphone stream of this user;
• call.layoutLayers$ for the percentage-based rectangles used by the MCU;
• call.self$ for the self participant’s id.

It then finds the layer whose member_id === self.id and positions an absolutely-placed container at the matching x / y / width / height (all expressed as percentages of the parent). When the layout changes mid-call (gallery → spotlight, presenter joining, …) the overlay re-positions automatically.

Unlike <sw-call-media> and <sw-audio-level>, this element does not accept a raw .stream prop — it needs layoutLayers and self.id to place itself, both of which only come from a Call. Input precedence (most specific wins): .call > context.

Apply the boolean mirror attribute to flip the video horizontally, which is the natural default for front-facing camera previews.

Class: SwSelfMedia · Module: packages/web-components/src/components/sw-self-media.ts

class: SwSelfMedia, sw-self-media

Fields

Attributes

CSS Parts