JavaScript MediaStream addTrack() Method

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

Definition

MediaStream.addTrack(track) adds a MediaStreamTrack to the stream. Per MDN, if that track is already in the stream, the call does nothing. It returns undefined.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call stream.addTrack. Start with this line.

JavaScript
mediaStream.addTrack(track)
CallWhat it does
mediaStream.addTrack(track)Primary signature.
stream.addTrack(...)Call with the arguments your case needs.

Built into the browser. Call addTrack(...) on a MediaStream — no import required.

Library declarations
JavaScript
mediaStream.addTrack(track)

Parameters

ParameterDescription
trackRequired. MediaStreamTrack to add

Return Value

Return ValueDescription
*Always undefined

JavaScript Examples

Example 1 — Add a Track to an Empty Stream

Start empty, then attach a canvas video track.

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

stream.addTrack(videoTrack);

console.log(stream.getTracks().length); // 1
console.log(stream.active);             // true
Try It Yourself

How It Works

  1. Get a track. Canvas captureStream() supplies a video track without permissions.
  2. Create an empty stream. new MediaStream() starts with zero tracks.
  3. Add the track. addTrack(videoTrack) puts it in the stream.
  4. Inspect. Track count becomes 1; a live track usually makes active true.

Example 2 — Duplicate addTrack Is a No-Op

MDN: adding the same track twice does not create a second entry.

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

stream.addTrack(track);
stream.addTrack(track);

console.log(stream.getTracks().length); // 1
Try It Yourself

How It Works

  1. Add once. The track enters the stream’s track set.
  2. Add again. Same object reference — already present.
  3. No second copy. Length stays 1.
  4. Safe to call. Duplicate adds do not throw; they simply do nothing.

Example 3 — Compose Two Tracks

Add tracks from two canvases into one composed stream.

JavaScript
const a = document.createElement("canvas");
const b = document.createElement("canvas");
const trackA = a.captureStream().getVideoTracks()[0];
const trackB = b.captureStream().getVideoTracks()[0];

const composed = new MediaStream();
composed.addTrack(trackA);
composed.addTrack(trackB);

console.log(composed.getTracks().length); // 2
Try It Yourself

How It Works

  1. Create two sources. Each canvas capture yields its own track.
  2. Start empty. composed begins with no tracks.
  3. Add both. Different track objects → both are accepted.
  4. Result. getTracks().length is 2.
Compatibility

Browser Support

MediaStream.addTrack() 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 composing media streams.

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 new MediaStream(tracks) when you already have the full track list; use addTrack when tracks arrive over time.

Frequently Asked Questions

addTrack(track) adds a MediaStreamTrack to the stream. It returns undefined. Use getTracks() afterward to inspect the stream.
No. MDN marks MediaStream.addTrack() as Baseline Widely available (since September 2017). It is not Deprecated, Experimental, or Non-standard.
If the track is already in the stream’s track set, addTrack() has no effect — the track is not added again.
new MediaStream([track]) builds a stream in one step. addTrack() lets you start with new MediaStream() and add tracks over time.
Usually yes when you add a live track. An empty stream is inactive until a live track is present.
Yes. Adding a track that was not already in the set typically fires the addtrack event on the stream.

Next: addtrack event

React when a track is added to a MediaStream.

addtrack 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)

10 people found this page helpful

JavaScript MediaStream() Constructor JavaScript MediaStream addtrack Event