Release a microphone stream that arrives after the recording dialog closes

A user clicks Record. The browser asks for microphone permission. The user closes the recording dialog, then answers the browser prompt a few seconds later.

If the application only stops a stream that already exists when the dialog closes, it misses this sequence: the stream did not exist at cleanup time. It can arrive after its UI owner has disappeared.

Permission and component lifetime are separate

getUserMedia() returns a promise. The user can ignore the permission prompt, so the promise may remain pending. Closing an application's dialog does not settle that promise or revoke permission.

The resource owner therefore needs to remember that it was cancelled, and dispose of a stream even when that stream arrives later. This is different from hiding an error message after unmount: the late result carries a live resource.

Here is a dependency-free ownership helper. The request argument makes permission timing testable without accessing hardware:

function createMicrophoneOwner(request) {
  let cancelled = false;
  let owned = null;
  const stop = stream => stream.getTracks().forEach(track => track.stop());

  const ready = (async () => {
    const stream = await request();
    if (cancelled) {
      stop(stream);
      return null;
    }
    owned = stream;
    return stream;
  })();

  return {
    ready,
    release() {
      cancelled = true;
      if (owned) {
        stop(owned);
        owned = null;
      }
    },
  };
}

Calling release() before permission resolves sets a flag. The late stream is then stopped instead of being handed to the UI. Calling it after acquisition stops the owned tracks. Calling it repeatedly does not stop those same tracks repeatedly.

This helper does not cancel the browser's permission prompt. Its ready promise can remain pending while the user makes no choice. It controls what happens to a result, rather than claiming to abort the underlying permission request.

Give each recording attempt its own owner

Keep one owner per attempt, not one mutable stream variable shared across all attempts. Otherwise, cleanup for an older attempt can accidentally affect a newer recording.

For example, call the following from the application's Record and Close actions. showReadyStream and showPermissionError are application-specific UI functions:

let activeOwner = null;

function closeRecordingDialog() {
  const old = activeOwner;
  activeOwner = null;
  old?.release();
}

async function openRecordingDialog() {
  closeRecordingDialog();
  const owner = createMicrophoneOwner(() =>
    navigator.mediaDevices.getUserMedia({ audio: true })
  );
  activeOwner = owner;

  try {
    const stream = await owner.ready;
    if (!stream || activeOwner !== owner) return;
    showReadyStream(stream);
  } catch (error) {
    if (activeOwner !== owner) return;
    activeOwner = null;
    owner.release();
    showPermissionError(error);
  }
}

The owner comparison matters even if the acquisition promise has already resolved: the dialog can close before its awaiting handler continues. A closed or replaced attempt must not reopen the UI when an old promise settles.

In React, release the relevant owner from the component's effect cleanup as well. Start the request from the user's recording action, and handle a rejected promise. Production interfaces also need to account for secure-context availability, permission denial, an unavailable device, and the recorder's separate lifecycle.

Test the late result explicitly

A deferred promise lets a test decide exactly when permission resolves:

import assert from 'node:assert/strict';

let grant;
const permission = new Promise(resolve => { grant = resolve; });
let stops = 0;
const stream = { getTracks: () => [{ stop: () => { stops++; } }] };

const owner = createMicrophoneOwner(() => permission);
owner.release();             // The recording dialog closes first.
grant(stream);               // Permission succeeds later.

assert.equal(await owner.ready, null);
assert.equal(stops, 1);

This test is intentionally independent of a real browser prompt. Additional simulated checks covered normal acquisition followed by cleanup, repeated cleanup, permission rejection, replacement by a newer attempt, a synchronous request error, and releasing every track in a multi-track stream. These checks exercise ownership and ordering; they do not certify browser permission UI behavior or recording formats.

MediaStreamTrack.stop() releases that track's use of its source. The physical microphone can still be used by another track or application. If the application also created a MediaRecorder, object URLs, audio nodes, or network uploads, manage those resources separately. Keep any stream-sharing policy explicit: this helper assumes its owner is responsible for the tracks it receives.

Disclosure: Published under the pen name Cynthia Hayes for Accent Test. This article and illustrative code were prepared by an AI agent and labeled Fully Autonomous. The lifecycle checks were run with simulated streams; no microphone was requested and no user recording was used. This example is not a claim that the deployed product uses this exact helper.