JavaScript Navigator mediaCapabilities Property

Beginner
5 min read
Updated: Nov 2026
5 examples
Property
Decorative image with the word MEDIACAPABILITIES

Definition

navigator.mediaCapabilities is a read-only Navigator property that returns a MediaCapabilities object (MDN). Ask whether a media configuration can be decoded or encoded — and whether that path looks supported, smooth, and powerEfficient.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use navigator.mediaCapabilities. Start with this line.

JavaScript
navigator.mediaCapabilities
CallWhat it does
navigator.mediaCapabilitiesPrimary signature.

Built into the browser. Read navigator.mediaCapabilities on Navigator — no import required.

Library declarations
JavaScript
navigator.mediaCapabilities

Parameters

ParameterDescription
typeRequired. "file", "media-source", or "webrtc"

Return Value

Return ValueDescription
*The current value of navigator.mediaCapabilities.

JavaScript Examples

Example 1 — Feature Detection

Check whether navigator.mediaCapabilities is exposed.

JavaScript
const supported = "mediaCapabilities" in navigator;
console.log(
  supported
    ? "Media Capabilities API available"
    : "Media Capabilities API missing"
);
Try It Yourself

How It Works

  1. Use in. Safe check without calling methods.
  2. Branch early. Fall back to canPlayType when missing.
  3. Expect modern support. Baseline since ~2020 on evergreen browsers.
  4. Then call info methods. Detection alone does not query codecs.

Example 2 — Audio decodingInfo (MDN)

Ask whether an MP3 file configuration is supported, smooth, and power efficient.

JavaScript
if (!("mediaCapabilities" in navigator)) {
  console.log("API missing");
} else {
  navigator.mediaCapabilities
    .decodingInfo({
      type: "file",
      audio: {
        contentType: "audio/mp3",
        channels: 2,
        bitrate: 132700,
        samplerate: 5200
      }
    })
    .then((result) => {
      console.log(
        "This configuration is " +
          (result.supported ? "" : "not ") +
          "supported,"
      );
      console.log((result.smooth ? "" : "not ") + "smooth, and");
      console.log(
        (result.powerEfficient ? "" : "not ") + "power efficient."
      );
    });
}
Try It Yourself

How It Works

  1. Guard the API. Skip when mediaCapabilities is missing.
  2. Pass a file + audio config. MDN’s sample uses audio/mp3 with channels, bitrate, and samplerate.
  3. Await decodingInfo. Returns three boolean flags.
  4. Print human text. Same messaging style as the MDN example.

Example 3 — Video decodingInfo

Check an H.264 1080p media-source configuration as JSON flags.

JavaScript
if (!("mediaCapabilities" in navigator)) {
  console.log("API missing");
} else {
  navigator.mediaCapabilities
    .decodingInfo({
      type: "media-source",
      video: {
        contentType: 'video/mp4; codecs="avc1.42E01E"',
        width: 1920,
        height: 1080,
        bitrate: 2000000,
        framerate: 30
      }
    })
    .then((result) => {
      console.log(
        JSON.stringify(
          {
            supported: result.supported,
            smooth: result.smooth,
            powerEfficient: result.powerEfficient
          },
          null,
          2
        )
      );
    });
}
Try It Yourself

How It Works

  1. Use media-source. Matches MSE / adaptive streaming configs.
  2. Describe the video. Codec string plus width, height, bitrate, framerate.
  3. Read structured flags. JSON is easy to log or store.
  4. Expect device variance. Smooth/powerEfficient can be false on low-end hardware.

Example 4 — Pick 360p vs 1080p

Compare two rungs and choose a supported, preferably smooth quality.

JavaScript
async function pickVideo() {
  if (!("mediaCapabilities" in navigator)) return "unsupported";
  const mc = navigator.mediaCapabilities;
  const low = {
    type: "file",
    video: {
      contentType: 'video/mp4; codecs="avc1.42E01E"',
      width: 640,
      height: 360,
      bitrate: 800000,
      framerate: 30
    }
  };
  const high = {
    type: "file",
    video: {
      contentType: 'video/mp4; codecs="avc1.42E01E"',
      width: 1920,
      height: 1080,
      bitrate: 4000000,
      framerate: 30
    }
  };
  const [a, b] = await Promise.all([
    mc.decodingInfo(low),
    mc.decodingInfo(high)
  ]);
  if (b.supported && b.smooth) return "1080p";
  if (a.supported) return "360p";
  return "unsupported";
}

