9

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?

John
  • 2,675
  • 3
  • 13
  • 20

1 Answers1

13

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()]);
clabe45
  • 2,354
  • 16
  • 27
  • This doesn't work. It will play only the first track as seen here: https://stackoverflow.com/questions/42138545/webrtc-mix-local-and-remote-audio-steams-and-record – iwaduarte Jul 11 '21 at 06:05
  • @iwaduarte Can you explain how the question you linked is similar to this answer? Its OP didn't mix the streams with the MediaStream API, nor did they even use the second stream after declaring it – clabe45 Aug 17 '21 at 18:32
  • look at the answer. You are mixing on your constructor as well. I fail to see your confusion – iwaduarte Aug 17 '21 at 23:54