JavaScript Navigator requestMediaKeySystemAccess() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word REQUESTMEDIAKEYSYSTEMACCESS

Definition

navigator.requestMediaKeySystemAccess(keySystem, supportedConfigurations) is the Encrypted Media Extensions (EME) entry point. It returns a Promise that resolves to a MediaKeySystemAccess object used to create keys for decrypting protected media (MDN).

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call navigator.requestMediaKeySystemAccess. Start with this line.

JavaScript
navigator.requestMediaKeySystemAccess(keySystem, configs)
CallWhat it does
navigator.requestMediaKeySystemAccess(keySystem, configs)Primary signature.
navigator.requestMediaKeySystemAccess(...)Call with the arguments your case needs.

Built into the browser. Call requestMediaKeySystemAccess(...) on a Navigator — no import required.

Library declarations
JavaScript
navigator.requestMediaKeySystemAccess(keySystem, configs)

Parameters

ParameterDescription
keySystemRequired. Key system id string (e.g. org.w3.clearkey)
supportedConfigurationsRequired. Non-empty array of config objects; first satisfiable wins

Return Value

Return ValueDescription
*Promise → MediaKeySystemAccess

JavaScript Examples

Example 1 — Feature Detect

Check the method and secure context before offering DRM / Clear Key UI.

JavaScript
const canEME =
  typeof navigator.requestMediaKeySystemAccess === "function";

console.log(canEME);                 // true when EME is exposed
console.log(window.isSecureContext); // true on HTTPS / localhost
console.log(canEME && window.isSecureContext); // ready to call
Try It Yourself

How It Works

  1. Check the method. Missing means EME is not exposed here.
  2. Check secure context. Required by the API (MDN).
  3. Combine flags. Only then show a “Play protected” control.
  4. Defer the real call. Request access when you need keys, not on idle load.

Example 2 — Request Clear Key Access

MDN-style Clear Key config; handle success or NotSupportedError.

JavaScript
const clearKeyOptions = [
  {
    initDataTypes: ["keyids", "webm"],
    audioCapabilities: [
      { contentType: 'audio/webm; codecs="opus"' },

      { contentType: 'audio/webm; codecs="vorbis"' }
    ],
    videoCapabilities: [
      { contentType: 'video/webm; codecs="vp9"' },

      { contentType: 'video/webm; codecs="vp8"' }
    ]
  }
];

navigator
  .requestMediaKeySystemAccess("org.w3.clearkey", clearKeyOptions)
  .then((access) => {
    console.log(access.keySystem); // "org.w3.clearkey"
    // later: return access.createMediaKeys();
  })
  .catch((err) => {
    console.log(err.name); // e.g. "NotSupportedError"
  });
Try It Yourself

How It Works

  1. List configs. First satisfiable object in the array is chosen.
  2. Pass Clear Key id. Good for learning EME without a commercial DRM.
  3. Resolve to access. Use createMediaKeys() when decrypting.
  4. Catch failures. Unsupported codecs or key systems reject the Promise.

Example 3 — Catch Empty Configs (TypeError)

Empty keySystem or empty configs array rejects with TypeError (MDN).

JavaScript
navigator
  .requestMediaKeySystemAccess("org.w3.clearkey", [])
  .then(() => console.log("unexpected success"))
  .catch((err) => {
    console.log(err.name); // "TypeError"
  });
Try It Yourself

How It Works

  1. Pass an empty array. Invalid per the API.
  2. Promise rejects. Name is TypeError (also for empty keySystem).
  3. Validate first. Always send at least one config object.
  4. Separate from NotSupportedError. That means “valid args, but platform cannot satisfy.”
Compatibility

Browser Support

Navigator.requestMediaKeySystemAccess() is part of Encrypted Media Extensions. MDN lists it as Baseline Widely available (since March 2019). Requires a secure context.

✓ Baseline · EME

Navigator.requestMediaKeySystemAccess()

Widely available for Clear Key and platform DRM. Actual commercial key-system ids still vary — feature-detect and catch NotSupportedError.

95% Baseline API
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
requestMediaKeySystemAccess() Excellent + HTTPS

Bottom line: Safe to rely on in modern browsers over HTTPS. See the MDN requestMediaKeySystemAccess() reference.

Frequently Asked Questions

It asks the browser for access to a media key system (DRM / Clear Key). If a matching configuration is supported, the Promise resolves to a MediaKeySystemAccess object you can use to create MediaKeys for decrypting encrypted media.
No. MDN marks it Baseline Widely available (since March 2019). It is not Deprecated, Experimental, or Non-standard. It does require a secure context (HTTPS / localhost).
Clear Key is a simple key system defined for EME testing and non-proprietary encrypted media. Real streaming services often use commercial systems such as Widevine, PlayReady, or FairPlay (browser-dependent).
Near the time you will create and use MediaKeys — not randomly on page load. The call may trigger user-visible permission or resource prompts.
The Promise rejects with NotSupportedError when the key system is missing or none of the supportedConfigurations can be satisfied (for example unsupported codecs).
Either audioCapabilities or videoCapabilities may be empty, but not both. Each capability needs a valid contentType MIME string (include codecs parameters when required).

Next: requestMIDIAccess()

Learn navigator.requestMIDIAccess() for Web MIDI device inputs and outputs.

requestMIDIAccess() 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)

11 people found this page helpful

JavaScript Navigator registerProtocolHandler() Method JavaScript Navigator requestMIDIAccess() Method