All MIME types supported by MediaRecorder in Firefox and Chrome?

Question

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 onl

Answer 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)

Answer 2

Sorry, can't add comments; but thought it important to note: Implementation of recording raw samples via ScriptProcessor or audioWorklet is flawed for a number of reasons, one here - mainly because it connects you to an output node, and clock 'correction' happens before you see the data.

So lack of audio/wav or other raw format really kills.

But just maybe.... seems 'audio/webm;codecs=pcm' is supported in chrome.

Answer 3

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 the VIDEO_CODECS array by priority, so you can always fall to next best supported codec.

function getSupportedMimeTypes() {
  const VIDEO_TYPES = [
    "webm", 
    "ogg",
    "mp4",
    "x-matroska"
  ];
  const VIDEO_CODECS = [
    "vp9",
    "vp9.0",
    "vp8",
    "vp8.0",
    "avc1",
    "av1",
    "h265",
    "h.265",
    "h264",
    "h.264",
    "opus",
  ];

  const supportedTypes = [];
  VIDEO_TYPES.forEach((videoType) => {
    const type = `video/${videoType}`;
    VIDEO_CODECS.forEach((codec) => {
        const variations = [
        `${type};codecs=${codec}`,
        `${type};codecs:${codec}`,
        `${type};codecs=${codec.toUpperCase()}`,
        `${type};codecs:${codec.toUpperCase()}`
      ]
      variations.forEach(variation => {
        if(MediaRecorder.isTypeSupported(variation)) 
            supportedTypes.push(variation);
      })
    });
    if (MediaRecorder.isTypeSupported(type)) supportedTypes.push(type);
  });
  return supportedTypes;
}

const supportedMimeTypes = getSupportedMimeTypes();
console.log('Best supported mime types by priority : ', supportedMimeTypes[0])
console.log('All supported mime types ordered by priority : ', supportedMimeTypes)

Answer 4

I found a solution today which involves using var canRecordVp9 = MediaRecorder.isTypeSupported('video/webm;codecs=vp9');

to differentiate between Chrome(and Opera) and Firefox, and then do if (canRecordVp9) { mediaRecorder = new MediaRecorder(stream, {mimeType : 'video/webm;codecs=vp9'}); } else { mediaRecorder = new MediaRecorder(stream); }

to construct the MediaRecorder accordingly.

Then, when grabbing the blob: if (canRecordVp9) { blob = new Blob([myArrayBuffer], { "type" : "video/webm;codecs=vp9" }); } else { blob = new Blob([myArrayBuffer], { "type" : "video/webm" }); }

and finally, use the FileReader to get the blob as a dataUrl: `

var reader = new FileReader();
reader.onload = function(event)
{
    var blobDataUrl = event.target.result;
}
reader.readAsDataURL(blob);`

I then save the blobDataUrl as a webm file, and videos recorded in Chrome work fine in Firefox, and vice-versa.

Answer 5

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

Answer 6

MediaRecorder support for common audio codecs:

MediaRecorder.isTypeSupported('audio/webm;codecs=opus'); // true on chrome, true on firefox => SO OPUS IT IS!
MediaRecorder.isTypeSupported('audio/ogg;codecs=opus'); // false on chrome, true on firefox
MediaRecorder.isTypeSupported('audio/webm;codecs=vorbis'); // false on chrome, false on firefox
MediaRecorder.isTypeSupported('audio/ogg;codecs=vorbis'); // false on chrome, false on firefox

Firefox used Vorbis for audio recording in the 1st implementations but it moved to Opus since.

So OPUS it is!

---

This may prove of interest:

• MediaRecorder is currently experimental on Safari (August 2020.)
• caniuse Opus
• caniuse MediaRecorder