Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

218
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda