5

I am working on a screen capture application and am able to get the ondataavailable event work and get data in chunks which I am further converting as a blob but when I send the same data stream over websocket to server and save the stream as a webm file to disk and later play the file, the file doesn't play anything. I think the file needs some meta information which I am not sure of.

Any suggestions?

Here's my javascript code:

socket.emit('message', new Blob([event.data], {type: 'video/webm'}));

Server saving code :

fs.writeFile("d://test.webm", data, "binary", function(err) { });

jib
  • 34,243
  • 11
  • 80
  • 138
graphics123
  • 1,041
  • 1
  • 16
  • 43

2 Answers2

3

The dataavailable event returns a chunk—a piece of the recording—and fires multiple times. One event isn't likely to contain the whole recording.

Combine the data from multiple events into a chunks array, then after you've stopped recording, combine the whole array into a new Blob. This produces a file that works for me:

const rec = new MediaRecorder(stream), chunks = [];
rec.ondataavailable = e => chunks.push(e.data);
rec.start();
await new Promise(r => setTimeout(r, 10000)); // wait 10 seconds
rec.stop();
await new Promise(r => rec.onstop = r);
const blob = new Blob(chunks);
link.href = URL.createObjectURL(blob);

Working demo: https://jsfiddle.net/jib1/pkc16k9r/

jib
  • 34,243
  • 11
  • 80
  • 138
  • I appreciate your answer but I need to save bytes to server and create a webm file from it. I actually need it for streaming purpose – graphics123 Dec 24 '18 at 07:11
  • @subhfyu546754 `MediaRecorder` isn't designed for streaming. `RTCPeerConnection` is. – jib Dec 24 '18 at 14:31
  • I am using RTCPeerConnection to stream but I also need to record the video as webm file in chunks ,maybe a new file every 10 minutes. I am only able to play the first file , but I am not able to play other files. I suspect some metadata missing – graphics123 Dec 27 '18 at 07:55
  • @subhfyu546754 Have you tried `stop()`ing the recorder and `start()`ing a new one with the same `stream` every 10 minutes? – jib Dec 27 '18 at 23:06
0

You can use RecordRTC

timeSlice:10000, ondataavailable: function(b){ this fires every 10000 seconds, but all metadata only in first file }

Parusnik
  • 751
  • 1
  • 7
  • 9