Reducing Background Audio Noise with getUserMedia in WebRTC
Nilesh Gawande
Co-founder and VP - Innovations at SpringCT. Creator of ProCONF, Creator of ARIA. Expertise in architecting in Video Conferencing systems (WebRTC), Digital Human, CoBrowsing, WebXR, Healthcare and IoT systems.
WebRTC's getUserMedia API allows developers to access users' media devices, such as microphones and cameras, directly from web browsers. While this feature is essential for real-time communication applications like video conferencing, background noise can often degrade the audio quality and user experience. In this blog, we will explore how to handle background audio noise using getUserMedia and introduce noise suppression techniques for better audio processing.
1. Basic Noise Suppression with getUserMedia Constraints
The getUserMedia API allows developers to specify constraints for the media stream they want to access, including audio. One of the constraints that can be used to enable basic noise suppression is the noiseSuppression property.
// Example constraints with noise suppressio
const constraints = {
? audio: {
? ? noiseSuppression: true,
? ? echoCancellation: true, // Optional: Enable echo cancellation
? },
? video: false,
};
navigator.mediaDevices.getUserMedia(constraints)
? .then((stream) => {
? ? // Stream with noise suppression enabled
? })
? .catch((error) => {
? ? console.error('Error accessing media devices: ', error);
? });
By setting noiseSuppression to true, the browser will attempt to reduce background noise from the captured audio. Keep in mind that the effectiveness of this feature may vary depending on the user's device and browser support.
I have explained in detail the getUserMedia() function in this blog: https://www.dhirubhai.net/pulse/first-step-webrtc-development-capturing-video-stream-using-gawande
2. Advanced Noise Processing with Web Audio API
For more robust noise reduction and advanced audio processing, please refer to AudioContext API, which provides a advanced ways to manipulate audio in the browser.
You can control audio volume by setting the gainnode property. By default, the gainnode is set to 1 but you may want to change it to reduce noise. In multi-party conference, the volume of non-active speaker may produce noise that can disturb other participants. Setting gainnode to a lower value for such participant will help in reduction of a noise. Gainnode can be controlled at sender as well as receiver side.
Below is the code snippet to set the audio gain:
领英推荐
<!DOCTYPE html
<html>
<body>
<h1>Gain node</h1>
? ? <div id="audioContainer">
? ? ? ? <!-- Audio element will be added here -->
? ? </div>
<script>
? ? window.onload = async () => {
? ? ? ? try {
? ? ? ? ? ? const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false});
? ? ? ? ? ? const ctx = new AudioContext();
? ? ? ? ? ? const gainNode = ctx.createGain();
? ? ? ? ? ? const audioDest = ctx.createMediaStreamDestination();
? ? ? ? ? ? const source = ctx.createMediaStreamSource(stream);
// gainNode is set to 0.5
? ? ? ? ? ? gainNode.connect(audioDest);
? ? ? ? ? ? gainNode.gain.value = 0.5; ?
? ? ? ? ? ? source.connect(gainNode);
? ? ? ? ? ?
? ? ? ? ? ? const audio = new Audio();
? ? ? ? ? ? audio.controls = true;
? ? ? ? ? ? audio.autoplay = true;
? ? ? ? ? ? audio.srcObject = audioDest.stream;
? ? ? ? ? ? audio.play();
? ? ? ? ? ? document.getElementById('audioContainer').appendChild(audio);
? ? ? ? } catch (error) {
? ? ? ? ? ? console.error('Failed to perform GUM:', error);
? ? ? ? }
? ? }
</script>
</body>
</html>>
Conclusion
Handling background audio noise is crucial for delivering high-quality audio experiences in WebRTC applications. While getUserMedia's built-in noise suppression can provide basic noise reduction, the Web Audio API empowers developers to implement more sophisticated noise processing techniques. By leveraging the Web Audio API, developers can ensure their applications deliver clear and professional audio, enhancing user satisfaction and engagement in real-time communication scenarios.
Remember that noise reduction is a complex topic, and the best approach depends on the specific use case and audio environment. Experiment with various techniques and test your implementations across different devices and browsers to achieve the desired results.
Coauthor: Ayan Karmakar
At SpringCT, we develop high quality video conferencing solutions. Our in-depth knowledge of WebRTC and media server has helped us build great conferencing products for our customers.
We have a team of experienced and skilled developers who specialize in WebRTC, utilizing the latest tools, frameworks, and best practices to create robust and reliable applications. Our developers are well-versed in the intricacies of WebRTC protocols, enabling them to optimize performance, minimize latency, and ensure seamless connectivity across different devices and browsers. For more details visit us at https://www.springct.com/collaboration/
Full-Stack .Net Developer | Expertise in Generative AI, NLP, & LLMs Application Development | Data Analytics | Computer Vision | Passion for Innovation
1 年Thanks for sharing