0

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.

Huhngut
  • 402
  • 6
  • 13

1 Answers1

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());
Matt Ellen
  • 11,268
  • 4
  • 68
  • 90
  • Thanks for your answer. I'm sorry but I can't get it to run. I tried in firefox which did not work because according to this answer firefox is not supporting MediaSource. I then tried with edge which at least gave me a usable error that mp4 is not supported. I saw some examples where mp4 is working. In the previous mentioned answer is written that my file requires specific header but I cant guaranty this. Any ideas? The Answer:https://stackoverflow.com/a/23359329/11355399 – Huhngut Feb 19 '21 at 13:56
  • That's odd. [According to MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaSource#browser_compatibility) Firefox supports `MediaSource`. I am flying blind here as I don't have two arrays of data to play with. If I get more time I will have a deeper look. – Matt Ellen Feb 19 '21 at 14:04
  • The error from firefox was that If I try to append the buffer it sais that the mediastream element is not useable – Huhngut Feb 19 '21 at 17:35