JavaScript MediaStream getTracks() Method

What You’ll Learn

The getTracks() method of MediaStream returns an array of every MediaStreamTrack in the stream—audio and video together. Learn the MDN timer example that stops a camera track, counting and logging track.kind, stopping all tracks for cleanup, and comparison with getAudioTracks()—with five examples and try-it labs.

Introduction

A MediaStream is a collection of tracks—microphone, camera, screen share, or synthetic canvas output. When you need to inspect every track at once, call getTracks(). MDN: it returns a sequence representing all tracks in the stream’s track set, regardless of MediaStreamTrack.kind.

This is the go-to method for cleanup: loop the array and call track.stop() to release the camera and mic. It is also the foundation for filtering—many apps use getTracks().filter(...) before the dedicated getAudioTracks() helpers existed.

Understanding MediaStream.getTracks()

An instance method that returns the full track list for this stream.

• Parameters — none.
• Return value — array of MediaStreamTrack objects (audio and video).
• Kind agnostic — includes every track regardless of kind.
• Empty array — when the stream has no tracks.
• Pair with — getAudioTracks(), getVideoTracks(), getTrackById().
• Baseline Widely available on MDN (since September 2017).

📝 Syntax

getTracks()

Parameters

None.

Return value

An array of MediaStreamTrack objects representing every track in the stream.

Typical pattern (MDN idea)

navigator.mediaDevices
  .getUserMedia({ audio: false, video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    setTimeout(() => {
      const tracks = mediaStream.getTracks();
      tracks[0].stop();
    }, 5000);
  });

⚖️ getTracks() vs Related Ideas

Examples Gallery

Examples follow MDN MediaStream: getTracks(). Camera demos use getUserMedia (secure context + permission).

navigator.mediaDevices
  .getUserMedia({ audio: false, video: true })
  .then((mediaStream) => {
    document.querySelector("video").srcObject = mediaStream;
    setTimeout(() => {
      const tracks = mediaStream.getTracks();
      if (tracks[0]) tracks[0].stop();
    }, 5000);
  });

After 5s: camera track stopped

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    const tracks = stream.getTracks();
    const kinds = tracks.map((t) => t.kind);
    console.log(tracks.length, kinds.join(", "));
  });

2 audio, video

function stopStream(stream) {
  stream.getTracks().forEach((track) => {
    track.stop();
  });
}

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

2

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    const filtered = stream.getTracks().filter((t) => t.kind === "audio");
    const direct = stream.getAudioTracks();
    console.log(filtered.length, direct.length);
  });

1 1

const canvas = document.createElement("canvas");
const stream = canvas.captureStream();
const tracks = stream.getTracks();

console.log(tracks.length, tracks[0] && tracks[0].kind);

1 video

🚀 Common Use Cases

• Stop every track when the user leaves a call or closes a modal (cleanup).
• Count how many tracks are in a composed or WebRTC stream.
• Log track.kind and track.label for debugging.
• Filter or find tracks before dedicated helper methods.
• MDN timer pattern: end a single track after a preview period.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2017) — no Deprecated / Experimental / Non-standard banner.
• All kinds — unlike getAudioTracks(), this includes video tracks too.
• Cleanup pattern — always stop tracks you no longer need to free camera/mic hardware.
• Stopped tracks — may still appear in the array; check track.readyState.
• Related learning: getAudioTracks(), getTrackById(), addTrack(), getUserMedia().

💡 Best Practices