JavaScript MediaStream clone() Method

What You’ll Learn

The clone() method of MediaStream creates a duplicate stream with a new id and cloned MediaStreamTrack objects. Learn how that differs from new MediaStream(stream) (shared tracks), verify independent track objects, and when to clone for WebRTC or recording—with five examples and try-it labs.

Introduction

Sometimes you need a copy of a media stream—for example, to send the same camera feed to two peer connections without sharing one stream object. Call stream.clone() on any MediaStream from getUserMedia(), captureStream(), or your own composed stream.

MDN: the returned stream has a new unique id and contains clones of every track in the original. That is different from new MediaStream(original), which reuses the same track references.

Understanding MediaStream.clone()

An instance method that duplicates the stream and its tracks without modifying the original.

• Parameters — none.
• Return value — a new MediaStream instance.
• New id — the clone gets its own unique id string.
• Cloned tracks — each track is a clone, not the same object reference.
• Original unchanged — the source stream stays as it was.
• Baseline Widely available on MDN (since September 2017).

📝 Syntax

clone()

Parameters

None.

Return value

A new MediaStream with a new unique id and cloned copies of every MediaStreamTrack from the original stream.

Typical pattern

const original = canvas.captureStream();
const copy = original.clone();

console.log(original.id === copy.id);
console.log(original.getTracks().length, copy.getTracks().length);

⚖️ clone() vs Related Ideas

Examples Gallery

Examples follow MDN MediaStream: clone(). Labs use canvas.captureStream() so no camera permission is required.

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

console.log(original.getTracks().length, copy.getTracks().length);
console.log(original === copy);

1 1
false

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

console.log(original.id);
console.log(copy.id);
console.log(original.id === copy.id);

(two different UUID strings)
false

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

const origTrack = original.getVideoTracks()[0];
const copyTrack = copy.getVideoTracks()[0];

console.log(origTrack === copyTrack);
console.log(origTrack.id === copyTrack.id);

false
false

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

console.log(
  original.getTracks()[0] === shared.getTracks()[0],
  original.getTracks()[0] === cloned.getTracks()[0],
);

true false

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

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

console.log("original active:", original.active);
console.log("copy active:", copy.active);

original active: false
copy active: true

🚀 Common Use Cases

• Send duplicate camera feeds to multiple WebRTC peer connections.
• Branch a stream for recording while keeping the live preview running.
• Snapshot stream state without sharing mutable track references.
• Test pipelines with independent copies of the same capture.
• Avoid accidental cross-stream stop() when consumers are separate.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2017) — no Deprecated / Experimental / Non-standard banner.
• Cloned tracks — not the same objects as in the original stream.
• vs constructor — new MediaStream(s) shares track refs; clone() does not.
• Original intact — cloning does not remove or alter the source stream.
• Related learning: MediaStream(), addTrack(), id, active.

💡 Best Practices