Custom noise suppression in web applications

This article will guide you on how to implement a custom noise cancelation mechanism in your web application. An open-source library rnniose is used here as an example.

Introduction

Some developers using our Native WebRTC SDK may find it useful to enhance audio processing, especially noise cancelation, in order to improve overall audio quality and basically make it better than what WebRTC stack provides out-of-the-box.

Starting from VidyoClient WebRTC Javascript Library 24.1.0 we have included a new API that will allow developers to intercept local microphone stream, process it, and then send it to remote participants. For simplicity, we took rnnoise open-source library and integrated it into our sample application (that you always can find within SDK package) through the new API. So encourage you to take a look at it, play with it, and use it even as-is.

API Signature

RegisterLocalMicrophoneStreamInterceptor

RegisterLocalMicrophoneStreamInterceptor(interceptor: 
VidyoLocalMicrophoneStreamInterceptor
): Promise<boolean>

Parameters

interceptor: VidyoLocalMicrophoneStreamInterceptor

Returns

Promise<boolean>

Usage Example

Following steps will show you how to integrate rnnoise into your application. Please refer to the sample application within SDK package for complete code base.

Prepare rnnoise plugin

The entire plugin is already there in our sample app. We won't dive into its details and how it works, so just be sure you have the following files included into your project:

Wire the plugin up

In order rnnoise to start acting, you have to register it as an interceptor of local microphone stream:

const rnnoisePlugin = await import('./rnnoise/index.js');

vidyoConnector.RegisterLocalMicrophoneStreamInterceptor(rnnoisePlugin.start);

In the sample application we have added a very simple UI for selecting custom audio processor, and here is how it looks like in VidyoConnector.js:

async function handleMicrophoneInterceptor(vidyoConnector) {
    const rnnoisePlugin = await import('./rnnoise/index.js');
    $("#microphoneInterceptor").change(async ({ target }) => {
        const val = $(target).val();
        try {
            switch (val) {
                case 'rnnoise':
                    vidyoConnector.RegisterLocalMicrophoneStreamInterceptor(rnnoisePlugin.start);
                    break;
                default:
                    rnnoisePlugin.stop();
                    vidyoConnector.UnregisterLocalMicrophoneStreamInterceptor();
                    break;
            }
        } catch(e) {
            console.error('microphoneInterceptor on chnage error:', e);
        }
    });
}

Stop the plugin

In order to disable this custom noise suppression, you have to stop rnnoise processor itself first, and then unregister local microphone stream interceptor:

rnnoisePlugin.stop();
vidyoConnector.UnregisterLocalMicrophoneStreamInterceptor();