Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

215
Views
JavaScript Media stream Screen Recording + Audio Recording - Pause and Resume issue

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));
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!