Noise Suppresion (BETA) - React

Noise suppression is a feature that identifies and filters out background noise from an audio input during a meeting or call. This feature can be particularly useful in noisy environments or when participants are using low-quality microphones.

info

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

Install VideoSDK Media Processor package

NPM

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

YARN

yarn add "@videosdk.live/videosdk-media-processor-web"

Instantiate VideoSDKNoiseSuppressor

After installing the library, initialize an instance of the VideoSDKNoiseSuppressor.

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

const MeetingView = () => {
  // Instantiate VideoSDKNoiseSuppressor Class
  const noiseProcessor = new VideoSDKNoiseSuppressor();

  const handleStartNoiseSuppression = () => {};
  const handleStopNoiseSuppression = () => {};

  return (
    <>
      <button onClick={handleStartNoiseSuppression}>
        Start Noise Suppression
      </button>
      <button onClick={handleStopNoiseSuppression}>
        Stop Noise Suppression
      </button>
    </>
  );
};

Getting Processed Stream

You can obtain the processed stream using the getNoiseSuppressedAudioStream method, which takes a MediaStream as input and returns the noise-suppressed stream.

// Import package
import {
  useMeeting,
  createMicrophoneAudioTrack,
} from "@videosdk.live/react-sdk";
import { VideoSDKNoiseSuppressor } from "@videosdk.live/videosdk-media-processor-web";

const MeetingView = () =>{
  // Instantiate VideoSDKNoiseSuppressor Class
  const noiseProcessor = new VideoSDKNoiseSuppressor();
  const { changeMic } = useMeeting({});

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

  const handleStopNoiseSuppression = () => {};
  return <>...</>;
}

Passing Processed Stream to VideoSDK

Once you have the processed stream, you can pass it to functions like enableMic(), changMic() or toggleMic() to apply the noise suppresion effect during your meeting.

const MeetingView = () =>{
  // Instantiate VideoSDKNoiseSuppressor Class
  const noiseProcessor = new VideoSDKNoiseSuppressor();
  const { changeMic } = useMeeting({});
  const handleStartNoiseSuppression = () => {
    // Getting stream from mic
    const stream = await createMicrophoneAudioTrack({});
    const processedStream = await noiseProcessor.getNoiseSuppressedAudioStream(
      stream
    );
    changeMic(processedStream);
  };
  const handleStopNoiseSuppression = () => {};
  return <>...</>;
}

Stopping Noise Suppression

You can stop the noise suppression by replacing the audio stream with a new plain audio stream.

const MeetingView = () =>{
  // Instantiate VideoSDKNoiseSuppressor Class
  const noiseProcessor = new VideoSDKNoiseSuppressor();

  const { changeMic } = useMeeting({});

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

  return <>...</>;
}

Extras

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

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

API Reference

The API references for all the methods and events utilized in this guide are provided below.

• createMicrophoneAudioTrack
• unmuteMic()
• muteMic()
• toggleMic()