Media devices · microphone & speakers
What a voice call needs from the page: pick the microphone and the speakers (asking for permission first, since browsers name devices only then), see the microphone's level as you speak, play a test chime on the chosen output — and an Avatar ring that breathes while someone talks.
Pick the microphone (its level moves as you speak) and the speakers (Test plays a chime there)
Microphone
System default
Say something…
Speakers
System default
Who's talking · Avatar({ speaking, level }) — start your microphone and talk
Usage
import { DevicePicker, LevelMeter, micLevel, playTestTone } from "./components/media.js";import { Avatar } from "./components/avatar.js"; const mic = signal(""), speakers = signal("");DevicePicker({ kind: "audioinput", value: mic }) // asks for the microphone, lists them, shows its levelDevicePicker({ kind: "audiooutput", value: speakers }) // lists outputs (where the browser can pick), Test plays a chime const { level, stop } = micLevel(stream); // 0–1, from any live MediaStreamLevelMeter({ level, bars: 16 })Avatar({ name: "Grace", speaking: () => level() > 0.12, level }) // a ring that breathes while they talk