JSFiddle - React, Tailwind, and code Playground

by luiru72

HTML

<html>
<head>

</head>
<body>

<div class="mylist">
  <b>Video Types</b>
  <div id="videotypes"></div>
</div>

<div class="mylist">
  <b>Video Codecs</b>
  <div id="videocodecs"></div>
</div>

<div class="mylist">
  <b>Complete variations list</b>
  <div id="variations"></div>
</div>

</body>
</html>

CSS

.mylist {
  margin-bottom: 20px;
}

JavaScript

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

function getSupportedMimeTypes() {

  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()}`,
        `${type}`
      ]
      variations.forEach(variation => {
        if(MediaRecorder.isTypeSupported(variation)) 
            supportedTypes.push(variation);
      })
    });
  });
  return supportedTypes;
}

const supportedMimeTypes = getSupportedMimeTypes();

VIDEO_TYPES.forEach( (s) => document.getElementById('videotypes').innerHTML += s + '<br>');
VIDEO_CODECS.forEach( (s) => document.getElementById('videocodecs').innerHTML += s + '<br>');
supportedMimeTypes.forEach( (s) => document.getElementById('variations').innerHTML += s + '<br>');