JavaScript MediaStream removetrack Event

What You’ll Learn

The removetrack event on MediaStream fires when a MediaStreamTrack is removed from the stream. Learn MDN’s addEventListener and onremovetrack patterns, the MediaStreamTrackEvent.track property, pairing with removeTrack(), and how this differs from the addtrack event—with five examples and try-it labs.

Introduction

Streams change over time—tracks leave when peers disconnect, screen shares end, or you call removeTrack() on a composed stream. The removetrack event tells you when a track left the stream so you can update UI, detach from a <video> element, or log diagnostics.

MDN: the event is a MediaStreamTrackEvent with a read-only track property for the removed track. It is not cancelable and does not bubble. Listen with stream.addEventListener("removetrack", handler) or stream.onremovetrack = handler.

Understanding the removetrack Event

An instance event on MediaStream that signals a track was removed from the stream’s track set.

• Event name — "removetrack" (lowercase, one word).
• Event type — MediaStreamTrackEvent (inherits Event).
• Key property — event.track: the MediaStreamTrack that was removed.
• Cancelable — no (MDN).
• Bubbles — no (MDN).
• Common trigger — removeTrack() on the same stream.
• Baseline Widely available on MDN (since July 2020).

📝 Syntax

stream.addEventListener("removetrack", (event) => { })

stream.onremovetrack = (event) => { }

Event object

MediaStreamTrackEvent — use event.track to access the removed MediaStreamTrack (read-only).

Typical pattern (MDN idea)

const stream = new MediaStream();

stream.addEventListener("removetrack", (event) => {
  console.log(`${event.track.kind} track removed`);
});

⚖️ removetrack vs Related Ideas

Examples Gallery

Examples follow MDN MediaStream: removetrack event. Demos use new MediaStream() plus removeTrack() to trigger the event predictably.

const stream = new MediaStream();

stream.addEventListener("removetrack", (event) => {
  console.log(`${event.track.kind} track removed`);
});

// Later: stream.removeTrack(someTrack) fires the event

video track removed

const stream = new MediaStream();

stream.onremovetrack = (event) => {
  console.log(`${event.track.kind} track removed`);
};

audio track removed

const composed = new MediaStream();
const log = [];

composed.addEventListener("removetrack", (event) => {
  log.push(event.track.kind);
});

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((source) => {
    const track = source.getVideoTracks()[0];
    composed.addTrack(track);
    composed.removeTrack(track);
    console.log(log);
  });

["video"]

const composed = new MediaStream();
const kinds = [];

composed.addEventListener("removetrack", (event) => {
  kinds.push(event.track.kind);
});

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((source) => {
    const audio = source.getAudioTracks()[0];
    const video = source.getVideoTracks()[0];
    composed.addTrack(audio);
    composed.addTrack(video);
    composed.removeTrack(audio);
    composed.removeTrack(video);
    console.log(kinds.join(", "));
  });

audio, video

const composed = new MediaStream();
let removeCount = 0;

composed.addEventListener("removetrack", () => {
  removeCount += 1;
});

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((source) => {
    source.getTracks().forEach((track) => composed.addTrack(track));
    composed.getTracks().forEach((track) => composed.removeTrack(track));
    console.log(removeCount, composed.getTracks().length);
  });

2 0

🚀 Common Use Cases

• Update UI when a WebRTC peer removes an audio or video track.
• Log track removals for debugging composed streams.
• Detach recorders or processors when a track leaves the stream.
• Sync stream state with getTracks() after dynamic changes.
• Pair with addtrack for full add/remove lifecycle handling.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2020) — no Deprecated / Experimental / Non-standard banner.
• Not cancelable — you cannot prevent a track from being removed via this event.
• Does not bubble — listen on the MediaStream itself.
• Register early — attach the listener before removeTrack() to avoid missing events.
• vs removeTrack() — the method removes; the event notifies after removal.
• Track may still be live — removeTrack() detaches from the stream; call track.stop() to end hardware.
• Related learning: addtrack, removeTrack(), addTrack(), active / inactive.

💡 Best Practices