MediaEffects Plugin - React Native

Introduction

The MediaEffects plugin enables the seamless integration of advanced virtual background effects into video applications. With this library, users can apply a variety of background effects—such as blurs, solid colors, and images—during video calls, creating a more immersive and engaging experience.

info

The Virtual Background feature in VideoSDK can be utilized regardless of the meeting environment, including the pre-call screen.

applyImageBackground()

• The applyImageBackground() method allows you to replace the background with an image.

Parameters

• backgroundSource

  • type: String
  • REQUIRED
  • It specifies the url of the background image to be used as the virtual background.

Returns

• void

Example

VideosdkMediaEffects.applyImageBackground(
      "https://cdn.videosdk.live/virtual-background/cloud.jpeg);

note

The image URL must use HTTPS; otherwise, it will not work.

---

applyBlurBackground()

• The applyBlurBackground() method applies a blur effect to the background.

Parameters

• sigma

  • type: number
  • REQUIRED
  • It specifies the blur intensity that you want to apply.

Returns

• void

Example

VideosdkMediaEffects.applyBlurBackground(25.0);

---

applyColorBackground()

• The applyColorBackground() method lets you set a solid color as the background using a hex color code (e.g., #FF0000 for red).

Parameters

• hexColor

  • type: String
  • REQUIRED
  • It specifies the color that you want to apply.

Returns

• void

Example

VideosdkMediaEffects.applyColorBackground("#FF0000");

---

removeBackground()

• The removeBackground() method provides users with a convenient way to revert their video background to its original state, removing any previously applied virtual background.

Returns

• void

Example

VideosdkMediaEffects.removeBackground();