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?
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?
- They do support capturing (i.e getUserMedia), but they don't support the MediaRecorder API yet. Not much to do here apart from drawing on a canvas and generating the video from still images, but don't. – Kaiido Commented Jan 24, 2019 at 11:37
- Damn apple, too expensive with too many unsupported features lol :D – Allan Chua Commented Sep 29, 2020 at 9:16
4 Answers
Reset to default 11Safari 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' });
In latest Safari you can enable MediaRecorder from Develop menu.
Try this Cam Recorder HTML5 demo that also provides detailed instructions for Safari.
A basic implementation of MediaStream Recorder API has just been introduced in Safari Technology Preview 73 on macOS (Jan 2019).
I've covered supported/unsupported features in this article.
Hopefully, a more complete implementation will make it's way soon to Safari 12.x on macOS and iOS.
Octavian Naicu
A basic implementation of MediaStream Recorder API has just been introduced in Safari Technology Preview 73 on macOS (Jan 2019).
Did you try video recording on Safari IOS 12.2?
Why does upload image via camera work on mobile-safari but not as iOS PWA?