Component

Vue Audio Input Component

<DomAudioInput>

Microphone setup with device selection, a live input meter, mute, and explicit start/stop. Emits a local MediaStream for your meeting or AI application.

Live example

Choose a mic. Check your sound.

Sound good before you join.

Choose your microphone, then say a few words to check the input.

Microphone

Off

Microphone

Microphone is off

This is a local microphone check. Audio is not recorded or sent.

MicrophoneSetup.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { DomAudioInput } from '@getdom/studio';
</script>

<template>
	<div class="w-full max-w-md space-y-4">
		<div class="space-y-1">
			<h3 class="text-lg font-semibold tracking-tight text-canvas-fg">Sound good before you join.</h3>
			<p class="text-sm leading-relaxed text-muted-fg">Choose your microphone, then say a few words to check the input.</p>
		</div>
		<DomAudioInput />
		<p class="text-xs leading-relaxed text-muted-fg">This is a local microphone check. Audio is not recorded or sent.</p>
	</div>
</template>

Media input

Built to work together

Audio controls

Click to talk, waveform, mute, and input settings.

Audio input

A standalone microphone setup and sound check.

Audio visualizer

Show the live level of an existing audio stream.

Camera input

Choose a webcam and check a local preview.

Capture ownership. Audio input, Audio controls, and Camera input each own one capture session. Use one microphone capture component per session, then pass its stream to any extra visualisers. Stop, unmount, and page exit release owned tracks. Mute disables audio tracks but retains the microphone until Stop.

Device changes. Microphones switch only after the replacement opens successfully; failure keeps the previous stream. Cameras release the previous device first so phones can change cameras. Replace the input in your transport whenever @stream fires. Device removal or revoked access produces an error with an explicit retry.

Browser access. Open on HTTPS or localhost. Capture starts after a user action; device names may stay hidden until permission is granted. Embedded pages also need microphone/camera permission in the iframe and the parent’s Permissions Policy. Browser media permissions.

Programmatic control. Capture components expose start(): Promise<MediaStream | null>, stop(), stream, and state through a template ref. Call start() from a user gesture. Constraints apply on the next start or device switch. These components do not establish an AI or meeting connection.

Reference

Props

Control props

Name	Type	TS	Default	Description
`deviceId`	string	string	''	Microphone device ID, or empty for the system default. Supports v-model:deviceId.
`muted`	boolean	boolean	false	Mute current and future tracks without releasing the microphone. Supports v-model:muted.
`constraints`	object	Record<string, unknown>	—	Optional audio MediaTrackConstraints, applied at start or selection. deviceId is controlled separately.
`label`	string	string	'Microphone'	Setup heading and device picker label.

Auto-generated from Audio input.props and inline _edit hints.

Events

Name	Payload	Description
@stream	(stream `stream: MediaStream \| null;` : MediaStream \| null)	Emits the initial or replacement stream; null means capture stopped. This component owns and releases its tracks.
@update:deviceId	(deviceId `deviceId: string;` : string)	Committed microphone selection. Supports v-model:deviceId.
@update:muted	(muted `muted: boolean;` : boolean)	Track enabled state changed. Supports v-model:muted.
@state	(state `state: 'idle' \| 'requesting' \| 'active' \| 'error';` : 'idle' \| 'requesting' \| 'active' \| 'error')	Local device lifecycle. Active does not imply a network connection.
@error	({ name, message })	Actionable capture failure. A failed microphone switch keeps the previous stream.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.