blur effect when using components instead of composite

[jitt3]

Hey there,
I am unsure if this is the right channel to discuss this topic, but I struggle to implement the blur effects in my video project.
At first, I created a solution based on the Azure composite, but after a few months, we decided to use the components solution. That decision brought extra work to the team as we had to change several things.
I am working on implementing the blur effect in the local video stream, but so far, I haven't been able to do so. The examples are provided by Azure (or at least the ones I've read) https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/voice-video-calling/get-started-video-effects?pivots=platform-web
do not include an implementation with the Azure components.
So I came here to see if someone else has more experience with Azure components, any help would be greatly appreciated

[prabhjot-msft]

Hey @jitt3, thanks for sharing this issue. Video effects can be enabled using the components. LocalVideoStream needs to be accessed from the call and then you can start the blur effect on that. I am sharing a snippet on how to do that. I have also added these changes in our calling quickstart ui-library-starting-with-calling-stateful.

You can try the sample and see how it works. Here is the branch where the changes to enable effects are Azure-Samples/communication-services-javascript-quickstarts@main...prabhjot/enable-background-blur.

Let me know if this is helpful or if you need more details on this. Also, can you share the feedback about why you decided to switch to components from composites. This can help us improve our composites.

import { BackgroundBlurConfig, BackgroundBlurEffect } from '@azure/communication-calling-effects';
import { Features } from '@azure/communication-calling';

const onBlurVideoBackground = async () => {
  const stream =
       call?.localVideoStreams.find((stream:any) => stream.mediaStreamType === 'Video');
 const createBackgroundBlurEffect = (config?: BackgroundBlurConfig): BackgroundBlurEffect => {
         return new BackgroundBlurEffect(config);
       };
     if(stream) {
       return stream.feature(Features.VideoEffects).startEffects(createBackgroundBlurEffect({}));
     }
  };

<ControlBarButton
         title="Blur Background"
         onRenderIcon={() => onRenderIcon()}
         onClick ={async () => {
           await onBlurVideoBackground();
         }} />

[jitt3]

@prabhjot-msft , I appreciate your response. I tried to get the local stream and apply the 'feature' method, but it does not exist.
but that was because I was using the 'useSelector' hook from the '@azure/communication-react'
Here is the small piece of code I was using to get the localStream

  const localVideoStream = useSelector((state) => {
    const [firstCall] = Object.values(state.calls);
    const stream = firstCall?.localVideoStreams.find(
	  (currentStream) => currentStream.mediaStreamType === "Video",
    );
     //stream.feature ->the method does not exist
    return stream;
  });

Now, with the example you shared, I have the blur working. I am still using the useSelector to know if there is an active effect as the other stream object(from the useCall hook) does not include that info.

const localStreamInfo = useSelector((state) => {
  const [firstCall] = Object.values(state.calls);
     return firstCall?.localVideoStreams.find(
       (currentStream) => currentStream.mediaStreamType === "Video",
     );
   });
  const onBlurBackground = async () => {
    const stream = call?.localVideoStreams.find(
	(currentStream) => currentStream.mediaStreamType === "Video",
      );
      if (!stream || !localStreamInfo) {
	 return;
      }
      if (localStreamInfo.videoEffects?.activeEffects?.includes("BackgroundBlur")) {
          await stream.feature(Features.VideoEffects).stopEffects();
      } else {
	 await stream.feature(Features.VideoEffects).startEffects(new BackgroundBlurEffect());
      }
  };

Related to the composites feedback:

The main reason for moving our project away from the composites was the level of customization; we wanted to change the controls' position and layout distribution. We also wanted to create our lobby view(with the composites, you only have one component that orchestrates lobby and meeting view together). However, when talking about implementation and functionality, the composites work flawlessly.

[prabhjot-msft]

@jitt3 great to hear that the issue is resolved, let us know if there is something you need help with. Thanks for sharing the feedback on Composites. Here are few customizations which are available for layouts https://azure.github.io/communication-ui-library/?path=/docs/components-video-gallery--docs and custom button injection for adding more controls in control bar https://azure.github.io/communication-ui-library/?path=/docs/examples-custom-button-injection--docs. This kind of feedback helps us improve our composites experience, glad to know it worked smoothly. Could you mention few details of what customization you needed for lobby view.