mediaRecorder : what mime type to use to make it run on Safari, Chrome and Firefox?

1
votes

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 ?

3
safarihtml5-videoweb-mediarecorder
What do you mean by "run"? You want to be able to playback the recorded video on all the platforms? Or do you just want to be able to "record" using the same settings? If the latter, why? - Kaiido
Both : record and.play without having to transcode with ffmpeg - yarek

3 Answers

2
votes

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.

1
votes

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.

0
votes

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.