JavaScript MediaStream() Constructor

Beginner
5 min read
Updated: Nov 2026
3 examples
Constructor
Decorative image with the word MEDIASTREAM

Definition

new MediaStream() returns a new MediaStream — a collection of MediaStreamTrack objects (audio, video, and more). Per MDN, you can create an empty stream, copy tracks from another stream, or pass an array of tracks.

Pass the required arguments shown below. Tracks may be shared across streams — know ownership before you stop them.

Syntax

Create a MediaStream. Start with this line.

JavaScript
new MediaStream() / (stream) / (tracks)
CallWhat it does
new MediaStream() / (stream) / (tracks)Primary signature.

Built into the browser. Call new MediaStream(...) — no import required.

Library declarations
JavaScript
new MediaStream() / (stream) / (tracks)

Parameters

ParameterDescription
(none)Optional. Empty stream with a new id
tracksOptional. Array of MediaStreamTrack objects

Return Value

Return ValueDescription
*A new MediaStream

JavaScript Examples

Example 1 — Empty MediaStream

Create a stream with no tracks and inspect its basics.

JavaScript
const stream = new MediaStream();

console.log(stream instanceof MediaStream); // true
console.log(stream.getTracks().length);     // 0
console.log(stream.active);                 // false
console.log(Boolean(stream.id));            // true
Try It Yourself

How It Works

  1. Call with no args. new MediaStream() builds an empty collection.
  2. Check the type. instanceof MediaStream confirms the result.
  3. Count tracks. getTracks() returns an empty array.
  4. Still identified. The browser assigns an id even with zero tracks.

Example 2 — From a Track Array

Build a stream from a canvas video track (no camera prompt).

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

const stream = new MediaStream([videoTrack]);

console.log(stream.getTracks().length);                 // 1
console.log(stream.getVideoTracks()[0] === videoTrack); // true
console.log(stream.active);                             // true
Try It Yourself

How It Works

  1. Capture a canvas stream. captureStream() gives a video track without permissions.
  2. Pick the track. getVideoTracks()[0] is the track to pass in.
  3. Construct with an array. new MediaStream([videoTrack]) adds that track.
  4. Same reference. The stream holds the identical track object you passed.

Example 3 — From Another Stream

Pass a stream to copy its tracks by reference (they stay shared).

JavaScript
const canvas = document.createElement("canvas");
const original = canvas.captureStream();
const copy = new MediaStream(original);

console.log(original.getTracks().length); // 1
console.log(copy.getTracks().length);     // 1
console.log(original.id === copy.id);     // false
console.log(
  original.getTracks()[0] === copy.getTracks()[0]
); // true (shared track)
Try It Yourself

How It Works

  1. Start with a source stream. Canvas capture supplies one video track.
  2. Pass the stream. new MediaStream(original) adds those tracks to a new stream.
  3. IDs differ. Each MediaStream gets its own id.
  4. Tracks are shared. Stopping the track on one stream affects the other.
Compatibility

Browser Support

The MediaStream() constructor 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()

Supported across modern Chrome, Firefox, Safari, and Edge for creating and 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
MediaStream() Excellent

Bottom line: Browser only — not a Node.js API. Safe for production web apps. Feature-detect with typeof MediaStream === "function" if you must support very old environments.

Frequently Asked Questions

new MediaStream() returns a new MediaStream — a collection of MediaStreamTrack objects. With no arguments the stream is empty; you can also pass another stream or an array of tracks.
No. MDN marks the MediaStream() constructor as Baseline Widely available (since September 2017). It is not Deprecated, Experimental, or Non-standard.
getUserMedia() asks for camera/microphone permission and returns a live device stream. new MediaStream() builds or reassembles streams in code without opening devices — useful for composition and tests.
No. new MediaStream(otherStream) adds the same track references. Tracks are shared; stopping a track affects every stream that contains it.
new MediaStream(stream) shares the original track objects. stream.clone() returns a new stream with a unique id and cloned tracks (not the same track references).
Yes. Even new MediaStream() with no tracks gets a browser-assigned id string.

Next: addTrack()

Learn how to add a MediaStreamTrack to an existing stream.

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