Cross browser audio/video recording not supported on various browsers about react-media-recorder

[MartinoCimarosti]

Use mimeType: "video/mp4;codecs=avc1" for safari, add some logic that detects the browser and switches between video/webm;codec=h246 (for chrome/firefox) and "video/mp4;codecs=avc1" for safari.

[jasondainter]

Note that chrome on IOS mobile devices are actually "safari" since they're based on Safari (not chromium). Makes this somewhat confusing when doing mobile testing but knowing that fact helped me a lot!

Ive found that the mime type used to record video needs to be different to the type to play back video also to ensure maximum compatibility if using mobile (desktop browsers are a bit more forgiving) this was quite helpful https://stackoverflow.com/questions/76124559/javascript-mediarecorder-video-format-compatibility-between-different-browsers

Ultimately it's a pain in the ass, but using Cloudinary to instantly rewrite the URLS (which automatically transcodes them on the fly) has been fruitful.