JavaScript MediaStream active Property

What You’ll Learn

The read-only active property on a MediaStream tells you whether the stream still has at least one track that has not ended. Learn the MDN getUserMedia pattern, how track.stop() flips active to false, the inactive event, and a permission-free canvas.captureStream() demo—with five examples and try-it labs.

Introduction

A MediaStream is a bundle of MediaStreamTrack objects—audio, video, or both. You get one from APIs such as getUserMedia(), captureStream() on a canvas, or WebRTC peer connections.

The active property answers a simple question: is this stream still going? It is true while at least one track has a readyState other than "ended". When you stop every track, MDN says active becomes false.

Understanding the active Property

A read-only instance property on MediaStream that reports whether the stream still has usable tracks.

• Type — boolean (true or false).
• Read-only — you cannot assign to stream.active.
• true — at least one track’s readyState is not "ended".
• false — every track in the stream has readyState === "ended".
• Typical source — return value of navigator.mediaDevices.getUserMedia().
• Related event — inactive fires when active becomes false.
• Baseline Widely available on MDN (since September 2017).

📝 Syntax

Read active on any MediaStream object:

mediaStream.active

Return value

A boolean: true if the stream has at least one track that is not ended; otherwise false.

Typical pattern (MDN idea)

const startBtn = document.getElementById("start");
const stopBtn = document.getElementById("stop");

startBtn.addEventListener("click", () => {
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((stream) => {
      startBtn.disabled = stream.active;
      stopBtn.disabled = !stream.active;
    });
});

⚖️ active vs Related Ideas

Examples Gallery

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

const startBtn = document.getElementById("start");
let stream;

startBtn.addEventListener("click", () => {
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((s) => {
      stream = s;
      console.log("active:", stream.active);
      startBtn.disabled = stream.active;
    });
});

active: true

navigator.mediaDevices
  .getUserMedia({ audio: true })
  .then((stream) => {
    console.log("before:", stream.active);
    stream.getTracks().forEach((track) => track.stop());
    console.log("after:", stream.active);
  });

before: true
after: false

navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    const videoTrack = stream.getVideoTracks()[0];
    videoTrack.stop();
    console.log("video ended:", videoTrack.readyState);
    console.log("stream.active:", stream.active);
  });

video ended: ended
stream.active: true

const canvas = document.querySelector("canvas");
const stream = canvas.captureStream();

stream.addEventListener("inactive", () => {
  console.log("stream inactive, active =", stream.active);
});

stream.getTracks().forEach((track) => track.stop());

stream inactive, active = false

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 40, 40);

const stream = canvas.captureStream();
console.log("created:", stream.active);

stream.getTracks().forEach((track) => track.stop());
console.log("stopped:", stream.active);

created: true
stopped: false

🚀 Common Use Cases

• Disable a “Start camera” button while a stream is already active (MDN pattern).
• Enable “Stop” or cleanup UI only when stream.active is true.
• Guard against attaching ended streams to a <video> element.
• Listen for inactive to release UI or notify the user recording ended.
• Debug whether tracks were stopped after a call or tab switch.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since September 2017) — no Deprecated / Experimental / Non-standard banner.
• Read-only — you cannot set stream.active = false; stop the tracks instead.
• Secure context — getUserMedia() requires HTTPS or localhost; active itself works on any stream.
• Stopping one of several tracks may leave active true until every track ends.
• Related learning: navigator.mediaDevices, getUserMedia(), MediaStreamTrack.readyState.

💡 Best Practices