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?
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.
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.
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();
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
);
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
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.
){kind=small}
