Issue with audioGain Constraint in WebRTC

Question

I am currently working on implementing audio recording functionality using WebRTC, specifically leveraging the autoGainControl constraint to maintain consistent audio levels. However, I have encountered an issue where the audio levels do not seem to remain constant, and the autoGainControl constraint does not appear to be functioning as expected.

I have tested the functionality by reading a text with varying sound amplifications, but unfortunately, I do not observe any noticeable difference in the audio levels. It seems like the autoGainControl constraint is not effectively adjusting the gain as intended.

I am providing a snippet of my code below for reference:

<h1>Audio Recording</h1>

<label for="audioDevice">Select Audio Device:</label>
<select id="audioDevice"></select>

<button id="startRecording">Start Recording</button>
<button id="stopRecording" disabled>Stop Recording</button>

<audio id="audioPlayer" controls></audio>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const startRecordingButton = document.getElementById('startRecording');
  const stopRecordingButton = document.getElementById('stopRecording');
  const audioPlayer = document.getElementById('audioPlayer');
  const audioDeviceDropdown = document.getElementById('audioDevice');

  let mediaRecorder;
  let chunks = [];

  const audioConstraints = {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true
  };

  // Function to populate the audio device dropdown
  function populateAudioDevices() {
    navigator.mediaDevices.enumerateDevices()
      .then(devices => {
        devices.filter(device => device.kind === 'audioinput').forEach(device => {
          const option = document.createElement('option');
          option.value = device.deviceId;
          option.text = device.label || `Microphone ${audioDeviceDropdown.options.length + 1}`;
          audioDeviceDropdown.add(option);
        });
      })
      .catch(error => {
        console.error('Error enumerating audio devices:', error);
      });
  }

  // Event listener for when the selected audio device changes
  audioDeviceDropdown.addEventListener('change', () => {
    startRecordingButton.disabled = false;
  });

  // Function to start recording with the selected audio device
  function startRecording() {
    const selectedDeviceId = audioDeviceDropdown.value;

    navigator.mediaDevices.getUserMedia({ audio: { deviceId: selectedDeviceId, ...audioConstraints } })
      .then((stream) => {
        mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.ondataavailable = (e) => {
          if (e.data.size > 0) {
            chunks.push(e.data);
          }
        };

        mediaRecorder.onstop = () => {
          const audioBlob = new Blob(chunks, { type: 'audio/wav' });
          const audioUrl = URL.createObjectURL(audioBlob);
          audioPlayer.src = audioUrl;
          chunks = [];
          startRecordingButton.disabled = false;
          stopRecordingButton.disabled = true;
        };

        mediaRecorder.onstart = () => {
          startRecordingButton.disabled = true;
          stopRecordingButton.disabled = false;
        };

        mediaRecorder.start();
      })
      .catch((error) => {
        console.error('Error accessing microphone:', error);
      });
  }

  // Event listener for starting recording
  startRecordingButton.addEventListener('click', () => {
    startRecording();
  });

  // Event listener for stopping recording
  stopRecordingButton.addEventListener('click', () => {
    mediaRecorder.stop();
  });

  // Populate the audio device dropdown on page load
  populateAudioDevices();
});
</script>

The browser used is Chrome. I know this is not supported in Safari.

I would greatly appreciate it if someone could review this code and provide insights into why the autoGainControl constraint might not be working as expected.

I tried this on chrome and using different audio input devices.