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: SwSelfMedia, sw-self-media
  • Fields
  • mirror
  • call
  • Attributes
  • CSS Parts
Web Components

sw-self-media

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

sw-ui-alert

Next
Built with

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

mirror
booleanDefaults to false

mirror field.

call
Call | undefined

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

Attributes

NameFieldInherited From
mirrormirror
callcall

CSS Parts

NameDescription
containerThe absolutely-positioned overlay div whose `top` / `left` / `width` / `height` track the MCU layer rectangle.
videoThe internal `<video>` element rendering the local `MediaStream` (`autoplay`, `playsinline`, `muted`).