IOS MediaRecorder Update for 2022
Safari 14.5 now supports the MediaRecorder API.
Check out this code snippet demonstrating how to use MediaRecorder along with getUserMedia().
initiateVideoRecordingForIOS: function() {
console.log("Setting up the recorder");
let self = this;
this.data = [];
if (MediaRecorder.isTypeSupported('video/mp4')) {
// IOS exclusively uses mp4 format, no support for webm
var options = {mimeType: 'video/mp4', videoBitsPerSecond : 1000000};
} else {
// For non-IOS devices, stick to video/webm
console.error("ERROR: Is this really an IOS device??");
var options = {mimeType: 'video/webm'};
}
// Remember, a canvas element is required instead of a video element
let stream = document.getElementById('self-canvas').captureStream(15);
this.recorder = new MediaRecorder(stream, options);
this.recorder.ondataavailable = function(evt) {
if (evt.data && evt.data.size > 0) {
self.data.push(evt.data);
console.log('Chunk size: ' + evt.data.size);
}
}
this.recorder.onstop = function(evt) {
console.log('Stopping recorder');
var blob = new Blob(self.data, {type: "video/mp4"});
// Handle the blob accordingly
}
this.recorder.start(1000);
looper();
},
Note that IOS lacks support for video.captureStream() and video/webm. Utilize a video element to bridge
navigator.mediaDevices.getUserMedia()
and a canvas element for MediaRecorder's functioning.
Moreover, IOS restricts declaring only one
getUserMedia() stream simultaneously. Make sure to set up the video element or stream globally as
this.video or
this.localStream for easy access by other elements.
this.localStream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: {width: 430, height: 430, facingMode: "user"}
});
let self = this;
self.video = document.createElement('video');
self.video.srcObject = this.localStream;
const canvas = document.getElementById("self-canvas");
const ctx = canvas.getContext('2d');
function draw_2DCanvas(){
ctx.clearRect(0,0, canvas.width, canvas.height);
ctx.drawImage(self.video, 0, 0, 430, 430);
}
requestAnimationFrame(draw_2DCanvas);
}
draw_2DCanvas();
On other devices, simplifying the process using video.captureStream() without necessitating a canvas element is viable.
Generally, opt for video/webm.
Crucial Reminder
If no editing of the video is intended, direct transmission of localStream to MediaRecorder works seamlessly, enabling audio recording as well.
this.recorder = new MediaRecorder(this.localStream, options);