JavaScript MediaStream removetrack Event

Beginner
5 min read
Updated: Nov 2026
5 examples
Event
Decorative image with the word REMOVETRACK

Definition

The removetrack event fires on a MediaStream when a MediaStreamTrack has been removed. Per MDN, it is a MediaStreamTrackEvent, is not cancelable, and does not bubble.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for removetrack. Start with this line.

JavaScript
stream.addEventListener("removetrack", handler)
CallWhat it does
stream.addEventListener("removetrack", handler)Primary signature.

Built into the browser. Listen with stream.addEventListener("removetrack", …) — no import required.

Library declarations
JavaScript
stream.addEventListener("removetrack", handler)

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Fires as a MediaStreamTrackEvent (listener receives the event).

JavaScript Examples

Example 1 — addEventListener("removetrack")

Listen first, then remove a canvas video track (MDN pattern).

JavaScript
const stream = new MediaStream();
const track = document.createElement("canvas")
  .captureStream()
  .getVideoTracks()[0];

stream.addTrack(track);

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

stream.removeTrack(track);
// video track removed
Try It Yourself

How It Works

  1. Build a stream with a track. Canvas video track — no camera.
  2. Register the listener. Ready before any remove.
  3. Call removeTrack. Detaches the track from the stream.
  4. Read event.track. kind is "video".

Example 2 — onremovetrack Property

Same event via the handler property (MDN’s second pattern).

JavaScript
const stream = new MediaStream();
const track = document.createElement("canvas")
  .captureStream()
  .getVideoTracks()[0];

stream.addTrack(track);

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

stream.removeTrack(track);
// video track removed
Try It Yourself

How It Works

  1. Assign onremovetrack. One handler slot on the stream.
  2. Remove the track. The handler runs with a MediaStreamTrackEvent.
  3. Same payload. event.track is still the removed track.
  4. Prefer addEventListener when you need multiple listeners.

Example 3 — Second Remove Does Not Fire Again

If removeTrack is a no-op, removetrack does not fire a second time.

JavaScript
const stream = new MediaStream();
const track = document.createElement("canvas")
  .captureStream()
  .getVideoTracks()[0];

stream.addTrack(track);

let count = 0;
stream.addEventListener("removetrack", () => {
  count += 1;
});

stream.removeTrack(track);
stream.removeTrack(track); // already gone

console.log(count); // 1
Try It Yourself

How It Works

  1. Count events. Start at 0.
  2. First remove. Track leaves the stream → event fires → count is 1.
  3. Second remove. Track already gone → removeTrack no-op.
  4. No second event. count stays 1.

Example 4 — Pair with addtrack

Watch both sides of the track lifecycle on one stream.

JavaScript
const stream = new MediaStream();
const track = document.createElement("canvas")
  .captureStream()
  .getVideoTracks()[0];

const log = [];
stream.addEventListener("addtrack", (e) => {
  log.push("add " + e.track.kind);
});
stream.addEventListener("removetrack", (e) => {
  log.push("remove " + e.track.kind);
});

stream.addTrack(track);
stream.removeTrack(track);
console.log(log.join(", "));
// add video, remove video
Try It Yourself

How It Works

  1. Listen for both events before changing the stream.
  2. addTrack fires addtrack.
  3. removeTrack fires removetrack.
  4. Same track object appears in both event.track payloads.

Example 5 — Count Tracks After Remove

After the event, getTracks() shows what remains.

JavaScript
const stream = new MediaStream();
const track = document.createElement("canvas")
  .captureStream()
  .getVideoTracks()[0];

stream.addTrack(track);

stream.addEventListener("removetrack", () => {
  console.log("left", stream.getTracks().length);
});

stream.removeTrack(track);
// left 0
Try It Yourself

How It Works

  1. Stream starts with one track.
  2. On removetrack, query getTracks().
  3. Length is 0 after the only track is removed.
  4. removeTrack does not stop the track — call track.stop() separately if needed.
Compatibility

Browser Support

The removetrack event is Baseline Widely available (MDN: since July 2020). It is part of the Media Capture and Streams specification. It is a browser Web API — not available in Node.js, Bun, or Deno.

✓ Baseline · Widely available

MediaStream: removetrack

Supported across modern Chrome, Firefox, Safari, and Edge for track-removed notifications.

98% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
removetrack Excellent

Bottom line: Browser only — not a Node.js API. Safe for production. Prefer addEventListener("removetrack", …) when you may need more than one listener. See the MDN removetrack reference.

Frequently Asked Questions

When a MediaStreamTrack is removed from a MediaStream — for example after calling removeTrack(track) on that stream when the track was present.
No. MDN marks the removetrack event as Baseline Widely available (since July 2020). It is not Deprecated, Experimental, or Non-standard.
A MediaStreamTrackEvent. It inherits from Event and includes a read-only track property with the MediaStreamTrack that was removed.
No. MDN says the event is not cancelable and does not bubble.
removeTrack() is the method that detaches a track from the stream. removetrack is the event that fires after a track has been removed — listen with addEventListener or onremovetrack.
addtrack fires when a track is added to a MediaStream — for example after addTrack(track). It is the counterpart to removetrack.

Next: active

Learn when a MediaStream is considered active after tracks change.

active tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

JavaScript MediaStream removeTrack() Method JavaScript MediaStream active Property