Why are the extra codecs causing errors for the Media Source API?

Question

I used mp4box(https://gpac.github.io/mp4box.js/dist/mp4box.all.js) to generate video/mp4; codecs="mp4a.40.2, avc1.42e01e, rtp , rtp ". When MediaSource.isTypeSupported(mimeCodec) is run it shows false. I know this mimeCodec works: video/mp4; codecs="avc1.42E01E, mp4a.40.2" Why does the Media Source API not accept what mp4box gathered and is there a way to make mp4box(or a similar program) provide video/mp4; codecs="avc1.42E01E, mp4a.40.2" automatically. I got the video from here: https://github.com/mdn/dom-examples/blob/main/sourcebuffer/frag_bunny.mp4. The following code is what I used to make video/mp4; codecs="mp4a.40.2, avc1.42e01e, rtp , rtp "

const assetURL = "frag_bunny.mp4";

mimeCodec=""

const mp4boxfile = MP4Box.createFile();
mp4boxfile.onError = console.error;
mp4boxfile.onReady = (info) => {
  console.log( info.tracks.map( track => track.codec ) );
  arraymimeCodec=info.tracks.map( track => track.codec )
  RepNum=0
  while(arraymimeCodec[RepNum]){
    mimeCodec=mimeCodec+arraymimeCodec[RepNum]
    RepNum++
    if(arraymimeCodec[RepNum]){mimeCodec=mimeCodec+", "}
  }
mimeCodec='video/mp4; codecs="'+mimeCodec+'"'
};

fetch(assetURL).then( (resp) => resp.arrayBuffer() )
  .then( (buf) => {
    buf.fileStart = 0;
    mp4boxfile.appendBuffer( buf );
    mp4boxfile.flush();
  } );

Answer 1

That's because your MIME type shouldn't include the types of the metadata tracks. Simply filter those out when you generate your mime type, or even, select only the first video and audio tracks:

const assetURL = "https://cdn.jsdelivr.net/gh/mdn/dom-examples/sourcebuffer/frag_bunny.mp4";

const mp4boxfile = MP4Box.createFile();
mp4boxfile.onError = console.error;
mp4boxfile.onReady = ({ tracks }) => {
  const videoCodec = tracks.find(({ type }) => type === "video")?.codec;
  const audioCodec = tracks.find(({ type }) => type === "audio")?.codec;
  const codecs = [videoCodec, audioCodec].filter(Boolean).join(", ");
  const mimeCodec = `video/mp4; codecs="${codecs}"`;
  console.log(mimeCodec, "- supported:", MediaSource.isTypeSupported(mimeCodec));
  // To show that there are metadata tracks in this file:
  console.log(tracks.map(({type}) => type));
}

fetch(assetURL).then((resp) => resp.arrayBuffer())
  .then((buf) => {
    buf.fileStart = 0;
    mp4boxfile.appendBuffer(buf);
    mp4boxfile.flush();
  });

<script src="https://gpac.github.io/mp4box.js/dist/mp4box.all.js"></script>