9

I am trying to use mediaRecorder API and make it run on maximum of browsers

video/webm;codecs=vp8,opus : that works fine on chrome and Firefox.. but not on Safari

video/mp4;codecs:h264 : works on Safari and Chrome.. but not on Firefox

It looks like Safari is now able to play webm.

What would be the mime type to use to make it run on both 3 browsers ?

yarek
  • 11,278
  • 30
  • 120
  • 219

4 Answers4

6

I've been attempting the same thing and it is painful to say the least.

I'm able to use MediaRecorder to record video across Chrome, Firefox, Edge, and Safari. BUT the resulting videos do not playback on all browsers.

Safari - records in mp4 and mp4 will playback on all browsers

Chrome & Edge - I'm recording with mimeType: "video/webm;codecs=vp9", which will playback on Chrome, Firefox, and Edge, but not Safari.

Firefox - I'm using the default. It will playback on Chrome, Firefox, and Edge, but not Safari.

Supposedly Safari will playback webm with macOS Big Sur 11.3. I need to upgrade to test this.

Unfortunately webm is still not supported by iOS, so I'm looking into the Cloudconvert API to convert webm videos to mp4 before storing in S3.

Other suggestions welcome.

Dominic Marrone
  • 61
  • 1
  • 4
2

You'll need to use the MediaRecorder.isMediaTypeSupported API to find out what the browser you are using supports. See this open PR for details.

That does not help with playback however.

Philipp Hancke
  • 15,855
  • 2
  • 23
  • 31
1

You've stumbled into an electropolitical food fight.

Sad to say, there's no commonality of codecs between browsers. You won't be able to find a common codec. Apple (Safari) is firmly in the H.264 / AAC world, the world of MP4.

Chrome, but not open-source Chromium, supports H.264 (which carries a patent burden). The fully open source Chromium browser does not. Firefox, via an automatically installed plugin from OpenH264.org, does, but it only supports H.264's constrained baseline version, not the fancier versions. Use MIME type video/webm; codecs="avc1.42E01F" and you'll be fine in Firefox and Chrome.

Microsoft new Edge supports the same stuff as Chrome.

WebRTC is rigged to allow endpoints to negotiate codecs with each other. In my opinion this is a kludgey way to patch this electropolitical squabble.

This is not a good situation. But it's Q1CY2021 reality.

O. Jones
  • 103,626
  • 17
  • 118
  • 172
  • that makes sense. Looks like Safari is video/mp4;codecs:h264 and others are video/webm. What I don't really get is that Safari announces that he handles now webm and I do use the latest Safari version. – yarek Mar 02 '21 at 16:15
  • Safari only handles webm in the webRTC context. It cannot actually play webm. – Doug Sillars Mar 03 '21 at 20:40
  • Sorry but `video/webm; codecs="avc1.42E01F"` does not work at all on Firefox 89 (Linux or Windows) – Florent Thiery Jun 24 '21 at 13:56
1

as a simple answer that I found since it's not simply out there. Use a library like below to record in mp3. It's not supported by browser MediaRecorder natively, but libraries make it easy to encode to mp3

and then you have a blob or file that can be played in any browser and even mobile devices like ios

https://github.com/closeio/mic-recorder-to-mp3

Arjun Patel
  • 79
  • 1
  • 5