Poor audio quality with getUserMedia. Any ideas why?

I'm trying to set up an audio recorder in a React web application for recording large groups of people (15+) talking, but can't seem to get the recording quality right. I initially tried capturing the audio recordings by passing the following constraints to getUserMedia:

const constraints = {
  audio: {
    sampleRate: 48000,
    channelCount: 1,
    volume: 1.0,
    echoCancellation: true,
    noiseSuppression: true,
  },
  video: false
}

navigator.mediaDevices.getUserMedia(constraints)
.then( stream => {
  this.processStream(stream);
})

processStream = stream => {
  let options = MediaRecorder.isTypeSupported('audio/webm') ? {
    mimeType: 'audio/webm'
  } : {};

  let recorder = new MediaRecorder(stream, options);

  ...

}

For most recordings, the recording quality was good. Sometimes, however, the recording would end up with the this really bad, distorted, almost metallic-sounding quality. I haven't been able to figure out how to reproduce the effect (I have since started capturing the users' browser, to try to help debug this problem).

About a week ago, I deployed the app with constraints = { audio: true, video: false }, but this too sometimes produces recordings with slightly distorted qualities. So far, none of the recordings have been as bad as some of the recordings before, but the quality is still not where we want it to be.

Today, I set the constraints to:

const constraints = {
    audio: {
      echoCancellation: false,
      autoGainControl: false,
      noiseCancellation: false
    },
    video: false
}

But I'm doubtful that this will be the magic ticket to high quality recordings, and I'm starting to think that maybe I should ditch MediaRecorder for something else. Does anyone have ideas about 1) what the problem is and 2) how we might fix it?

Thanks!

from Poor audio quality with getUserMedia. Any ideas why?