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: SwDeviceSelector, sw-device-selector
  • Fields
  • deviceController
  • showPreview
  • Attributes
  • CSS Properties
  • Events
Web Components

sw-device-selector

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

sw-directory

Next
Built with

Single-button popover that lets the user pick microphone, camera, and speaker devices, with optional live preview of each.

1<sw-call-provider token="YOUR_GUEST_TOKEN">
2  <sw-device-selector></sw-device-selector>
3</sw-call-provider>

The trigger renders as a small icon button; clicking it opens a panel with three sections (Microphone, Camera, Speaker), each populated from the corresponding observable on the bound DeviceController: audioInputDevices$, videoInputDevices$, audioOutputDevices$. The currently selected device is read from selectedAudio[Input|Output]Device$ / selectedVideoInputDevice$.

When show-preview is set, the open panel also renders:

  • A live camera preview powered by <sw-local-camera> for the selected video input.
  • A real-time microphone level meter (<sw-audio-level>) for the selected audio input.
  • A “Test speaker” button that plays a short tone through the selected audio output (uses setSinkId() where supported).

Streams are acquired only while the popover is open and stopped as soon as it closes — no permanent media access. The popover closes on outside click via a composedPath()-aware document listener.

Class: SwDeviceSelector · Module: packages/web-components/src/components/sw-device-selector/sw-device-selector.ts

class: SwDeviceSelector, sw-device-selector

Fields

deviceController
DeviceController | undefined

deviceController field.

showPreview
booleanDefaults to false

Render inline previews (camera video, mic level, speaker test) inside each section while the panel is open. Streams are acquired only while the panel is open and stopped when it closes.

Attributes

NameFieldInherited From
show-previewshowPreview
deviceControllerdeviceController

CSS Properties

NameDefaultDescription
--ctrl-bgBackground color of the trigger button.
--ctrl-bg-hoverBackground color on hover.
--ctrl-colorForeground (icon + text) color.
--ctrl-radiusTrigger button border radius.
--bg-surfacePopover panel background.
--bg-surface-raisedPopover row hover background.
--border-defaultPopover borders & dividers.
--fg-defaultPrimary text color inside the panel.
--fg-mutedSecondary text color (device sub-labels, kind hints).
--radius-mdPanel border radius.
--shadow-mdPanel drop shadow.

Events

NameDetailDescription
sw-device-change—User picked a device from one of the dropdowns.