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
               }
             };
           }, []);
   

[souvickcse]

Hi Can you please confirm onResolveVideoEffectDependencyLazy will work with callWithChatComposite.js or not, we are modifying the file and add the video background code here, and creating the file with rushx build

export const loadCallAdapter=async function (args) {
  const { userId, token, displayName, endpoint, locator, threadId } = args;
  const adapter = await createAzureCommunicationCallWithChatAdapter({
    userId,
    displayName: displayName ?? 'anonymous',
    credential: new AzureCommunicationTokenCredential(token),
    endpoint: endpoint,
    locator: locator,
    callAdapterOptions:{
      videoBackgroundOptions: {
        videoBackgroundImages:
        [
          {
            key: 'water',
            url: 'https://fastly.picsum.photos/id/181/1280/720.jpg?hmac=KamdE18IKGf8eJGKyKQGcuBnqjXZuYW9HJFg5pHmHEs',
            tooltipText: 'water'
          },
          {
            key: 'beach',
            url: 'https://fastly.picsum.photos/id/239/1280/720.jpg?hmac=odpKOBVl2GCr6NHqZ2gkIK5rXo76ZhKD714Rwz4_SeY',
            tooltipText: 'Beach'
          },
          {
            key: 'cafe',
            url: 'https://fastly.picsum.photos/id/969/1280/720.jpg?hmac=3jjzKd0xIBH7PVwRa9PGmm4-X9NCPNecXWwDGFo1THk',
            tooltipText: 'Cafe'
          },
        ],
        onResolveDependency: onResolveVideoEffectDependencyLazy
      },
     
    }
  });

when we are using the file it is giving Loading chunk 14 failed. (error: http://localhost:21000/14.js)

but if we use onResolveVideoEffectDependency only it is working, but the file size is increasing.

[Rohanfulzele]

@souvickcse I am also facing the same issue.

[alkwa-msft]

@prabhjot-msft do we think we can help out these people?

[prabhjot-msft]

@souvickcse yes, onResolveVideoEffectDependencyLazy should work with callWithChatComposite but it would only work if config settings are done for the application to allow code-splitting and chunk generation. From the error mentioned above Loading chunk 14 failed looks like code splitting is not working properly. Can you share the config settings for the application so that we can make sure if the issue is with library. Can you also share the version of communication-react, browser and device that is being used?

[prabhjot-msft]

@souvickcse @Rohanfulzele here is a solution you can try, creating a separate JS dependency injection for onResolveVideoEffectDependencyLazy and export as VideoEffectDependency.js. Here is a sample code for passing option to enable video effects. Give it a try and let us know if you are able to load the video effect dependency with onResolveVideoEffectDependencyLazy separately without increasing the main bundle size https://github.com/Azure/communication-ui-library/compare/jinan/video-effect-bundle