How to start a call with preset video background effect

[prabhjot-msft]

We are always focused on enhancing the calling experience for the end user. We understand how important it is to enable the user to have privacy in the call. Blurred & Custom backgrounds can be helpful in maintaining privacy by concealing potentially sensitive information visible in the background and convey a professional image in business settings.

Here, I show how you can initiate call with the preset background. Both the CallComposite and CallWithChatComposite include the option of presetting the background and the user does not need to configure any extra settings.

Start a call with custom background

Follow the code in Storybook to create a basic CallComposite. After creating the adapter, updateSelectedVideoBackgroundEffect method can be called with blur/custom effect to start call with the applied effect in afterCreate method of adapter.

function App(): JSX.Element {
  // ... setup code

  /* After creating adapter, call updateSelectedVideoBackgroundEffect in after create method to activate the effect */ 
  const afterCallAdapterCreate = useCallback(async (adapter: CallAdapter): Promise<CallAdapter> => {

      const customVideoBackgroundEffect: VideoBackgroundReplacementEffect = {
        effectName: 'replacement',
        key: '#key for image',
        backgroundImageUrl: '#URL for image'
      };
  
      adapter.updateSelectedVideoBackgroundEffect(customVideoBackgroundEffect);
  
      return adapter;
    }, []);

 const adapter = useAzureCommunicationCallAdapter(
    {
      /* callAdapterArgs */ 
    },
    afterCreate: afterCallAdapterCreate
  );

  // Create <CallComposite> etc.
}

Start a call with blurred background

function App(): JSX.Element {

   // ... setup code

  /* After creating adapter, call updateSelectedVideoBackgroundEffect in aftercreate method to activate the effect */ 
  const afterCallAdapterCreate = useCallback(async (adapter: CallAdapter): Promise<CallAdapter> => {

      const blurVideoEffect: VideoBackgroundBlurEffect = {
        effectName: 'blur'
      };

      adapter.updateSelectedVideoBackgroundEffect(blurVideoEffect);
      return adapter;
  }, []);

 const adapter = useAzureCommunicationCallAdapter(
    {
      /* callAdapterArgs */ 
    },
    afterCreate: afterCallAdapterCreate
  );

  // Create <CallComposite> etc.
}

Load images for video backgrounds picker before starting a call

You can start the call with a set of custom backgrounds for the user to choose from.

function App(): JSX.Element {

  const videoBackgroundImages = [
      {
        key: '#key for image',
        url: '#URL for image',
        tooltipText: '#tooltip text for image'
      },
      {
        key: '#key for image',
        url: '#URL for image',
        tooltipText: '#tooltip text for image'
      },
      {
        key: '#key for image',
        url: '#URL for image',
        tooltipText: '#tooltip text for image'
      }
    ];

  const callAdapterOptions: AzureCommunicationCallAdapterOptions = useMemo(() => {
      return {
        videoBackgroundImages
      };
    }, [videoBackgroundImages]);
  
    // ... setup code
   const adapter = useAzureCommunicationCallAdapter(
      {
        ...callAdapterArgs,
       options: callAdapterOptions
      },
      leaveCall
    );

   // Create <CallComposite> etc.
}