Skip to main content
Version: 0.1.x

Noise Suppresion (BETA) - React

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>
)
);

Got a Question? Ask us on discord