JavaScript MediaStream removeTrack() Method

What You’ll Learn

The removeTrack() method of MediaStream removes a MediaStreamTrack from a stream. Learn the MDN pattern that empties a stream, removing only the camera while keeping the mic, pairing with addTrack(), and the difference between removeTrack() and track.stop()—with five examples and try-it labs.

Introduction

A MediaStream holds references to MediaStreamTrack objects. When you compose streams manually with addTrack() or copy tracks into a new stream, you may later need to detach a track without destroying it. removeTrack(track) removes that reference from the stream’s track set.

MDN’s example captures audio and video with getUserMedia, copies tracks into a new MediaStream, then removes both tracks—leaving getTracks() as an empty array. Important: removeTrack() does not call stop() on the track; the hardware may still be active until you stop it separately.

Understanding MediaStream.removeTrack()

An instance method that removes one track from this stream’s track set.

• Parameters — track: a MediaStreamTrack currently in the stream.
• Return value — undefined (none).
• Effect — track is no longer listed by getTracks() on this stream.
• Not the same as stop — the track object may still be live after removal.
• Pair with — addTrack(), getTracks(), active.
• Baseline Widely available on MDN (since September 2017).

📝 Syntax

removeTrack(track)

Parameters

track — A MediaStreamTrack to remove from this stream.

Return value

None (undefined).

Typical pattern (MDN idea)

let newStream = new MediaStream(initialStream.getTracks());

const videoTrack = newStream.getVideoTracks()[0];
const audioTrack = newStream.getAudioTracks()[0];

newStream.removeTrack(videoTrack);
newStream.removeTrack(audioTrack);

// Stream will be empty
console.log(newStream.getTracks());

⚖️ removeTrack() vs Related Ideas

Examples Gallery

Examples follow MDN MediaStream: removeTrack(). Demos use getUserMedia (secure context + permission).

const initialStream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});

const newStream = new MediaStream(initialStream.getTracks());

const videoTrack = newStream.getVideoTracks()[0];
const audioTrack = newStream.getAudioTracks()[0];

newStream.removeTrack(videoTrack);
newStream.removeTrack(audioTrack);

console.log(newStream.getTracks()); // []

[]

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    const videoTrack = stream.getVideoTracks()[0];
    stream.removeTrack(videoTrack);

    console.log(
      stream.getVideoTracks().length,
      stream.getAudioTracks().length
    );
  });

0 1

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((source) => {
    const composed = new MediaStream();
    const audio = source.getAudioTracks()[0];
    const video = source.getVideoTracks()[0];

    composed.addTrack(audio);
    composed.addTrack(video);
    composed.removeTrack(video);

    console.log(composed.getTracks().length, composed.getAudioTracks().length);
  });

1 1

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((stream) => {
    const track = stream.getVideoTracks()[0];
    stream.removeTrack(track);

    // Track may still be "live" until stop()
    console.log(track.readyState);
    track.stop();
    console.log(track.readyState);
  });

live
ended

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    console.log("before:", stream.getTracks().length);

    stream.removeTrack(stream.getVideoTracks()[0]);
    console.log("after video:", stream.getTracks().length);

    stream.removeTrack(stream.getAudioTracks()[0]);
    console.log("after audio:", stream.getTracks().length);
  });

before: 2
after video: 1
after audio: 0

🚀 Common Use Cases

• Detach a screen-share track when the user stops sharing (MDN-style composition).
• Remove video from a stream while keeping audio for a voice-only mode.
• Rebuild streams dynamically with addTrack/removeTrack pairs.
• Clear all tracks from a composed stream before adding new ones.
• WebRTC: remove a remote track reference when a peer disconnects.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2017) — no Deprecated / Experimental / Non-standard banner.
• Does not stop hardware — removeTrack() only updates the stream; call track.stop() to end the track.
• Track must be in stream — pass a track reference that belongs to this stream.
• Empty stream — MDN: removing all tracks leaves getTracks() as [].
• active property — stream may become inactive when no live tracks remain (see active).
• Related learning: addTrack(), getTracks(), clone(), getUserMedia().

💡 Best Practices