Skip to main content
Version: 0.1.x

Noise Suppresion (BETA)

This feature allows participant to removes background noise from meetings and keep only particpant voice in the communication.

info
  • This feature is in Beta release, so feel free to reach out to us on Discord. We'd love to hear feedback from you.

1. Install VideoSDK Media Processor package

npm install --save @videosdk.live/videosdk-media-processor-web

2. Instantiate Noise Suppressor Processor

// Import package
import { VideoSDKNoiseSuppressor } from "@videosdk.live/videosdk-media-processor-web";

// Instantiate VideoSDKNoiseSuppressor Class
const noiseProcessor = new VideoSDKNoiseSuppressor();

3. Implement Noise suppressor with SDK

  • getNoiseSuppressedAudioStream - This method accepts source of MediaStream, return processed MediaStream.
import {
useMeeting,
createMicrophoneAudioTrack,
} from "@videosdk.live/react-sdk";
import { VideoSDKNoiseSuppressor } from "@videosdk.live/videosdk-media-processor-web";

const {
//...
changeMic,
//...
} = useMeeting({});

const onNoiseSuppressor = async () => {
try {
// Instantiate VideoSDKNoiseSuppressor Class
const noiseProcessor = new VideoSDKNoiseSuppressor();

// Getting stream from mic
const stream = await createMicrophoneAudioTrack({});
const processedStream = await noiseProcessor.getNoiseSuppressedAudioStream(
stream
);

// Pass `processedStream` in VideoSDKs `changeMic` method
changeMic(processedStream);
} catch (error) {
console.log(error);
}
};

For disabling noise suppression, you can pass mic stream in VideoSDKs changeMic method.

import {
useMeeting,
createMicrophoneAudioTrack,
} from "@videosdk.live/react-sdk";

const {
//...
changeMic,
//...
} = useMeeting({});

const disableNoiseSuppressor = async () => {
// Pass mic MediaStream in VideoSDK `changeMic` method
const stream = await createMicrophoneAudioTrack({});
changeMic(stream);
};

Extras

You can also pass this processed stream during initialization of the meeting as well

import { useState, useEffect } from "react";
import {
MeetingProvider,
createMicrophoneAudioTrack,
} from "@videosdk.live/react-sdk";
import { VideoSDKNoiseSuppressor } from "@videosdk.live/videosdk-media-processor-web";

const [mediastream, setMediaStream] = useState(null);

useEffect(async () => {
try {
// Instantiate VideoSDKNoiseSuppressor Class
const noiseProcessor = new VideoSDKNoiseSuppressor();

// Getting stream from mic
const stream = await createMicrophoneAudioTrack({});
const processedStream = await noiseProcessor.getNoiseSuppressedAudioStream(
stream
);

setMediaStream(processedStream);
} catch (error) {
console.log(error);
}
}, []);

return (
mediastream && (
<MeetingProvider
config={{
meetingId,
micEnabled: true,
webcamEnabled: true,
name: "TestUser",
customMicrophoneAudioTrack: mediastream, // Pass processed MediaStream in VideoSDK
}}
//...
>
<></>
</MeetingProvider>
)
);