Save Blob with multible file streams?

Question

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.

Answer 1

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());