Quiero integrar la grabación de pantalla con audio, estoy usando la API de MediaStream para que todo funcione bien, después de implementar la funcionalidad de pausa/reanudar, tengo un problema para obtener un blob MediaStream API que devuelve un blob después de un intervalo de tiempo específico (15 segundos en mi caso), pero si hago clic en pausa/reanudar varias veces, obtengo un blob aleatorio cada 2 o 3 segundos
A continuación se muestra el código para pausar y reanudar
$("#btn-pause-recording").click( function(){ mediaRecorder.pause(); }); $("#btn-resume-recording").click( function(){ mediaRecorder.resume(); });Una vez que dejo de grabar, la función media recorder.ondataavailable llama varias veces (si se hace clic en pausa/reanudar durante la grabación, de lo contrario, funciona bien)
por favor revise el código a continuación y ayúdeme a resolver el problema
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));