Sound is very low quality and cutting out no matter what mic even with professional equipment.

[vltmedia]

Please follow the general troubleshooting steps first:

• [x] Is your app running over HTTPS? (please provide the URL if possible)
• [x] Have you tried running the demo (https://codepen.io/mozmorris/pen/JLZdoP) on your device?
• [x] Checked the latest "Can I use" compatibility table? (https://caniuse.com/stream)

Tested OS/Browsers:

• PC
  • Chrome
  • Firefox
  • Edge
• Mac
  • Chrome
  • Safari
• Linux
  • Chrome

Bug reports:

No matter what OS we use (Mac, Windows, Linux) we get terrible audio quality, no matter the input device. We have tested with built-in mics, a UAD Apollo, and multiple webcams. The mics into the Apollo sound fine either way using other software. The audio sounds like it's at a low sample rate.

There also seems to be a denoising or something happening to the audio. It seems like it's dropping out.

Example Recorded Video

The code we tested was the minimal example:

import React from "react";

import Webcam from "react-webcam";

export default function App() {
  return (
    <div className="App">
      <Webcam />
    </div>

  );
}

[vltmedia]

Well we got it to a good place by using the audioContraints prop.

It'd be awesome if y'all had autoGainControl and noiseSuppression false by default or explicitly add it to the README.md so that other users are aware of the noiseSuppression.

import React from "react";

import Webcam from "react-webcam";

 const audioConstraints = {
      autoGainControl: false,
      channelCount: 1,
      echoCancellation: false,
      latency: 0,
      noiseSuppression: false,
      sampleRate: 48000,
      sampleSize: 16,
      volume: 1.0
    };

export default function App() {
  return (
    <div className="App">
      <Webcam audioConstraints={audioConstraints} />
    </div>

  );