Estoy trabajando en una aplicación Electron donde estoy grabando video usando la API MediaRecorder y publicando el búfer en el servidor con un intervalo de tiempo de 5 segundos.

 let recordedChunks = []; const startBtn = document.getElementById('startBtn'); startBtn.onclick = e => { // Create the Media Recorder const options = { mimeType: 'video/webm; codecs=vp9' }; mediaRecorder = new MediaRecorder(stream, options); mediaRecorder.ondataavailable = handleDataAvailable; mediaRecorder.onstop = handleStop; mediaRecorder.start(timeslice); // timeslice being 5000 } // handling available data function handleDataAvailable(e) { recordedChunks.push(e.data); var blob = new Blob(recordedChunks, { type: 'video/webm; codecs=vp9' }); var buffer = Buffer.from(await blob.arrayBuffer()); var data = { video_buffer: buffer}; // for posting buffer to the server axios.post(API + '/video/', data, { observe: 'body', withCredentials: true, }) .then((res) => { console.log(`Status: ${res.status}`); console.log('Body: ', res.data); }).catch((err) => { console.error(err); }); recordedChunks = []; }

Y en mi servidor Express, manejo el búfer anterior de esta manera

 const videoView = (req, res) => { const buffer = Buffer.from(req.body.video_buffer); const stored_stream = fs.createWriteStream('video.webm', { 'flags': 'a' }); stored_stream.write(buffer); res.end(JSON.stringify({ 'success': true })) }

El código anterior funciona bien, excepto en algunos casos que no conozco.

A veces, el video grabado en el servidor está incompleto o los fotogramas se congelan en el medio y, a veces, el video está completamente dañado, pero el tamaño del video es el mismo que el del video local (ya que también estoy guardando el mismo video localmente y el video local). el video se reproduce bien cada vez).

Estoy usando Electron@17.1.1 en Windows 10 con una buena conexión a Internet.

Cualquier ayuda sería apreciada ya que no tengo mucha experiencia trabajando con flujos de JavaScript.