JavaScript Navigator mediaDevices Property

What You’ll Learn

navigator.mediaDevices returns a MediaDevices object for cameras, microphones, and screen sharing. Learn getUserMedia, enumerateDevices, secure context rules, five examples, and try-it labs.

Introduction

Video calls, camera filters, and voice notes all start the same way: ask the browser for a live media stream from a camera or microphone.

navigator.mediaDevices is the modern entry point. MDN describes it as a singleton MediaDevices object — you usually call methods on it directly, such as navigator.mediaDevices.getUserMedia(). It belongs to the Media Capture and Streams API and pairs closely with WebRTC.

Understanding the mediaDevices Property

Think of it as the browser’s “media hardware front desk”: list devices, request a stream, and react when hardware is plugged in or removed.

• Value — the MediaDevices singleton.
• getUserMedia(constraints) — returns a Promise for a MediaStream.
• enumerateDevices() — lists audio/video input and output devices.
• devicechange — event when devices are added or removed.
• Also — related helpers like getDisplayMedia() for screen sharing (support varies).
• Baseline — Widely available (MDN, since about September 2017); secure context required.

📝 Syntax

General form of the property:

navigator.mediaDevices

Value

• A MediaDevices object (usually used via its methods, not by reading fields).

Common patterns

// Feature detect + secure context:
if (navigator.mediaDevices && window.isSecureContext) {
  // ready to call getUserMedia / enumerateDevices
}

// Typical camera + mic request:
navigator.mediaDevices
  .getUserMedia({ video: true, audio: true })
  .then(function (stream) {
    // video.srcObject = stream;
  })
  .catch(function (err) {
    console.error(err.name, err.message);
  });

Examples Gallery

Examples follow MDN MediaDevices patterns. Prefer Try It Yourself on HTTPS or localhost. Camera/mic demos need user permission.

const lines = [
  "secure: " + window.isSecureContext,
  "mediaDevices: " + Boolean(navigator.mediaDevices)
];
if (!window.isSecureContext) {
  lines.push("Serve over HTTPS (or localhost) to use mediaDevices");
} else if (!navigator.mediaDevices) {
  lines.push("Secure, but MediaDevices API not exposed");
} else {
  lines.push("Ready for getUserMedia / enumerateDevices");
}
console.log(lines.join("\n"));

secure: true
mediaDevices: true
Ready for getUserMedia / enumerateDevices

navigator.mediaDevices.enumerateDevices()
  .then(function (devices) {
    console.log("count: " + devices.length);
    devices.slice(0, 5).forEach(function (d) {
      console.log(
        d.kind + " | " +
        (d.label || "(no label yet)") + " | " +
        d.deviceId.slice(0, 8) + "…"
      );
    });
  });

count: 4
audioinput | (no label yet) | ab12cd34…
videoinput | (no label yet) | ef56gh78…
…
(your list and labels will vary)

async function startPreview() {
  if (!navigator.mediaDevices) {
    return "MediaDevices API not available.";
  }
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  });
  const tracks = stream.getTracks().map(function (t) {
    return t.kind + ":" + t.label;
  });
  // Important: stop tracks when you no longer need them
  stream.getTracks().forEach(function (t) { t.stop(); });
  return "got stream → " + tracks.join(", ");
}

startPreview()
  .then(function (msg) { console.log(msg); })
  .catch(function (err) {
    console.log(err.name + ": " + err.message);
  });

got stream → video:Integrated Camera, audio:Microphone Array
(or NotAllowedError if the user denies permission)

if (!navigator.mediaDevices) {
  console.log("MediaDevices API missing");
} else {
  navigator.mediaDevices.addEventListener("devicechange", function () {
    console.log("devicechange — re-run enumerateDevices()");
  });
  console.log("Listening for devicechange…");
  // Plug/unplug a USB mic to see the event in Try It Yourself
}

Listening for devicechange…
(later: devicechange — re-run enumerateDevices())

function mediaDevicesStatus() {
  const md = navigator.mediaDevices;
  return {
    secure: window.isSecureContext,
    available: Boolean(md),
    getUserMedia: Boolean(md && md.getUserMedia),
    enumerateDevices: Boolean(md && md.enumerateDevices),
    getDisplayMedia: Boolean(md && md.getDisplayMedia)
  };
}

console.log(JSON.stringify(mediaDevicesStatus(), null, 2));

{
  "secure": true,
  "available": true,
  "getUserMedia": true,
  "enumerateDevices": true,
  "getDisplayMedia": true
}

🚀 Common Use Cases

• Video calls — capture local camera/mic for WebRTC peer connections.
• Photo / AR filters — pipe getUserMedia into a <video> or canvas.
• Voice notes — record mic audio with MediaRecorder.
• Device pickers — build camera/mic dropdowns from enumerateDevices.
• Screen sharing — where supported, getDisplayMedia for tabs or screens.

📝 Notes

• Baseline Widely available (MDN, since about September 2017).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Secure context required (HTTPS / localhost).
• Some related methods (e.g. display capture) have varying support — feature-detect each.
• Related: mediaSession, mediaCapabilities, JavaScript hub.

💡 Best Practices