CODEWITHSUNDEEP
javascripthtmlconcatenationfilestreamffmpeg.js
Huhngut
Huhngut

Reputation: 492

Save Blob with multible file streams?

I have two Uint8Arrays. The first contains the video and the second the audio data. For now, I save both of them using blob. I poorly was unable to find any explanation on how to save them in one file.

Can somebody provide a code example?

Thanks

Edit: comment to Matt Ellens request I moved here for better readability Unfortunately not. I tried to assemble a function myself.

var blob1 = new Blob([arrayConcat(video)], {
    type: 'application/octet-stream'
});
var blob2 = new Blob([arrayConcat(audio)], {
    type: 'application/octet-stream'
});
stream = new MediaStream();
stream.addTrack(arrayConcat(video));
stream.addTrack(arrayConcat(audio));
console.log(stream);

It always says that I need a MediaStreamTrack if I want to add a Track. I was then searching and found this: Is there a way to create your own mediaStreamTrack using say, JSON objects?. It seems like Tracks are only for webcam and user micro because they are created by the browser.

Upvotes: 0

Views: 527

Answers (1)

Matt Ellen
Matt Ellen

Reputation: 11592

I think you can combine the two buffers like so (I'm going to assume the mime types of your media):

let vidBlob = new Blob([videoData], {
    type: 'application/octet-stream'
});
let audBlob = new Blob([audioData], {
    type: 'application/octet-stream'
});

let medSrc = new MediaSource;

let audSrcBuf = medSrc.addSourceBuffer('audio/mpeg3');
audSrcBuf.addEventListener('updateend', function (_) 
{
  medSrc.endOfStream();

  let vidSrcBuf = medSrc.addSourceBuffer('video/mp4');
  vidSrcBuf.appendBuffer(vidBlob.arrayBuffer());

  vidSrcBuf.addEventListener('updateend', function (_) 
  {
    medSrc.endOfStream();

    let objURL = URL.createObjectURL(medSrc);

    // use the objURL to save the two streams.

  });
});



audSrcBuf.appendBuffer(audBlob.arrayBuffer());

Upvotes: 1

Related Questions