For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Log inSign up
Support
GuidesReferenceClick-to-Call
GuidesReferenceClick-to-Call
  • Core
    • Overview
  • Entities
    • SignalWire
    • Address
    • Participant
    • ClientPreferences
    • SelfCapabilities
    • SelfParticipant
    • User
    • WebRTCCall
  • Web Components
    • Overview
    • sw-audio-level
    • sw-call-controls
    • sw-call-dialpad
    • sw-call-media
    • sw-call-provider
    • sw-call-status
    • sw-call-widget
    • sw-click-to-call
    • sw-device-selector
    • sw-directory
    • sw-local-camera
    • sw-participant-controls
    • sw-participants
    • sw-self-media
    • sw-ui-alert
    • sw-ui-background
    • sw-ui-call-layout
    • sw-ui-content-drawer
    • sw-ui-control-bar
    • sw-ui-dialpad
    • sw-ui-dropup
    • sw-ui-icon
    • sw-ui-modal
    • sw-ui-responsive-container
    • sw-ui-split-button
    • sw-ui-transcript-view
LogoLogoSignalWire Docs
Log inSign up
Support
On this page
  • class: SwCallMedia, sw-call-media
  • Fields
  • call
  • stream
  • Attributes
  • CSS Properties
  • CSS Parts
  • Slots
Web Components

sw-call-media

|View as Markdown|Open in Claude|
Was this page helpful?
Edit this page
Previous

sw-call-provider

Next
Built with

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.

1<sw-call-provider token="YOUR_GUEST_TOKEN">
2  <sw-call-media>
3    <sw-self-media></sw-self-media>
4    <sw-participants></sw-participants>
5  </sw-call-media>
6</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 | nullDefaults to null

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

Attributes

NameFieldInherited From
callcall

CSS Properties

NameDefaultDescription
--bg-page#0e0e18Background color shown behind the video (visible while the stream is loading or letterboxed for audio-only calls).

CSS Parts

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

Slots

NameDescription
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.