navigator.mediaCapabilities is the entry point for the Media Capabilities API. Learn decodingInfo / encodingInfo, the supported · smooth · powerEfficient result flags, adaptive media tips, five examples, and try-it labs.
Read-only property
MediaCapabilities
Widely available
decodingInfo()
encodingInfo()
supported · smooth · power
Streaming apps often ask: Can this device play H.264 1080p smoothly without draining the battery? Older helpers like canPlayType() only give a rough “maybe.”
navigator.mediaCapabilities returns a MediaCapabilities object. You pass a media configuration (codec, bitrate, resolution, and so on) to decodingInfo() or encodingInfo() and get a Promise with three booleans: supported, smooth, and powerEfficient.
Use the API before choosing a quality ladder rung — prefer a lower bitrate when smooth or powerEfficient is false, even if the format is technically supported.
mediaCapabilities PropertyThink of it as a “media hardware interview” for the browser: you describe a clip, and it answers whether it can play (or encode) that clip well.
navigator.mediaCapabilities (also on WorkerNavigator).decodingInfo(config) and encodingInfo(config).type ("file", "media-source", …) plus audio and/or video details.supported, smooth, powerEfficient.General form of the property:
navigator.mediaCapabilitiesMediaCapabilities object with decodingInfo() and encodingInfo().// Feature detect:
if ("mediaCapabilities" in navigator) {
// Media Capabilities API available
}
// MDN-style audio decoding check:
navigator.mediaCapabilities
.decodingInfo({
type: "file",
audio: {
contentType: "audio/mp3",
channels: 2,
bitrate: 132700,
samplerate: 5200
}
})
.then(function (result) {
console.log("supported:", result.supported);
console.log("smooth:", result.smooth);
console.log("powerEfficient:", result.powerEfficient);
});| Goal | Code |
|---|---|
| Get the API object | navigator.mediaCapabilities |
| Feature detect | "mediaCapabilities" in navigator |
| Decode check | navigator.mediaCapabilities.decodingInfo(config) |
| Encode check | navigator.mediaCapabilities.encodingInfo(config) |
| Result fields | supported, smooth, powerEfficient |
| Status (MDN) | Baseline Widely available |
Four facts to remember about navigator.mediaCapabilities.
MediaCapabilitiesAPI entry
widelySince ~Jan 2020
PromisedecodingInfo
3 flagssupport · smooth · power
mediaCapabilities vs canPlayType()mediaCapabilities | canPlayType() | |
|---|---|---|
| Question | Supported + smooth + power efficient? | Can the element play this type? |
| Answer shape | Booleans via Promise | "" / "maybe" / "probably" |
| Detail level | Codec, bitrate, size, framerate… | Mostly MIME / codec string |
| Best for | Adaptive streaming quality choice | Quick “is this MIME OK?” checks |
| MDN guidance | Media Capabilities improves on canPlayType / isTypeSupported for quality decisions | |
Examples follow MDN Media Capabilities patterns with decodingInfo. Prefer Try It Yourself — results depend on your device and browser.
Detect the API and run the classic MDN audio check.
Check whether navigator.mediaCapabilities exists before calling it.
const supported = "mediaCapabilities" in navigator;
console.log(supported
? "Media Capabilities API available"
: "Media Capabilities API missing");On modern Baseline browsers the property is present. Always detect in shared libraries for older environments.
decodingInfo (MDN)Ask whether an MP3-style audio configuration is supported, smooth, and power efficient.
navigator.mediaCapabilities
.decodingInfo({
type: "file",
audio: {
contentType: "audio/mp3",
channels: 2,
bitrate: 132700,
samplerate: 5200
}
})
.then(function (result) {
console.log(
"This configuration is " +
(result.supported ? "" : "not ") + "supported,"
);
console.log((result.smooth ? "" : "not ") + "smooth, and");
console.log(
(result.powerEfficient ? "" : "not ") + "power efficient."
);
});This mirrors MDN’s sample: pass a type plus an audio description, then read the three result flags.
Video checks, quality picking, and a reusable helper.
Test a common H.264 / AVC configuration for media-source style playback.
navigator.mediaCapabilities
.decodingInfo({
type: "media-source",
video: {
contentType: 'video/mp4; codecs="avc1.42E01E"',
width: 1920,
height: 1080,
bitrate: 2000000,
framerate: 30
}
})
.then(function (result) {
console.log(JSON.stringify({
supported: result.supported,
smooth: result.smooth,
powerEfficient: result.powerEfficient
}));
});Include resolution, bitrate, and framerate so the browser can judge real playback cost — not just the codec string.
Compare two video configs and prefer the one that is supported and smooth.
async function pickVideo() {
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(function (choice) {
console.log("chosen: " + choice);
});Query several ladder rungs in parallel, then pick the highest that stays supported and smooth (optionally also power efficient).
Wrap detection and decodingInfo into one friendly summary object.
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(function (summary) {
console.log(JSON.stringify(summary));
});Centralize feature detection, await the Promise, and catch TypeErrors from invalid configs so your player UI can fall back cleanly.
powerEfficient configs on mobile.encodingInfo before MediaRecorder or WebCodecs pipelines.WorkerNavigator.navigator.mediaCapabilities WorksType, codecs, size, bitrate, channels, framerate…
The browser estimates capability for that config.
supported, smooth, powerEfficient.
Serve a format that plays well on this device.
WorkerNavigator.mediaCapabilities.navigator.mediaCapabilities is Baseline Widely available across modern browsers (MDN: since about January 2020). Use decodingInfo / encodingInfo to choose media that stays smooth and power efficient.
Query decode/encode ability for a config, then pick streams using supported, smooth, and powerEfficient.
Bottom line: Feature-detect, call decodingInfo with a realistic config, and fall back when supported or smooth is false.
navigator.mediaCapabilities opens the Media Capabilities API. Pass a media configuration to decodingInfo or encodingInfo, read supported / smooth / powerEfficient, and choose a stream that fits the device — not just one that “might” play.
Continue with mediaDevices, maxTouchPoints, or the JavaScript hub.
"mediaCapabilities" in navigatorcanPlayType for quality decisionsmediaCapabilitiesBaseline Media Capabilities entry — query decode/encode quality before streaming.
MediaCapabilities
EntrydecodingInfo
Decode3 booleans
ResultPick streams
ABRBaseline
WideMDN positions Media Capabilities as an upgrade over canPlayType() and MediaSource.isTypeSupported() — because “playable” is not the same as “smooth and battery-friendly.”
Learn getUserMedia and device listing for cameras and microphones.
8 people found this page helpful