All MIME types supported by MediaRecorder in Firefox and Chrome?

Where can I find a list of all MIME types that are supported by Firefox or Chrome? All examples I've seen so far using video/webm only.

Solution 1:

I've not seen any sort of comprehensive list yet for Firefox but I have managed to find something (via a post on the MediaRecorder API from Google's web updates section) that links to this test set that seems to shed some light on things.

Essentially, it looks like the following are (at time of writing) accepted MIME types for video/audio in Chrome:

• video/webm
• video/webm;codecs=vp8
• video/webm;codecs=vp9
• video/webm;codecs=vp8.0
• video/webm;codecs=vp9.0
• video/webm;codecs=h264
• video/webm;codecs=H264
• video/webm;codecs=avc1
• video/webm;codecs=vp8,opus
• video/WEBM;codecs=VP8,OPUS
• video/webm;codecs=vp9,opus
• video/webm;codecs=vp8,vp9,opus
• video/webm;codecs=h264,opus
• video/webm;codecs=h264,vp9,opus

• video/x-matroska;codecs=avc1

• audio/webm

• audio/webm;codecs=opus

(EDITED 2019-02-10: Updated to include brianchirls' link find)

Solution 2:

I made this small function in my utils.js to get the best supported codec, with support for multiple possible naming variations (example : firefox support video/webm;codecs:vp9 but not video/webm;codecs=vp9)

You can reorder videoTypes, audioTypes and codecs arrays by priority, depending on your needs, so you'll always fall on the next supported type.

EDIT: Add support for audio, fixed mimetype duplicates

/**
 * @param  {"audio" | "video"} media  String "video" or "audio"
 * @param  {string[]} types           String array of types
 * @param  {string[]} codecs          String array of codecs
 * 
 * @return {string[]}                 Array of accepted "mimetype;codec"
 */
function getSupportedMimeTypes(media, types, codecs) {
  const isSupported = MediaRecorder.isTypeSupported;
  const supported = [];
  types.forEach((type) => {
    const mimeType = `${media}/${type}`;
    codecs.forEach((codec) => [
        `${mimeType};codecs=${codec}`,
        `${mimeType};codecs:${codec}`,
        `${mimeType};codecs=${codec.toUpperCase()}`,
        `${mimeType};codecs:${codec.toUpperCase()}`
      ].forEach(variation => {
        if(isSupported(variation)) 
            supported.push(variation);
    }));
    if (isSupported(mimeType))
      supported.push(mimeType);
  });
  return supported;
};

// Usage ------------------

const videoTypes = ["webm", "ogg", "mp4", "x-matroska"];
const audioTypes = ["webm", "ogg", "mp3", "x-matroska"];
const codecs = ["vp9", "vp9.0", "vp8", "vp8.0", "avc1", "av1", "h265", "h.265", "h264", "h.264", "opus", "pcm", "aac", "mpeg", "mp4a"];

const supportedVideos = getSupportedMimeTypes("video", videoTypes, codecs);
const supportedAudios = getSupportedMimeTypes("audio", audioTypes, codecs);

console.log('-- Top supported Video : ', supportedVideos[0])
console.log('-- Top supported Audio : ', supportedAudios[0])
console.log('-- All supported Videos : ', supportedVideos)
console.log('-- All supported Audios : ', supportedAudios)

Solution 3:

For Firefox, the accepted mimetypes can be found in MediaRecorder.cpp and confirmed using MediaRecorder.isTypeSupported(...)

Example:

21:31:27.189 MediaRecorder.isTypeSupported('video/webm;codecs=vp8')
21:31:27.135 true
21:31:41.598 MediaRecorder.isTypeSupported('video/webm;codecs=vp8.0')
21:31:41.544 true
21:32:10.477 MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
21:32:10.431 false
21:31:50.534 MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')
21:31:50.479 true
21:31:59.198 MediaRecorder.isTypeSupported('audio/webm')
21:31:59.143 false