> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.

# sw-self-media

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

```html
<sw-call-provider token="YOUR_GUEST_TOKEN">
  <sw-call-media>
    <sw-self-media></sw-self-media>
  </sw-call-media>
</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

**`mirror`** `boolean` — default: false

`mirror` field.

---

**`call`** `Call | undefined`

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

---

### Attributes

| Name     | Field  | Inherited From |
| -------- | ------ | -------------- |
| `mirror` | mirror |                |
| `call`   | call   |                |

### CSS Parts

| Name        | Description                                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
| `container` | The absolutely-positioned overlay div whose \`top\` / \`left\` / \`width\` / \`height\` track the MCU layer rectangle. |
| `video`     | The internal \`\<video>\` element rendering the local \`MediaStream\` (\`autoplay\`, \`playsinline\`, \`muted\`).      |

---