Video Calls with LiveSwitch Background Blur

In the world of video conferencing and virtual communication, creating a visually appealing and professional environment is essential. With the LiveSwitch background blur solution, you can take your video calls to the next level by adding a background blur effect. In this blog post, we will explore the power of LiveSwitch's background blur capabilities and how they can enhance your video communication experience, focusing primarily on Typescript integration.

While we'll be discussing our TypeScript implementation, it's important to note that LiveSwitch offers support for both iOS and Android platforms as well.

Background Blur and Replacement

LiveSwitch's background blur library offers two distinct modes: blur and replace. These modes rely on portrait segmentation, which intelligently distinguishes between the human foreground and the background.

Blur Mode 

In the blur mode, LiveSwitch seamlessly combines the foreground and a blurred background, creating a softened backdrop that enhances your video call's aesthetics. The result is a soft and aesthetically pleasing background blur effect that keeps you in focus. Let's dive into how you can implement this mode using TypeScript:

const options: Partial<LiveSwitchBlurOptions> = {

      mode: LiveSwitchBlurMode.Blur,

      targetFPS: 30, // Optional cap - default 60FPS

      modelLocation: "/dist/", // Location of selfie_segmentation* files

      logLevel: LiveSwitchBlurLogLevel.Error, // 1 = Debug, 2 = Warn, 3 = Error

      enabled: true, // Optional

      videoConstraints: undefined,

      blurRadiusPx: 30,

      maskSmoothingPx: 5,

      isMobile: fm.liveswitch.Util.isMobile, // RECOMMENDED - no internal logic - skipped if not sent

      isiOS: fm.liveswitch.Util.isiOS, // RECOMMENDED - no internal logic - skipped if not sent

};



// Construct LiveSwitchBlur
LSBlur = new LiveSwitchBlur(options);

One thing to note is that local media is handled differently compared to the usual setup as we need to capture the video stream processed by the background blur library instead of the video stream directly from your video source:

LSBlur.start().then((blurCanvas) => {

      // Create local media with video stream processed by background blur 
  let localMedia = new fm.liveswitch.LocalMedia(
      false,
      blurCanvas.captureStream(30)
    );


  // Start capturing local media.

  localMedia

    .start()

    .then((lm) => {

              // Set local view
      layoutManager.setLocalView(LSBlur.getView());

        
              // Register client and establish connection ...

  })

  });

Replace Mode

On the other hand, the replace mode allows you to replace the background entirely with an image of your choice. This mode not only adds an extra layer of customization to your video stream but also offers versatility for a range of scenarios. 

To use the replace mode, simply update the mode property in the options and provide a source for the background replacement image:

const options: Partial<LiveSwitchBlurOptions> = {
  mode: LiveSwitchBlurMode.Replace,

    backgroundUri: "images/test1.jpg",

    backgroundHex: "#DD3333", // Fallback for image not loading if backgroundUri provided, else color replace

    targetFPS: 30, // Optional cap - default 60FPS

    modelLocation: "/dist/", // Location of selfie_segmentation* files

    logLevel: LiveSwitchBlurLogLevel.Error, // 1 = Debug, 2 = Warn, 3 = Error

    enabled: true, // Optional

    videoConstraints: undefined,

    blurRadiusPx: 30,

    maskSmoothingPx: 5,

    isMobile: fm.liveswitch.Util.isMobile, // RECOMMENDED - no internal logic - skipped if not sent

    isiOS: fm.liveswitch.Util.isiOS, // RECOMMENDED - no internal logic - skipped if not sent

};


  
// Construct LiveSwitchBlur

const LSBlur = new LiveSwitchBlur(options);

Advanced Features

To further enhance your video calls, the LiveSwitch background blur package offers advanced features. By enabling the advancedBlurEnabled property, LiveSwitch uses face detection algorithms to identify the number of faces in the frame. When multiple faces are detected, the entire image is blurred to protect everyone's privacy. However, when only one face is detected, the user remains visible with the background blurred or replaced, ensuring a polished and engaging video call.

const options: Partial<LiveSwitchBlurOptions> = {

    mode: LiveSwitchBlurMode.Blur,

    // Other configuration options...

    advancedBlurEnabled: true,

};

For an even more refined experience, you can enable the boundToFaceEnabled property on top of advancedBlurEnabled. When a single face is detected, LiveSwitch intelligently focuses only on the detected face while applying a blur effect to the remaining areas, guaranteeing that the speaker remains the center of attention.

const options: Partial<LiveSwitchBlurOptions> = {

    mode: LiveSwitchBlurMode.Blur,

    // Other configuration options...

    advancedBlurEnabled: true,

    boundToFaceEnabled: true,

};

In conclusion, LiveSwitch's background blur library offers an array of features and options to elevate your video calls. Whether you prefer a subtle background blur or want to transport yourself to a different world, LiveSwitch has you covered. With advanced features like face detection, your video calls will not only look great but also provide a polished and engaging experience for all participants. Say goodbye to distracting backgrounds and hello to professional video calls with LiveSwitch background blur.

The background blur feature discussed in this blog post is available as an add-on feature. Reach out to our team if you want to know more!