I have an electronic application that has very simple desktop capture features:
const {desktopCapturer} = require('electron') const fs = require('fs'); var recorder; var chunks = []; var WINDOW_TITLE = "App Title"; function startRecording() { desktopCapturer.getSources({ types: ['window', 'screen'] }, function(error, sources) { if (error) throw error; for (let i = 0; i < sources.length; i++) { let src = sources[i]; if (src.name === WINDOW_TITLE) { navigator.webkitGetUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: src.id, minWidth: 800, maxWidth: 1280, minHeight: 600, maxHeight: 720 } } }, handleStream, handleUserMediaError); return; } } }); } function handleStream(stream) { recorder = new MediaRecorder(stream); chunks = []; recorder.ondataavailable = function(event) { chunks.push(event.data); }; recorder.start(); } function stopRecording() { recorder.stop(); toArrayBuffer(new Blob(chunks, {type: 'video/webm'}), function(ab) { var buffer = toBuffer(ab); var file = `./test.webm`; fs.writeFile(file, buffer, function(err) { if (err) { console.error('Failed to save video ' + err); } else { console.log('Saved video: ' + file); } }); }); } function handleUserMediaError(e) { console.error('handleUserMediaError', e); } function toArrayBuffer(blob, cb) { let fileReader = new FileReader(); fileReader.onload = function() { let arrayBuffer = this.result; cb(arrayBuffer); }; fileReader.readAsArrayBuffer(blob); } function toBuffer(ab) { let buffer = new Buffer(ab.byteLength); let arr = new Uint8Array(ab); for (let i = 0; i < arr.byteLength; i++) { buffer[i] = arr[i]; } return buffer; }
I know that to save MediaRecorder blob sources I need to read it in ArrayBuffer and then copy it to a regular buffer to save the file.
However, when it seems to fail for me, combines a piece of blobs into blobs. When pieces are added to one Blob, it looks like they just disappear. The new Blob is empty, and every other data structure that they copy later is also completely empty.
Before creating Blob, I know that I have a valid Blob in the chunks array.
Here is some information about debugging chunks before executing the new Blob(chunks, {.. part new Blob(chunks, {..
console.log(chunks)
Then enter debugging information for the new Blob(chunks, {type: 'video/webm'}) object new Blob(chunks, {type: 'video/webm'}) .
console.log(ab)
I am completely at a dead end. All the reference guides or other SO answers that I can find mostly follow this thread. What am I missing?
Electronic version: 1.6.2