Poor audio quality with getUserMedia. Any ideas why?

Question

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!

Answer 1

You should never set the sampleRate value in the getUserMedia constraints! The sampleRate is set by the client automatically and modifying it would result in gaping sounds. The value you set, 48000, for example, is compatible only with Google Chrome. Firefox and Edge use totally different values.

Also, when you set echoCancellation and noiseSuppression to true, this means the microphone will mute itself when the gain is close to 0. This will result in broken speech when the person starts to talk and ends his sentences.

From my own experience, you should just set the constrains to audio alone, and let the browser do the rest:

const constraints = {
  audio: true,
  video: false
}