> 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-call-media

Renders the remote MCU video stream with aspect-ratio-aware sizing,
plus a default slot positioned as an overlay layer on top of the video.

```html
<sw-call-provider token="YOUR_GUEST_TOKEN">
  <sw-call-media>
    <sw-self-media></sw-self-media>
    <sw-participants></sw-participants>
  </sw-call-media>
</sw-call-provider>
```

`sw-call-media` is the visual canvas of the call. It binds to a remote
`MediaStream` (provided directly via `.stream`, derived from a `.call`,
or pulled from `callStateContext`) and attaches it to an internal
`<video>` element with `autoplay`, `muted`, and `playsinline`.

To keep the rendered area inside the viewport regardless of host size,
a `ResizeObserver` (debounced 50 ms) watches the host element, the
`<video>` `resize` event watches the intrinsic media dimensions, and a
`window` `resize` listener watches the viewport. A "contain" fitting
algorithm picks the constraining dimension and re-applies a centered
`transform: translate(...)`. Audio-only tracks fall back to filling
the container.

The element can run **standalone** (pass `.call` or `.stream` directly)
or **inside a provider** (`<sw-call-provider>` / `<sw-call-widget>`),
where it picks up the active call from context. Input precedence (most
specific wins): **`.stream` > `.call` > context**.

*Class: `SwCallMedia` · Module: `packages/web-components/src/components/sw-call-media.ts`*

## class: `SwCallMedia`, `sw-call-media`

### Fields

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

Explicit Call — when set, subscribes directly to its observables instead of relying on context. Overridden by `.stream` if both are set.

---

**`stream`** `MediaStream | null` — default: null

Explicit remote MediaStream — highest precedence. Bypasses both `.call` and context. Useful for raw rendering with no SDK at all.

---

### Attributes

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

### CSS Properties

| Name        | Default   | Description                                                                                                        |
| ----------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
| `--bg-page` | `#0e0e18` | Background color shown behind the video (visible while the stream is loading or letterboxed for audio-only calls). |

### CSS Parts

| Name        | Description                                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- |
| `container` | Outer container (\`.mcu-content\`) that holds the video plus overlay layers. Style for backgrounds, drop shadows, etc. |
| `video`     | The internal \`\<video>\` element rendering the MCU stream. Useful for \`object-fit\`, filters, and rounded corners.   |

### Slots

| Name | Description                                                                                                                                                                                                |
| ---- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|      | Default slot rendered as an absolutely-positioned overlay layer above the remote video. Use it to compose \`\<sw-participants>\`, \`\<sw-self-media>\`, captions, branding, status chips, or any other UI. |

---