Combine audio and video streams into one file with MediaRecorder [duplicate]

Question

I am making a small interactive animation/game (on canvas with PixiJS) and wish to give users an option to save the rendered animation. After doing my research, MediaRecorder appears to be the API that I should use to record and render the video. However the MediaRecorder constructor only allows one stream to be used as source.

How can I merge additional streams (audio effects) so that the recorded video file will also have sounds in it?

Answer 1

Create a new (combined) media stream with the track(s) of the video stream and the track(s) of the audio stream. To do this, use the MediaStream constructor:

let combined = new MediaStream([...videoStream.getTracks(), ...audioStream.getTracks()]);
let recorder = new MediaRecorder(combined);

Even though you will probably have only a single track in each stream, this will also work if you have multiple tracks in each.

Selecting Certain Channels

Of course, if you want to discard all the audio tracks of the video stream and the video tracks of the audio stream,

let combined = new MediaStream([...videoStream.getVideoTracks(), ...audioStream.getAudioTracks()]);