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
- YARN
npm install --save @videosdk.live/videosdk-media-processor-web
yarn add @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 processedMediaStream
.
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