pickVideo().then((choice) => console.log("chosen: " + choice));
Try It Yourself

How It Works

  1. Define two configs. Same codec, different resolution/bitrate.
  2. Query in parallel. Promise.all keeps the check fast.
  3. Prefer high if smooth. Need both supported and smooth.
  4. Fall back to low. Still playable when 1080p looks risky.

Example 5 — Safe Decode Helper

Wrap detect + decodingInfo + errors into one summary object.

JavaScript
async function describeDecode(config) {
  if (!("mediaCapabilities" in navigator)) {
    return { ok: false, reason: "unsupported" };
  }
  try {
    const r = await navigator.mediaCapabilities.decodingInfo(config);
    return {
      ok: true,
      supported: r.supported,
      smooth: r.smooth,
      powerEfficient: r.powerEfficient,
      score:
        (r.supported ? 1 : 0) +
        (r.smooth ? 1 : 0) +
        (r.powerEfficient ? 1 : 0)
    };
  } catch (err) {
    return {
      ok: false,
      reason: String(err.name || "Error"),
      message: String(err.message || err)
    };
  }
}

describeDecode({
  type: "file",
  audio: {
    contentType: "audio/mp3",
    channels: 2,
    bitrate: 132700,
    samplerate: 5200
  }
}).then((summary) => console.log(JSON.stringify(summary, null, 2)));
Try It Yourself

How It Works

  1. Detect first. Return a clear unsupported reason when missing.
  2. Try / catch. Invalid configs can reject the Promise.
  3. Copy the three flags. Same fields the API returns.
  4. Add a simple score. Quick way to rank candidate streams (0–3).
Compatibility

Browser Support

navigator.mediaCapabilities is Baseline Widely available (MDN). Evergreen browsers have shipped it since about January 2020; some codec/config details still vary.

✓ Baseline · Widely available

Navigator.mediaCapabilities

Supported in modern Chrome, Firefox, Safari, Edge, and Opera. Also available on WorkerNavigator in supporting engines.

95% Modern browser support
Google Chrome Media Capabilities · Desktop & Mobile
Full support
Mozilla Firefox Media Capabilities · Desktop & Mobile
Full support
Apple Safari Media Capabilities · macOS & iOS
Full support
Microsoft Edge Media Capabilities · Chromium
Full support
Opera Media Capabilities · Modern versions
Full support
Internet Explorer No Media Capabilities API
Unavailable
navigator.mediaCapabilities Excellent

Bottom line: Safe for modern adaptive players. Feature-detect, catch rejections, and keep a canPlayType / fixed-quality fallback.

Frequently Asked Questions

A read-only MediaCapabilities object. Call decodingInfo() or encodingInfo() with a media configuration to learn whether it is supported, smooth, and powerEfficient (MDN).
No. MDN marks it Baseline Widely available (since about January 2020). It is not Deprecated, Experimental, or Non-standard — some codec/config details may still vary by browser.
supported means the browser can handle the configuration. smooth means playback/encoding should stay fluid. powerEfficient means the path is expected to use hardware efficiently and save power when possible.
canPlayType() and MediaSource.isTypeSupported() mainly answer playability. Media Capabilities also estimates smoothness and power efficiency so you can pick a better stream, not only a playable one.
Yes. WorkerNavigator also exposes mediaCapabilities, so you can run capability checks off the main thread.
No. It is read-only. You call methods on the MediaCapabilities object; you do not assign a new value to navigator.mediaCapabilities.

Next: mediaDevices

Learn how navigator.mediaDevices enumerates cameras, mics, and displays.

mediaDevices tutorial →

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 Navigator maxTouchPoints Property JavaScript Navigator mediaDevices Property