I want to integrate screen recording with audio, I am using MediaStream API for that everything works fine, after implementing the pause/resume functionality I am facing an issue in getting a blob MediaStream API returning blob after a specific time interval (15 seconds in my case), but if I click pause/resume multiple times then getting blob randomly like in every 2 or 3 seconds
Below is code for pause and resume
$("#btn-pause-recording").click( function(){
mediaRecorder.pause();
});
$("#btn-resume-recording").click( function(){
mediaRecorder.resume();
});
Once I stop recording then media recorder.ondataavailable function calls multiple times (if pause/resume clicked during recording otherwise it works fine)
please check below code and help me to figure out problem
try {
let displayMediaConst = { video:
{
width: 1280,
height: 720,
"aspectRatio": 1.7777777777777777,
"frameRate": 5,
}
};
audioRecorder = navigator.mediaDevices.getDisplayMedia(displayMediaConst)
.then(async displayStream => {
[videoTrack] = displayStream.getVideoTracks();
let userConst = {
audio: true
};
const audioStream = await navigator.mediaDevices.getUserMedia(userConst).catch(e => {throw e});
[audioTrack] = audioStream.getAudioTracks();
stream = new MediaStream([videoTrack, audioTrack]);
stream.getVideoTracks()[0].onended = function () {
endVideoCallback();
};
successCallback(stream);
})
.catch(console.error);
} catch(err) {
console.error("Error: " + err);
}
// successCallback function code
var options = {
mimeType: 'video/mp4; codecs=x264',
bitsPerSecond: 256 * 8 * 1024,
checkForInactiveTracks: true,
};
mediaRecorder = new MediaStreamRecorder(stream, options);
mediaRecorder.canvas = {
width: 1280,
height: 720
};
mediaRecorder.stream = stream;
mediaRecorder.ondataavailable = function(blob) {
var size = blob.size;
size = (size / 1024).toFixed(2) + ' kb';
// console.log('size', size);
// setTimeout(sendRequest, 200, blob); // Save blob to server
};
let timeInterval = 5000;
// get blob after specific time interval
mediaRecorder.start(parseInt(timeInterval));