Noise Suppresion (BETA) - Javascript

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.

important

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

let meeting;

// Initialize Meeting
meeting = VideoSDK.initMeeting({
  // ...
});

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

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 { VideoSDKNoiseSuppressor } from "@videosdk.live/videosdk-media-processor-web";

let meeting;

// Initialize Meeting
meeting = VideoSDK.initMeeting({
  // ...
});

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

const startNoiseSuppressionBtn = document.getElementById(
  "startNoiseSuppressionBtn"
);
startNoiseSuppressionBtn.addEventListener("click", async () => {
  // Getting stream from mic
  const stream = await VideoSDK.createMicrophoneAudioTrack({});
  const processedStream = await noiseProcessor.getNoiseSuppressedAudioStream(
    stream
  );
});

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.

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

let meeting;

// Initialize Meeting
meeting = VideoSDK.initMeeting({
  // ...
});

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

const startNoiseSuppressionBtn = document.getElementById(
  "startNoiseSuppressionBtn"
);
startNoiseSuppressionBtn.addEventListener("click", async () => {
  // Getting stream from mic
  const stream = await createMicrophoneAudioTrack({});
  const processedStream = await noiseProcessor.getNoiseSuppressedAudioStream(
    stream
  );

  meeting?.changeMic(processedStream);
});

Stopping Noise Suppression

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

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

let meeting;

// Initialize Meeting
meeting = VideoSDK.initMeeting({
  // ...
});

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

const stopNoiseSuppressionBtn = document.getElementById(
  "stopNoiseSuppressionBtn"
);
stopNoiseSuppressionBtn.addEventListener("click", async () => {
  // Pass mic MediaStream in VideoSDK `changeMic` method
  const stream = await VideoSDK.createMicrophoneAudioTrack({});
  meeting?.changeMic(stream);
});

Extras

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

// Import package
import { VideoSDKNoiseSuppressor } from "@videosdk.live/videosdk-media-processor-web";
// Instantiate VideoSDKNoiseSuppressor Class
const noiseProcessor = new VideoSDKNoiseSuppressor();

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

let meeting;
meeting = VideoSDK.initMeeting({
  meetingId: "meetingId",
  micEnabled: true,
  webcamEnabled: true,
  name: "TestUser",
  customMicrophoneAudioTrack: processedStream, // Pass processed MediaStream in VideoSDK
});

API Reference

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

• unmuteMic()
• muteMic()