Search code examples
javascriptcross-browservideo-recordingweb-mediarecorder

JavaScript MediaRecorder video format compatibility between different browsers

Introduction

When using the MediaRecorder on the browser to record a video stream, depending on the browser (Chrome, Safari, or Firefox) the MediaRecorder can record videos in a specific format.

The table below shows what video formats/containers the MediaRecorder can record in each browser (I get this by using the isTypeSupported static method). Also this article shows a table of all supported MediaRecorder format on different browsers using the isTypeSupported method.

Browser Recording Format
Chrome .WEBM, .MKV
Opera .WEBM, .MKV
Edge .WEBM, .MKV
Firefox .WEBM
Safari .MP4

When you want to play a video you also not all browsers support the same format as well. The table below shows what video format each browser can play (It might be inaccurate).

Browser Can play video format
Chrome .MP4, .WEBM, .MKV
Opera .MP4, .WEBM, .MKV
Edge .MP4, .WEBM, .MKV
Firefox .MP4, .WEBM
Safari .MP4

The Problem

I have a web app where the user can record a video on his/her browser and then upload this video to the database.

After that, other users can visit the website and watch that video on their browsers. If the user record a video on Safari browser, the recorded video format is supported by all browsers (MP4), but if the user is using Chrome or Firefox, the recorded video format is supported by all browsers (WEBM) except for Safari.

Is there a way to record a video in a format that can be played on all browsers (For example MP4)?

  1. I tried using video.js npm package but it wasn't successful.
  2. I also tried using FFMPEG to convert the video on the client side but the amount of processing is huge compared to a website and takes a very long time.

I am looking for a solution that can be done only on the browser without converting the video format.

Solution

  • Use cloudinary or a similar CDN. I wrote some code to detect which browser the device recorded on (in the case of desktop chrome or firefox webm is preferred as you say) then when uploading it to a service like cloudinary you can just pull it back in any format on the fly changing the suffix (eg mp4 would make sense).

    note: chrome on safari is actually considered safari since its based on safari (took me a while to figure that out!)

    Wish the industry would just stick to one standard!