I have a JS-based web gui that uses WebRTC for audio exchange with a server. The WebRTC negotiation works fine, and with a single set of audio tracks (incoming and outgoing) the audio components work fine.
However I've found an issue where I can't add more than the first received track to my web audio context.
According to the documentation, the RTCTrackEvent event for my WebRTC connection returns an event that contains both event.streams and event.track. The streams object will always be the same for a single RTC connection (as far as I can tell), while the track object is the unique track I'm trying to play.
I figured this out because I was originally calling audioCtx.createMediaStreamSource(event.streams[0]) for each received track, thinking that the streams object contained the new track audio. However, that just ended up with multiple copies of the first track playing on top of each other. See the "track ordering" section here for the reason behind that.
The proper way to add & play the new track (as far as I can tell) would be to call createMediaStreamTrackSource(event.track) and connect the resulting node to my web audio flowgraph. However, this function is only supported in Firefox as of right now. Does that mean there's truly no way to add additional received tracks from a WebRTC connection to a web audio flowgraph on other browsers? That seems unlikely. Who here knows the secret trick to making this work?
Well that was actually much simpler than I thought it would be. All you need to do to work around this is create a new MediaStream from the track you need to add:
var newStream = new MediaStream( [ event.track ] ); // must be an array
var newSource = audioCtx.createMediaStreamSource(newStream);
newSource.connect(audioCtx.destination);