sw-device-selector
sw-device-selector
Single-button popover that lets the user pick microphone, camera, and speaker devices, with optional live preview of each.
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 field.
showPreview
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.