Video recording for Safari Browser

Question

In my sample ReactJs application I am using react-multimedia-capture - which uses navigator.mediaDevices.getUserMedia and the MediaRecorder API to record video.

I am able to record video from Chrome, but in Safari I am unable to capture the video. The error is something like

MediaRecorder is not defined.

Could someone please help me out like:
Does Safari supports basic video capturing?

Answer 1

Safari is currently not supporting MediaRecorder API by default, but you can enable them from Develop > Experimental Features > MediaRecorder.

The way to record video from safari is to use peer to peer connection and capture video at the other end. There are few open-source application and third-party services which offer this and they are quite stable.

If you are only going to support recording from mobile, you can use HTML5 file API, which will pop up the camera in a single click. you can trim it for specific duration using ffmpeg or azure media services.

<input id="videoFile" type="file" class="hidden" accept="video/*" capture="">

Just make sure to save this file as .mp4 with the use of JavaScript to make it playable across every device or with <video> tag.

var file = $('#videoFile')[0]; var blob = file.files[0].slice(0, file.files[0].size, 'video/mp4'); var newFile = new File([blob], 'video.mp4', { type: 'video/mp4' });

Answer 2

In latest Safari you can enable MediaRecorder from Develop menu.

Try this Cam Recorder HTML5 demo that also provides detailed instructions for Safari.