JavaScript MediaStream id Property

What You’ll Learn

The read-only id property on a MediaStream is a 36-character unique identifier (GUID) for that stream object. Learn the MDN getUserMedia example, UUID-style format checks, storing streams in a Map by id, how stream.id differs from track.id, and a permission-free canvas.captureStream() demo—with five examples and try-it labs.

Introduction

Every MediaStream object the browser creates gets its own id—a string you can read but never change. You receive streams from getUserMedia(), captureStream(), WebRTC, and similar APIs; each new stream carries a fresh id.

MDN describes id as a 36-character GUID (globally unique identifier). In practice it looks like a UUID with hyphens, for example f47ac10b-58cc-4372-a567-0e02b2c3d479. Use it to label streams in logs, store them in a Map, or tell two camera feeds apart in a multi-stream app.

Understanding the id Property

A read-only instance property on MediaStream that holds the stream’s unique string identifier.

• Type — string.
• Read-only — you cannot assign to stream.id.
• Length — 36 characters (MDN).
• Format — GUID / UUID-style with hyphens.
• Unique — each MediaStream instance gets its own id.
• Typical read — right after getUserMedia() resolves.
• Baseline Widely available on MDN (since September 2017).

📝 Syntax

Read id on any MediaStream object:

mediaStream.id

Return value

A string: the unique identifier for this MediaStream (36 characters per MDN).

Typical pattern (MDN idea)

const promise = navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true,
});

promise.then((stream) => {
  console.log(stream.id);
});

⚖️ id vs Related Ideas

Examples Gallery

Examples follow MDN MediaStream.id. Labs use getUserMedia (secure context + permission) or canvas.captureStream() when no camera is needed.

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    console.log(stream.id);
  });

f47ac10b-58cc-4372-a567-0e02b2c3d479

const canvas = document.createElement("canvas");
const stream = canvas.captureStream();
const uuidLike = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

console.log(stream.id.length);
console.log(uuidLike.test(stream.id));

36
true

const streamsById = new Map();
const canvas = document.createElement("canvas");

function registerStream(stream) {
  streamsById.set(stream.id, stream);
  return stream.id;
}

const a = canvas.captureStream();
const b = canvas.captureStream();

registerStream(a);
registerStream(b);

console.log(streamsById.size);
console.log(a.id === b.id);

2
false

const stream = canvas.captureStream();
const track = stream.getVideoTracks()[0];

console.log("stream:", stream.id);
console.log("track:", track.id);
console.log(stream.id === track.id);

stream: a1b2c3d4-...
track: e5f6a7b8-...
false

const canvas = document.createElement("canvas");
const first = canvas.captureStream();
const second = canvas.captureStream();

console.log(first.id);
console.log(second.id);
console.log(first.id === second.id);

(two different UUID strings)
false

🚀 Common Use Cases

• Log stream.id when debugging WebRTC or getUserMedia issues.
• Key a Map or object that holds multiple active streams.
• Match UI labels to the correct stream in multi-camera layouts.
• Verify you received a new stream after re-calling getUserMedia.
• Distinguish stream id from track id in signaling or analytics payloads.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2017) — no Deprecated / Experimental / Non-standard banner.
• Read-only — you cannot set stream.id to a custom value.
• Not HTML id — unrelated to DOM element id attributes.
• Per object — stopping tracks does not change stream.id.
• Related learning: MediaStream.active, navigator.mediaDevices, getUserMedia(), MediaStreamTrack.id.

💡 Best Practices