MediaRecorder: Browser Support, Codecs, Limitations

What is MediaRecorder?

MediaRecorder is a W3C JavaScript interface in the MediaStream Recording API that records a MediaStream into a Blob of encoded audio or video. The MediaStream usually comes from getUserMedia, getDisplayMedia, or a Web Audio graph. It exposes start, stop, pause, resume, and dataavailable events to the page.

Which browsers does MediaRecorder support?

MediaRecorder works in every modern desktop and mobile browser. Chrome, Firefox, Edge, Opera, and Samsung Internet support it on Windows, macOS, Linux, ChromeOS, and Android, while Safari supports it from Safari 14.1 on macOS and Safari 14.5 on iOS.

What codecs and MIME types does MediaRecorder support?

MediaRecorder supports a different list of MIME types in each browser, so call MediaRecorder.isTypeSupported() before recording. Chromium browsers default to audio/webm with Opus and video/webm with VP8 or VP9, while Safari only writes audio/mp4 and video/mp4 with AAC and H.264.

• WebM with VP8 or VP9: Chrome 49+, Edge 79+, Firefox 29+, Opera 36+, and Samsung Internet 5+ all write audio/webm and video/webm. Safari does not write WebM.
• WebM with H.264: Chrome 52+ accepts video/webm;codecs=h264 on platforms that ship a hardware H.264 encoder. Firefox returns false from isTypeSupported() for that MIME.
• MP4 with H.264 and AAC: Safari 14.1+ on macOS and Safari 14.5+ on iOS write video/mp4 and audio/mp4. Chrome writes mp4 only when the platform offers an OS encoder, so test with isTypeSupported() first.
• Audio/webm with Opus: every WebM-supporting browser accepts audio/webm;codecs=opus.
• Audio/ogg with Opus: Firefox 29+ writes audio/ogg;codecs=opus. Chromium browsers and Safari do not.
• ALAC and PCM: Safari Technology Preview accepts audio/mp4;codecs=alac and audio/webm;codecs=pcm for lossless capture. Stable Safari and Firefox do not write them.

How do you check if a browser supports MediaRecorder?

Test MediaRecorder support in two steps. First, check that the MediaRecorder constructor exists in window. Second, call MediaRecorder.isTypeSupported() with the MIME type you plan to record. Both calls return synchronously, so they fit inside a feature-detect block before getUserMedia.

The isTypeSupported() call returns a boolean. A true result means the browser will accept the MIME type, but it does not promise the encoder can run at the requested bitrate on the current device. Always wrap MediaRecorder.start() in a try/catch and listen for the error event in case the encoder rejects the stream at runtime.

Paste this snippet into the browser DevTools console to confirm the constructor and the four most common MIME types:

// Run in the DevTools console of any browser to test MediaRecorder support.
const hasMediaRecorder = "MediaRecorder" in window;
console.log("MediaRecorder constructor:", hasMediaRecorder ? "yes" : "no");

if (hasMediaRecorder) {
  const mimeChecks = [
    "audio/webm;codecs=opus",
    "audio/mp4;codecs=mp4a.40.2",
    "video/webm;codecs=vp9,opus",
    "video/mp4;codecs=avc1.42E01E,mp4a.40.2"
  ];
  for (const mime of mimeChecks) {
    const ok = MediaRecorder.isTypeSupported(mime);
    console.log(mime, "->", ok ? "yes" : "no");
  }
}

If every MIME prints "no", the browser cannot record at all and your page should fall back to a server-side recorder or a WebRTC pipe to the backend.

How to enable MediaRecorder in Safari?

Safari supports MediaRecorder by default from Safari 14.1 on macOS and Safari 14.5 on iOS. On older Safari 12.1 to 14 on macOS and Safari 12 to 14.4 on iOS, the API ships but is disabled, so flip the experimental flag before any page can use it.

• Show the Develop menu: Open Safari, Settings, Advanced, and tick "Show features for web developers" so the Develop menu appears in the menu bar.
• Open Feature Flags: Click Develop, Feature Flags (or Develop, Experimental Features on Safari 14 and earlier) to load the flag panel.
• Toggle MediaRecorder: Search for MediaRecorder in the flag list and switch it on.
• Reload the page: Close and reopen Safari, then reload your page so the flag takes effect.
• Confirm support: Open the JavaScript console and run typeof MediaRecorder; if the result is "function", the flag is live.

On iPhone or iPad, open Settings, Safari, Advanced, Experimental Features, toggle MediaRecorder on, and reload Safari. The flag is sticky, so you only have to do it once per device.

What are the known issues with MediaRecorder?

MediaRecorder has the broadest reach of any web recording API, but a few real edge cases still break in production. The biggest hits are codec interop, iPhone Safari quirks, and the legacy Android Browser gap.

• Older Safari kept it behind a flag: Safari 12.1 to 14 on macOS and Safari 12 to 14.4 on iOS shipped MediaRecorder behind Experimental Features. Sites that target visitors on macOS Big Sur 11.2 or iOS 14.4 still need a server-side recorder fallback.
• Codecs are not interoperable: Chrome and Firefox write audio/webm with Opus, while Safari writes audio/mp4 with AAC. A WebM file from Chrome will not play in Safari without re-muxing on the server.
• IE and Android Browser never supported it: IE 5.5 through 11 and the stock Android Browser do not include MediaRecorder. Use Edge, Chrome, or Firefox on those platforms.
• Firefox does not write video/webm with H.264: Chrome 52+ accepts video/webm;codecs=h264 on platforms with hardware H.264, but Firefox returns false from isTypeSupported() for that MIME.
• timeslice quirk in Firefox: Firefox's start(timeslice) does not strictly chunk data on the timeslice boundary, so Blobs from short timeslices can be larger than the requested window.
• Constraints reset audio in older Chrome: Calling track.applyConstraints() on a recording track silently resets the encoder in Chrome 90 and earlier. Pause MediaRecorder before applying new constraints, then resume.

In my experience, the most surprising failure happens on iPhone Safari. Even when isTypeSupported('audio/webm;codecs=opus') returns true, MediaRecorder.start() throws NotSupportedError on iOS, and the page silently records nothing. Always test the actual start() call, not just isTypeSupported().

Citations

All MediaRecorder version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - MediaRecorder: developer.mozilla.org/en-US/docs/Web/API/MediaRecorder
• MDN Web Docs - MediaStream Recording API: developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API
• MDN Web Docs - MediaRecorder.isTypeSupported(): developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static
• MDN Web Docs - MediaRecorder() constructor: developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
• W3C - MediaStream Recording specification: w3.org/TR/mediastream-recording
• W3C - mediacapture-record editor's draft: w3c.github.io/mediacapture-record
• WebKit - MediaRecorder API: webkit.org/blog/11353/mediarecorder-api
• WebKit - New WebKit Features in Safari 14.1: webkit.org/blog/11648/new-webkit-features-in-safari-14-1
• Chrome for Developers - Record audio and video with MediaRecorder: developer.chrome.com/blog/mediarecorder
• Apple Developer - Safari 14.5 release notes: developer.apple.com/documentation/safari-release-notes/safari-14_1-release-notes