AI Noise Suppresion - React

AI Noise Suppression helps elevate the audio quality of your live streams by intelligently filtering out background noise in real-time. Whether you’re streaming from a bustling café or a noisy home setup, this feature ensures your voice remains crisp and clear for your audience.

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

Once installed, create an instance of the suppressor to process your microphone stream before it hits your live audience.

// 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 processed, you can use the suppressed stream directly in VideoSDK’s methods like enableMic(), changMic() or toggleMic() to improve the quality of your ongoing stream.

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

Want your live stream to start with a clean audio feed? Here’s how to pass the processed stream right at the beginning.

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