Cross browser audio/video recording not supported on various browsers

[dasrajanbvi]

When i record media from Chrome it's not supported on safari, similarly we tried the same cases with different browsers with various combination of devices. please find below table for reference and summarised report.

we even tried to download the file and play it on different devices and browsers but it causes the same problem. for the recording to save we are using s3 bucket. We have tried different types of mimetype on mediaRecorderOptions but it wasn't still working. Do you have any solution which is not dependent on platform specific? as we require media recorder to work on all browsers and devices.

[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.