mimeType = "video/mp4" doesn't work

Hi, this project helps me a lot, thank you very much.

Summary:

I successfully can create blob url of mp4 and that URL is able to be played on Chrome, but once I downloaded it, it’s not playable for QuickTime Player.

(Regarding this truth, I changed the issue summary)

Even when I give recorder mimeType with "video/mp4", the generated file is webm, as ffmpeg said. That causes that I cannot play that video on QuickTime Player nor upload to Twitter.

Reproducibility:

• 100%
• Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36"
• Here is an example product to reproduce this problem https://github.com/otiai10/msr-debug

const main = () => {
  console.log('MediaStreamRecorder:', typeof MediaStreamRecorder);
  navigator.getUserMedia({audio:false, video:true}, (stream) => {

    var recorder = new MediaStreamRecorder(stream);
    // recorder.mimeType = 'video/mp4';
    recorder.mimeType = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    recorder.width    = 800;
    recorder.height   = 480;

    recorder.ondataavailable = (blob) => {
      const url = URL.createObjectURL(blob);
      // It works, looks good.
      window.open(url);

      // When I downloaded it as a file,
      var a = document.createElement('a');
      a.href = url;
      a.download = 'msr-example.mp4';
      a.click();
      // successful, but not playable on QuickTime Player
    };

    // Record it for 3s
    recorder.start();
    setTimeout(() => recorder.stop(), 3000);

  }, (err) => {
    console.error('getUserMedia failed', err);
  });
};

window.onload = main;

Screen Shots:

Console

working and playable on Chrome

not playable on QuickTime

Comment:

I also found https://github.com/streamproc/MediaStreamRecorder/issues/69 and I assumed that is because codec support of QuickTime. I’m not familiar with binary/blob/encode/decode stuff, therefore any of your advise would be helpful for me. Thank you again.

cc @muaz-khan

[stevula]

What was your misunderstanding @otiai10 ? I’m having a similar issue.

[mzalen]

I haven’t found any clear answers (other than to use ffmpeg to convert webm to mp4), but I found this interesting thread.