WebRTC mix local and remote audio steams and record

Question

So far i\'ve found a way only to record either local or remote using MediaRecorder API but is it possible to mix and record both steams and get a blob?

Answer 1

The WebAudio API can do mixing for you. Consider this code if you want to record all the audio tracks in the array audioTracks:

const ac = new AudioContext();

// WebAudio MediaStream sources only use the first track.
const sources = audioTracks.map(t => ac.createMediaStreamSource(new MediaStream([t])));

// The destination will output one track of mixed audio.
const dest = ac.createMediaStreamDestination();

// Mixing
sources.forEach(s => s.connect(dest));

// Record 10s of mixed audio as an example
const recorder = new MediaRecorder(dest.stream);
recorder.start();
recorder.ondataavailable = e => console.log("Got data", e.data);
recorder.onstop = () => console.log("stopped");
setTimeout(() => recorder.stop(), 10000);