Yet Another Noise Suppression. Basic but Advanced
Published on July 18, 2024

In my last blog post, I gave scenarios where noise suppression in video calls would come in handy. In addition, I presented 2 ways (Moderate and Advanced) to add it to your web applications with the Vonage Video SDK. I even created sample applications for both implementations.

Now, I have yet another option to add noise suppression to your video applications. Why?

Basic but Advanced

The previously mentioned methods of adding noise suppression required importing external libraries. With the latest Vonage Video JavaScript Client SDK release, there is no need to import because the same advanced noise suppression audio filter is included. This makes the implementation very basic.

Try It Out

Like last time, I’ve created a sample application so you can try out the feature and take a look at the code. It is VERY similar to the code for the Basic Video Chat sample. You can use the Vonage Video API Playground to generate the credentials needed to run the application.

Enable / Disable Noise Suppression

This Basic Implementation adds methods on the Publisher Object to enable and disable noise suppression. Both return a promise or an error if something goes wrong.

// enable Noise Suppression

publisher.applyAudioFilter({

  type: 'advancedNoiseSuppression',

});

// disable Noise Suppression

publisher.clearAudioFilter();

Enable Noise Suppression From the Start

If you would like to have noise suppression turned on as soon as the user starts publishing to the call, just pass in an audioFilter Object with a key named type and its value set to advancedNoiseSuppression in the options when initializing the Publisher.

const publisherOptions = {

  insertMode: 'append',

  width: '100%',

  height: '100%',

  resolution: '1280x720',

  audioFilter: {

    type: 'advancedNoiseSuppression'

  }

};

const publisher = OT.initPublisher(

    'publisher',

    publisherOptions,

    handleError

);

Get the Audio Filter Type

If at any time you would like to know what audio filter is being applied, there is the getAudioFilter() method on the Publisher Object. It will either return the audio filter if set or null if not set.

publisher.getAudioFilter();

// output

{

    "type": "advancedNoiseSuppression"

}

// or

null

Browser Support

As mentioned in the previous blog post, noise suppression can be used in browsers that support Media Processors like Chrome / Chromium-based (Electron, Opera, and Edge). The Vonage Video JS Client SDK has a helpful hasMediaProcessorSupport function to determine if the client has support.

That’s it! Try adding Noise Suppression to your video application, and let us know how it goes. If you have any questions or comments, reach out in our Community Slack Channel and follow us on X.

Dwane HemmingsJavaScript Developer Advocate

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls-all at your fingertips.

Subscribe to Our Developer Newsletter

Subscribe to our monthly newsletter to receive our latest updates on tutorials, releases, and events. No spam.