CODEWITHSUNDEEP
javascriptwebsocketwebrtcget-display-media
graphics123
graphics123

Reputation: 1291

How to create a sample webm file from byte array

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) { });

Upvotes: 5

Views: 1959

Answers (2)

Parusnik
Parusnik

Reputation: 1251

You can use RecordRTC

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

Upvotes: 0

jib
jib

Reputation: 42500

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/

Upvotes: 3

Related Questions