JavaScript MediaStream getTrackById() Method

What You’ll Learn

The getTrackById() method of MediaStream returns a single MediaStreamTrack that matches an id string, or null if none is found. Learn the MDN commentary ducking pattern, saving track.id from getUserMedia, null handling, and comparison with getTracks()—with five examples and try-it labs.

Introduction

Every MediaStreamTrack has a unique read-only id string. When a stream holds multiple tracks—main audio, commentary, camera, screen share—you often need to target one specific track later. getTrackById(id) does exactly that: pass the id, get the matching track, or null if it is not in this stream.

MDN’s example ducks the primary audio to 50% volume and enables a commentary track—both located by ids you saved earlier. Track ids are randomly generated by the browser, so store them when you first receive the stream rather than hard-coding UUIDs.

Understanding MediaStream.getTrackById()

An instance method that looks up one track in the stream by its MediaStreamTrack.id value.

• Parameters — id: a string identifying the track.
• Return value — matching MediaStreamTrack, or null if no track has that id.
• Match rule — compares against MediaStreamTrack.id (strict string match).
• Scope — only tracks currently in this stream; ids from other streams return null.
• Pair with — getAudioTracks(), getTracks(), addTrack().
• Baseline Widely available on MDN (since September 2017).

📝 Syntax

getTrackById(id)

Parameters

id — A string that identifies the track to return (must match MediaStreamTrack.id).

Return value

The MediaStreamTrack whose id matches, or null if no such track exists in the stream.

Typical pattern (MDN idea)

const primaryAudioTrack = stream.getTrackById(
  "69f8520f-d94e-43f0-8a7c-77b1774f3b8f",
);
const commentaryTrack = stream.getTrackById(
  "b5410643-2549-491e-b0f7-f08a4ebe54b8",
);

primaryAudioTrack.applyConstraints({ volume: 0.5 });
commentaryTrack.enabled = true;

MDN notes: ids are browser-generated—save them when you obtain the stream instead of copying example UUIDs.

⚖️ getTrackById() vs Related Ideas

Examples Gallery

Examples follow MDN MediaStream: getTrackById(). Mic demos use getUserMedia (secure context + permission).

navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then((stream) => {
    const audioId = stream.getAudioTracks()[0].id;
    const found = stream.getTrackById(audioId);
    console.log(found.kind, found.id === audioId);
  });

audio true

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

const missing = stream.getTrackById("not-a-real-track-id");
console.log(missing);

null

// Save real ids when you get the stream — these are MDN placeholders.
const primaryAudioTrack = stream.getTrackById(
  "69f8520f-d94e-43f0-8a7c-77b1774f3b8f",
);
const commentaryTrack = stream.getTrackById(
  "b5410643-2549-491e-b0f7-f08a4ebe54b8",
);

if (primaryAudioTrack) {
  primaryAudioTrack.applyConstraints({ volume: 0.5 });
}
if (commentaryTrack) {
  commentaryTrack.enabled = true;
}

primary volume ducked
commentary enabled

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    const videoId = stream.getVideoTracks()[0].id;
    const direct = stream.getTrackById(videoId);
    const found = stream.getTracks().find((t) => t.id === videoId);
    console.log(direct === found, direct.kind);
  });

true video

const trackIds = {};

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    stream.getTracks().forEach((track) => {
      trackIds[track.kind] = track.id;
    });

    const mic = stream.getTrackById(trackIds.audio);
    if (mic) mic.enabled = false;
    console.log(mic && mic.kind);
  });

audio

🚀 Common Use Cases

• Switch between main audio and commentary tracks (MDN ducking pattern).
• Mute or stop one specific track without affecting others in the stream.
• Re-find a track after UI events when you only stored its id string.
• Verify a track is still in the stream before applying constraints.
• WebRTC apps that receive track ids from signaling and attach to local streams.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2017) — no Deprecated / Experimental / Non-standard banner.
• Null when missing — wrong id, removed track, or id from another stream all return null.
• Save ids early — browser-generated UUIDs; do not hard-code MDN example ids in production.
• Null checks — always verify the result before applyConstraints, stop(), or enabled.
• Related learning: getAudioTracks(), getTracks(), addTrack(), getUserMedia().

💡 Best Practices