How to save selected video background effect from one call to the next using adapter.onStateChange

[mgamis-msft]

When using our CallAdapter or CallWithChatAdapter, you may want to save the selected video background effect from one call to the next. In this show and tell we will save the background effect to the browser local storage.

We will listen through onStateChange callback like to track the selected video background effect and save it to local storage:

  const afterCallAdapterCreate = useCallback(async (adapter: CallAdapter): Promise<CallAdapter> => {
      if (state.selectedVideoBackgroundEffect) {
        window.localStorage.setItem('background-effect', state.selectedVideoBackgroundEffect?.effectName.toString());
        if ('key' in state.selectedVideoBackgroundEffect && state.selectedVideoBackgroundEffect.key) {
          window.localStorage.setItem('background-effect-key', state.selectedVideoBackgroundEffect.key);
        }
      }
    });
    const backgroundEffect = window.localStorage.getItem('background-effect');
    const backgroundEffectKey = window.localStorage.getItem('background-effect-key');
    if (backgroundEffect) {
      if (backgroundEffect === 'blur') {
        adapter.updateSelectedVideoBackgroundEffect({ effectName: 'blur' });
      } else if (backgroundEffect === 'replacement' && backgroundEffectKey) {
        adapter.updateSelectedVideoBackgroundEffect({
          effectName: 'replacement',
          key: backgroundEffectKey,
          backgroundImageUrl: videoBackgroundImages.find((image) => image.key === backgroundEffectKey)?.url ?? ''
        });
      }
    }
    return adapter;
  }, []);

  const adapter = useAzureCommunicationCallAdapter(
    {
      ...adapterArgs,
      userId,
      locator,
      options: callAdapterOptions
    },
    afterCallAdapterCreate
  );

The following should result in your composite saving the user's last video background effect for the next call like in this short video:

2024-11-28.23-58-56.mp4