Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

220
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda