Virtual Background - iOS

Virtual backgrounds let you replace your real background in video calls or rooms with a digital image or video. This can be useful for:

• Privacy: Hide your messy room or anything you don't want others to see.

• Focus: Minimize distractions and keep the focus on the conversation.

• Fun: Liven up the call with a cool background theme.

Virtual Background using VideoSDKBackgroundProcessor

VideoSDK provides the VideoSDKBackgroundProcessor class, which replaces your background for you. Here's a step-by-step guide:

Toggle Virtual Background

• To enable the virtual background, pass a VideoSDKBackgroundProcessor instance to the setVideoProcessor method of the Room class.

• To disable the virtual background, call removeVideoProcessor() and virtual background will be replaced with the normal camera stream.

caution

VideoSDKBackgroundProcessor downloads the background image when you create it or call changeBackground. While the processor is on and has no image yet, no video is sent from your camera. If the download fails, no video is sent until a new image loads. Create the processor before you turn it on, and use an image URL that loads quickly.

Example Code:

Swift

class RoomViewController: UIViewController {
  var room: Room?
  //variable for keeping track of Virtual Background
  var isVirtualBackground: Bool = false

  //create an instance of VideoSDKBackgroundProcessor with the source url for the background image
  //(make sure background is in portrait, else might get undesired output).
  let processor = VideoSDKBackgroundProcessor(
    backgroundSource: URL(string: "https://cdn.videosdk.live/virtual-background/cloud.jpeg")!
  )

  // Button when tapped will toggle the virtual background for local participant
  @IBAction func toggleVirtualBackground(_ sender: Any) {

    if isVirtualBackground {
      // Turn off virtual background
      room?.removeVideoProcessor()
      isVirtualBackground = false
    } else {
      // Turn on virtual background
      room?.setVideoProcessor(processor: processor)
      isVirtualBackground = true
    }
  }
}

Changing Background Image

You can also change the background image dynamically using the changeBackground method of the VideoSDKBackgroundProcessor class. The current background stays until the new image has downloaded.

Swift

extension RoomViewController {
  // uses the processor created in the previous example

  // Button when tapped will change the background image of the virtual background
  @IBAction func changeBackgroundTapped(_ sender: Any) {
    // URL of new background image
    let backgroundSource = URL(string: "https://cdn.videosdk.live/virtual-background/san-fran.jpeg")!

    // Call changeBackground method of VideoSDKBackgroundProcessor
    self.processor.changeBackground(backgroundSource: backgroundSource)
  }
}

API Reference

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

• setVideoProcessor()
• removeVideoProcessor()
• VideoSDKBackgroundProcessor