AI Noise Suppresion - Javascript

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

note

This page uses the following asynchronous methods. Refer to their API reference for the errors each Promise may reject with, and handle these rejections appropriately based on your use case.

• changeMic()

Install VideoSDK Noise Suppressor package

NPM

npm install --save "@videosdk.live/videosdk-noise-suppressor-web"

YARN

yarn add "@videosdk.live/videosdk-noise-suppressor-web"

warning

Note: We will no longer be publishing new versions of the @videosdk.live/videosdk-media-processor-web package. Going forward, we will exclusively maintain a dedicated package for this feature. Please use @videosdk.live/videosdk-noise-suppressor-web instead.

Instantiate VideoSDKNoiseSuppressor

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

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

let liveStream;

// Initialize Meeting
liveStream = 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-noise-suppressor-web";

let liveStream;

// Initialize Meeting
liveStream = 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() or changMic() to apply the noise suppresion effect during your liveStream.

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

let liveStream;

// Initialize Meeting
liveStream = 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
  );

  try {
    await liveStream?.changeMic(processedStream);
  } catch (err) {
    console.error("changeMic failed:", err);
  }
});

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-noise-suppressor-web";

let liveStream;

// Initialize Meeting
liveStream = 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({});
  try {
    await liveStream?.changeMic(stream);
  } catch (err) {
    console.error("changeMic failed:", err);
  }
});

Extras

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

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

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

let liveStream;
liveStream = 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()