JavaScript MediaStream clone() Method

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

Definition

MediaStream.clone() creates a duplicate of the stream. Per MDN, the copy has a new unique id and contains clones of every MediaStreamTrack — not the same track objects.

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

Syntax

Call stream.clone. Start with this line.

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

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

Library declarations
JavaScript
mediaStream.clone()

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*New MediaStream with cloned tracks

JavaScript Examples

Example 1 — Basic clone()

Duplicate a canvas stream and compare object identity.

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

console.log(original.getTracks().length); // 1
console.log(copy.getTracks().length);     // 1
console.log(original === copy);           // false
Try It Yourself

How It Works

  1. Capture a source stream. Canvas gives one video track without permissions.
  2. Call clone(). Returns a new MediaStream.
  3. Same track count. The clone has one track too.
  4. Different object. original === copy is false.

Example 2 — New Stream Id and Track Objects

MDN: new unique id, and tracks are clones — not the same references.

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

console.log(original.id === copy.id); // false
console.log(
  original.getTracks()[0] === copy.getTracks()[0]
); // false
Try It Yourself

How It Works

  1. Clone the stream. Browser assigns a fresh stream id.
  2. Compare ids. They must not match.
  3. Compare track refs. Cloned tracks are new objects.
  4. Why it matters. You can stop or mute one side without the other sharing that object.

Example 3 — clone() vs new MediaStream(stream)

Constructor shares tracks; clone() does not.

JavaScript
const original = document.createElement("canvas").captureStream();
const shared = new MediaStream(original);
const cloned = original.clone();

console.log(
  original.getTracks()[0] === shared.getTracks()[0]
); // true
console.log(
  original.getTracks()[0] === cloned.getTracks()[0]
); // false
Try It Yourself

How It Works

  1. Build a source stream. One canvas video track.
  2. Constructor path. new MediaStream(original) reuses the same track object.
  3. Clone path. clone() creates a new track object.
  4. Pick intentionally. Share for composition; clone for independence.

Example 4 — Stop Independence

Stopping the original track does not stop a cloned track.

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

original.getTracks()[0].stop();

console.log(original.active); // false
console.log(copy.active);     // true
Try It Yourself

How It Works

  1. Clone first. Copy gets its own track object.
  2. Stop the original track. Only that track ends.
  3. Original goes inactive. No live tracks left on it.
  4. Clone stays active. Its cloned track is still live.

Example 5 — Clone an Empty Stream

Empty streams still get a new id when cloned.

JavaScript
const original = new MediaStream();
const copy = original.clone();

console.log(original.getTracks().length); // 0
console.log(copy.getTracks().length);     // 0
console.log(original.id === copy.id);     // false
Try It Yourself

How It Works

  1. Start empty. No tracks on original.
  2. Call clone(). Still returns a new stream.
  3. Track counts stay zero. Nothing to duplicate.
  4. Ids still differ. Each stream gets its own unique id.
Compatibility

Browser Support

MediaStream.clone() 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.clone()

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

Bottom line: Browser only — not a Node.js API. Safe for production. Use clone() when you need a new stream id and independent track objects.

Frequently Asked Questions

clone() creates a duplicate MediaStream. The new stream has a new unique id and contains clones of every MediaStreamTrack from the original — not the same track objects.
No. MDN marks MediaStream.clone() as Baseline Widely available (since September 2017). It is not Deprecated, Experimental, or Non-standard.
No. Call it on an existing MediaStream with no arguments: stream.clone().
new MediaStream(other) shares the same track references. clone() returns a new stream whose tracks are independent clones.
Yes. MDN says the new MediaStream has a new unique id.
A new MediaStream instance with cloned tracks. The original stream is unchanged.

Next: getAudioTracks()

Filter a stream down to its audio tracks only.

getAudioTracks() →

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 addtrack Event JavaScript MediaStream getAudioTracks() Method