# Custom noise suppression in web applications

## 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](https://www.npmjs.com/package/vidyoclient-nativewebrtc-sdk) 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](https://github.com/xiph/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

```javascript
RegisterLocalMicrophoneStreamInterceptor(interceptor: 
VidyoLocalMicrophoneStreamInterceptor
): Promise<boolean>
```

**Parameters**

```javascript
interceptor: VidyoLocalMicrophoneStreamInterceptor
```

**Returns**&#x20;

```javascript
Promise<boolean>
```

## Usage Example

Following steps will show you how to integrate [rnnoise](https://github.com/xiph/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:

<figure><img src="/files/zg0dhSOdr4ahy6smcy3d" alt=""><figcaption></figcaption></figure>

### Wire the plugin up

In order <mark style="color:blue;">rnnoise</mark> to start acting, you have to register it as an interceptor of local microphone stream:

```javascript
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 <mark style="color:blue;">VidyoConnector.js</mark>:

```javascript
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 <mark style="color:blue;">rnnoise</mark> processor itself first, and then unregister local microphone stream interceptor:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enghouse-vidyo.gitbook.io/vidyoplatform/use-cases/custom-noise-suppression-in-web-applications.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.