demo · v141
Echo Cancellation Mode Comparator
Open three microphone captures simultaneously — each with a different echoCancellationMode. Compare the resulting track settings side by side and watch the audio level meters to confirm each stream is live.
Microphone permission required
Each capture button triggers a
getUserMedia prompt. You can start them individually. Stop any stream with its Stop button to release the mic track. All three can run simultaneously (if your system allows concurrent captures).
probing echoCancellationMode constraint…
browser AEC
Software echo cancellation run by the browser. Most reliable for video calls — works even if the OS has no AEC support. Higher latency and may colour the audio.
Best for: video conferencing, voice chat
level
not started
system AEC
Echo cancellation delegated to the operating system or hardware DSP. Lower latency, hardware-accelerated — but behaviour varies by platform and driver.
Best for: native-feel calls, lower latency
level
not started
disabled (no AEC)
Raw audio, no echo cancellation applied. Essential for music apps — AEC treats instrument harmonics as echo and destroys timbre. Pair with speaker isolation.
Best for: music recording, instrument apps
level
not started
mode comparison
| property | browser | system | disabled |
|---|---|---|---|
| echo cancellation | software (browser) | hardware/OS DSP | none |
| latency | higher (~20–50ms extra) | lower (hardware path) | minimal (raw ADC) |
| music fidelity | degrades (destroys harmonics) | varies by driver | pristine |
| reliability | consistent across platforms | driver-dependent | always works |
| use case | video calls | native-feel calls | music, recording |
the calls
// Browser-managed AEC (most reliable for calls)
const streamBrowser = await navigator.mediaDevices.getUserMedia({
audio: { echoCancellationMode: "browser" },
});
// OS / hardware DSP AEC (lower latency)
const streamSystem = await navigator.mediaDevices.getUserMedia({
audio: { echoCancellationMode: "system" },
});
// No AEC — raw audio (music apps, DAWs)
const streamDisabled = await navigator.mediaDevices.getUserMedia({
audio: { echoCancellationMode: "disabled" },
});
// Inspect what the browser actually applied
const settings = streamBrowser.getAudioTracks()[0].getSettings();
console.log(settings.echoCancellationMode); // "browser" | "system" | "disabled"feature detection
const supported = navigator.mediaDevices
.getSupportedConstraints()
.echoCancellationMode;
if (supported) {
// Safe to pass echoCancellationMode in constraints
} else {
// Fall back to older echoCancellation: true/false boolean
}