Steps to enable Video Background Effects in ACS Web UI Library:

[prabhjot-msft]

We are providing an optional way for developers to opt-in for features which require huge dependencies without adding to the bundle size. To enable Video Background Effects, there are two ways:

Tree-Shaking: By using this method, user can add the package while loading the app. Video effects package would be added to the main bundle. Steps:

1. Add import for dependency resolution for video effects:

          import { onResolveVideoEffectDependency } from '@azure/communication-react';
   

2. Pass the dependency injection in AzureCommunicationCallAdapterOptions:

           const callAdapterOptions: AzureCommunicationCallAdapterOptions = useMemo(() => {
                return {
                  videoBackgroundOptions: {
                    videoBackgroundImages,
                    onResolveDependency: onResolveVideoEffectDependency
                  }
                };
             }, []);
   

Lazy-Loading: By using this method, the video effects package will not be included in the main bundle. Separate chunk will be downloaded when video effects are used.
Note: lazy-loading only works if code splitting is enabled for the app.

1. Add import for dependency resolution for video effects:

        import { onResolveVideoEffectDependencyLazy } from '@azure/communication-react';
   

2. Pass the dependency injection in AzureCommunicationCallAdapterOptions:

         const callAdapterOptions: AzureCommunicationCallAdapterOptions = useMemo(() => {
             return {
               videoBackgroundOptions: {
                 videoBackgroundImages,
                 onResolveDependency: onResolveVideoEffectDependencyLazy
               }
             };
           }, []);