How to preserve MediaStream loudness in JavaScript AudioRecorder?

I am using the MediaRecorder API to record two media streams:

1. The microphone input of the user, obtained the following way:

const stream = await navigator.mediaDevices.getUserMedia({
   audio: true
});

2. An echo of the input, created the following way:

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
source = audioContext.createMediaStreamSource(stream);
   
delay = audioContext.createDelay(2);
delay.delayTime.value =  ms / 1000;
   
gain = audioContext.createGain();
gain.gain.value = parseFloat(1)
   
source.connect(delay); // delay is set elsewhere by the user
delay.connect(gain); // gain is set elsewhere by the user
gain.connect(audioContext.destination);
   
const outputStream = audioContext.createMediaStreamDestination();
delay.connect(outputStream); 

// ECHO STREAM OBJECT FOR MEDIA RECORDER
echoStream = outputStream.stream;

The echo itself works fine, delay and gain are applied as expected (less gain → echo is more quiet, and vice versa).

But when I record the streams with MediaRecorder, they all have the same loudness. I need to preserve the loudness of the echo exactly as the user hears it from their speakers. How can this be achieved? Is it even possible with the MediaRecorder API?

You want to connect your gain node to the ouputStream, not the delay directly.

You can think of these as plugging cables to actual devices.
Here you connected one output of delay into gain (like an amp), which itself is connected to the destination (speakers), so what goes through the speakers is the amplified sound, as desired.
However, the MediaStream output only receives the raw data from delay, not the amplified version. The cable doesn't come from the right source.