Geek Answers Handbook

Are all MIME types supported by MediaRecorder in Firefox and Chrome?

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

+21
mime-types firefox google-chrome web-mediarecorder
source share
3 answers

I haven’t seen any detailed list for Firefox yet, but I managed to find something (through a publication in the MediaRecorder API from the Google web updates section) that references this test suite that seems to shed some light on things.

In fact, it looks like (at the time of writing) the MIME types for video / audio in Chrome were adopted:

  • 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

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

+26
source share

For Firefox, the accepted mimetypes can be found in MediaRecorder.cpp and confirmed with 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
+8
source share

Today I found a solution that includes using var canRecordVp9 = MediaRecorder.isTypeSupported('video/webm;codecs=vp9');

make a distinction 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); } if (canRecordVp9) { mediaRecorder = new MediaRecorder(stream, {mimeType : 'video/webm;codecs=vp9'}); } else { mediaRecorder = new MediaRecorder(stream); }

Build MediaRecorder accordingly.

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

and finally use FileReader to get the blob as dataUrl: "

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

Then I save blobDataUrl as a web file, and the videos recorded in Chrome work fine in Firefox, and vice versa.

0
source share

More articles:


All Articles