JavaScript MediaStream addtrack Event

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

Definition

The addtrack event fires on a MediaStream when a new MediaStreamTrack is added. 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 addtrack. Start with this line.

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

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

Library declarations
JavaScript
stream.addEventListener("addtrack", 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("addtrack")

Listen first, then add a canvas video track.

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

stream.addEventListener("addtrack", (event) => {
  console.log(`New ${event.track.kind} track added`);
});

stream.addTrack(track);
// New video track added
Try It Yourself

How It Works

  1. Create an empty stream. Nothing fires yet.
  2. Register the listener. Ready before any track is added.
  3. Add a track. addTrack puts the canvas video track in the stream.
  4. Read event.track. kind is "video".

Example 2 — onaddtrack 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.onaddtrack = (event) => {
  console.log(`New ${event.track.kind} track added`);
};

stream.addTrack(track);
// New video track added
Try It Yourself

How It Works

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

Example 3 — Duplicate Add Does Not Fire Again

If addTrack is a no-op, addtrack does not fire a second time.

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

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

stream.addTrack(track);
stream.addTrack(track); // already present

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

How It Works

  1. Count events. Start at 0.
  2. First add. Track enters the stream → event fires → count is 1.
  3. Second add. Same track already present → addTrack no-op.
  4. No second event. count stays 1.
Compatibility

Browser Support

The addtrack event is Baseline Widely available (MDN: since September 2017). 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: addtrack

Supported across modern Chrome, Firefox, Safari, and Edge for track-added 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
addtrack Excellent

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

Frequently Asked Questions

When a new MediaStreamTrack is added to a MediaStream — for example after calling addTrack(track) when that track was not already in the stream.
No. MDN marks the addtrack event as Baseline Widely available (since September 2017). It is not Deprecated, Experimental, or Non-standard.
A MediaStreamTrackEvent. It inherits from Event and exposes a read-only track property with the MediaStreamTrack that was added.
No. MDN says the event is not cancelable and does not bubble.
addTrack() adds a track to the stream. addtrack is the event that fires afterward — listen with addEventListener("addtrack", …) or onaddtrack.
removetrack fires when a track is removed from a MediaStream — for example after removeTrack(track). It is the counterpart to addtrack.

Next: clone()

Create a new stream with a unique id and cloned tracks.

clone() 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 addTrack() Method JavaScript MediaStream clone() Method