Video Aspect Ratio Changes After Applying Blur Effect

Question

Video Aspect Ratio Changes After Applying Blur Effect

Gautam Goklani 20

After adding a blur effect to a video, the aspect ratio changes. I was unable to find anything after reviewing Documentation, but no relevant information was found regarding this issue.

Before Applying Blur:
User's image

After Applying Blur:
User's image

I am using Azure Video Gallery for Rendering Video.

Bhargavi Naragani 6,535 Reputation points Microsoft External Staff Moderator

2025-04-04T19:23:03.53+00:00
Hi @Gautam Goklani,

Since Azure Media Services has been retired, direct support and documentation for its features, including video transformations and applying effects like blurring, are no longer available. https://learn.microsoft.com/en-us/samples/azure-samples/media-services-v3-dotnet-tutorials/media-services-v3-dotnet-tutorials/

To address the issue of aspect ratio changes after applying a blur effect, consider using alternative approach:
FFmpeg - A widely used, open-source multimedia framework that can handle video processing tasks, including applying blur effects without altering the aspect ratio. Applying a Blur Effect with FFmpeg:

ffmpeg -i input.mp4 -vf "gblur=sigma=10" -c:a copy output.mp4

This command applies a Gaussian blur to input.mp4 and saves it as output.mp4 while preserving the original aspect ratio.

While Azure Media Services is retired, you can set up a virtual machine or container in Azure to run FFmpeg or similar tools. This allows you to integrate video processing into your Azure-based workflows. https://learn.microsoft.com/en-us/answers/questions/1921026/with-azure-media-services-retired-is-there-a-way-t

Let me know if you have any further Queries.
Bhargavi Naragani 6,535 Reputation points Microsoft External Staff Moderator

2025-04-07T02:27:02.4833333+00:00

Hi @Gautam Goklani,
Just checking in to see if above information was helpful. If you have any further updates on this issue, please feel free to post back.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Gautam Goklani 20

I'm a bit confused—since we're using Azure Communication Services (as specified in the category section), I'm wondering if Azure Media Services is included within it. Also, I'm sharing the code we're using to apply a blur effect to the local video stream during a call.

Bhargavi Naragani 6,535 Reputation points Microsoft External Staff Moderator

2025-04-07T06:57:25.7633333+00:00
Hi @Gautam Goklani,

Thank you for providing additional information that you're implementing a background blur effect in your video calls using Azure Communication Services (ACS), and you're encountering an aspect ratio issue after applying the blur effect. You're utilizing the BackgroundBlurEffect from the ACS Calling SDK to blur the background during video calls. After applying the blur effect, the video's aspect ratio changes unexpectedly.

The video container's CSS properties might be influencing the video's dimensions, leading to aspect ratio changes when the blur effect is applied. Certain browsers or devices may have varying support for video effects, potentially causing rendering issues.

Apply CSS rules to maintain a consistent aspect ratio for the video container. For example:

.video-container { width: 100%; height: auto; aspect-ratio: 16 / 9; /* Adjust based on your video's aspect ratio */ } video { width: 100%; height: 100%; object-fit: cover; }

If using flexbox or grid layouts, ensure that the video component's parent containers do not impose constraints that could alter the video's dimensions.

Background blur effects are supported on specific browsers and devices. Ensure that the platform you're targeting supports these features. As per Microsoft's documentation: >

Background blur and background replacement for Web Desktop browsers is in GA availability. This quickstart uses the Azure Communication Services Calling SDK version of 1.13.1 (or greater) and the Azure Communication Services Calling Effects SDK version greater than or equal to 1.0.1****. Currently desktop browser support for creating video background effects is only supported on Chrome and Edge Desktop Browser (Windows and Mac) and Mac Safari Desktop.

Ensure that you're using the appropriate versions of the ACS Calling SDK, and the Calling Effects SDK as mentioned above. Before applying the blur effect, verify if the effect is supported on the current device and browser:

const effect = new BackgroundBlurEffect(); const isSupported = videoEffectsFeatureApi?.isSupported(effect); if (!isSupported) { console.error("Background blur is not supported on this device or browser."); return; }

If the blur effect isn't supported, consider providing alternative functionalities or notifying the user appropriately.
https://learn.microsoft.com/en-us/azure/communication-services/concepts/voice-video-calling/video-effects
Gautam Goklani 20 Reputation points

2025-04-09T06:37:58.2733333+00:00

Hello @Bhargavi Naragani ,
I tried using CSS which was provided but it didn't work for me. We are using Azure Video Gallery for rendering all of the videos on the call. Can you please provide me any video gallery attribute which I can use for fixing this issue.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-09T11:58:58.4166667+00:00
Hello @Gautam Goklani,

As per the description, you're using the BackgroundBlurEffect from the ACS Calling SDK to apply a blur during video calls, but after enabling it, the video appears zoomed in or stretched, likely due to aspect ratio issues.

below are a few points to help resolve this:

Aspect ratio inconsistency can occur when the video container doesn't have strict dimensions or layout constraints. When a video effect is applied (like background blur), the processed stream might differ slightly in resolution or scaling, which impacts layout rendering.

To maintain the correct aspect ratio and prevent the video from stretching or zooming unnaturally, update the CSS for the video container. You can apply styles like this:
.video-container { width: 100%; height: auto; aspect-ratio: 16 / 9; /* Adjust this based on your layout */ background-color: black; } video { width: 100%; height: 100%; object-fit: contain; /* Use 'cover' if you want it to fill completely */ }

If you're using the AzureCommunicationVideoGallery component from @azure/communication-react, you can also override its default styles using the styles prop like below:
<AzureCommunicationVideoGallery styles={{ root: { video: { objectFit: 'contain', aspectRatio: '16 / 9' } } }} />

Ensure that parent containers (especially when using flexbox or grid layouts) are not applying restrictive sizing or alignment that might affect how the video is displayed.

Check that you’re using the correct SDK versions:

@azure/communication-calling: v1.13.1 or higher

@azure/communication-calling-effects: v1.0.1 or higher

Make sure the background blur effect is supported in the user’s browser and device before applying it. You check here:
const blurEffect = new BackgroundBlurEffect(); const isSupported = videoEffectsFeatureApi?.isSupported(blurEffect); if (!isSupported) { console.warn("Background blur is not supported on this browser or device."); return; }

As per Microsoft’s official documentation, background blur is currently supported only on desktop versions of Chrome, Edge, and Safari (on both Windows and Mac). It's not supported on mobile browsers at this time.

Here’s the link to the official documentation for more information:

https://learn.microsoft.com/en-us/azure/communication-services/concepts/voice-video-calling/video-effects

If you have any questions or still running into more issues, let me know in the "comments" and I would be happy to help you.
Gautam Goklani 20 Reputation points

2025-04-09T13:27:14.15+00:00

Hello @Bodapati Harish ,

I have Added Video Gallery as suggested in the Azure Communication Services Ui Components documentation and made the changes you suggested then also my video's aspect ratio changes as below.

Before Blur:

After Blur:
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-10T05:13:41.1266667+00:00
Hello @Gautam Goklani,

Thanks for sharing the update and the screenshots.

It seems like the video element inside the VideoGallery might still be stretching or zooming slightly when the blur is enabled.

Here are a few things you can try:

In your styles prop, try switching from objectFit: 'contain' to 'cover' and see if it improves how the video looks after blur is applied.

Make sure that no parent container is forcing width or height that could be affecting layout, especially if you're using flex or grid.

Check if the video stream changes when the blur effect is applied. Sometimes, a new video stream instance can reset or override layout styles.

Try wrapping the VideoGallery in a fixed aspect ratio container (using aspect-ratio: 16/9) and see if it helps maintain the correct view consistently.

If this answer helps, please consider upvoting. If you have more questions, click Comment.
Gautam Goklani 20 Reputation points

2025-04-10T06:01:42.9133333+00:00

Hello @Bodapati Harish ,
I am still facing the issue of the aspect ratio even after making the suggested changes
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-10T07:44:03.2033333+00:00
Hello @Gautam Goklani,

Kindly try the additional steps outlined below, which might help resolve the issue.

Use a Fixed Aspect Ratio Container

.video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ background-color: black; overflow: hidden; border-radius: 8px; } .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

Use this wrapper around your local video view if you're customizing below VideoGallery level.

Use objectFit: 'cover' in Styles

<VideoGallery {...videoGalleryProps} styles={{ root: { width: '100%', height: '100%', }, video: { objectFit: 'cover' } }} />

Avoid contain when blur is applied, as it may preserve padding instead of filling space.

Lock the Camera Resolution

Locking the resolution ensures blur doesn’t affect the aspect ratio unpredictably.

await deviceManager.selectCamera({ deviceId: selectedCamera.id, constraints: { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { ideal: 30 } } });

Disable Dynamic Scaling from ACS (if applicable)

Check if VideoStreamRendererViewOptions or layout configuration has dynamic resizing options turned on. Sometimes ACS auto-scales based on container — avoid:

const options: VideoStreamRendererViewOptions = { scalingMode: 'Crop', // or 'Fit' – test different options };

Pass these options while rendering local stream manually (if not using VideoGallery).

Listen to videoFrameUpdated Events

In some advanced cases, especially when effects are applied, ACS emits frame updates — you can check video stream dimensions and adjust accordingly:

localVideoStream.on('videoFrameUpdated', () => { // Check frame dimensions and adjust styling dynamically if needed });

Add an Overlay or Backdrop Placeholder

To enforce layout integrity, you can layer a placeholder frame or background that fills and maintains the aspect ratio:

<div className="video-wrapper"> <VideoGallery {...videoGalleryProps} /> </div>

Hope this helps! Let me know if you need any further details.
Gautam Goklani 20 Reputation points

2025-04-10T11:10:38.8066667+00:00

Hello @Bodapati Harish ,
I am still facing the issue of the aspect ratio even after making the suggested changes.
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-11T03:16:41.6733333+00:00
Hello @Gautam Goklani,

Thanks for the update.

Since the issue still persists even after applying the above suggestions, could you please help with the following details so I can further investigate?

Are you using any custom implementation inside the VideoGallery, or are you rendering the local stream separately using VideoStreamRenderer? If yes, please share a snippet of how you’re applying the blur and rendering the local stream.

Are you observing the aspect ratio issue only on your local video stream or also on remote streams (other participants)?

Is this behavior consistent across browsers (e.g., Chrome, Edge)?

Could you confirm if you're using the latest version of @azure/communication-react package? If not, upgrading might help as recent versions include improvements to video rendering and layout handling.

If you temporarily remove the blur effect and re-test, does the aspect ratio render correctly in all resolutions? This will help us isolate whether the issue is related to the blur effect or stream layout handling in general.

Once I have these details, I can help suggest a more precise fix.
Gautam Goklani 20 Reputation points

2025-04-11T05:18:15.3066667+00:00
Hello @Bodapati Harish ,

I am using VideoStreamRenderer which I have applied in the following way.

I am also observing aspect ratio issue on remote streams too.

Yes, the following issue is consistent across browsers. I have faced the following issue in Chrome and Edge both.

As you can see, I have latest package installed of @azure/communication-react.

If I stop blur effect the aspect ratio of the video changes back to normal.
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-14T04:46:00.6066667+00:00
Hello @Gautam Goklani,

Thank you for sharing your implementation.

The aspect ratio issue still appears when blur is applied (but looks fine when blur is off), it's very likely related to the ACS processing pipeline for background effects.

I've suggest trying the following two final fixes:

Use aspect-ratio CSS property (more reliable than padding-based aspect ratio):

.video-wrapper { aspect-ratio: 16 / 9; width: 100%; max-height: 100%; background-color: black; overflow: hidden; position: relative; border-radius: 8px; }

This ensures your layout maintains 16:9, even when ACS adds blur/canvas processing.

Force override styles on the rendered video or canvas:

After attaching view.target, add this:

useEffect(() => { const videoNode = view?.target?.querySelector('video') || view?.target?.querySelector('canvas'); if (videoNode) { Object.assign(videoNode.style, { width: '100% !important', height: '100% !important', objectFit: 'cover !important' }); } }, [view]);

These two steps combined should force aspect ratio control even when ACS applies transformations like blur.
Gautam Goklani 20 Reputation points

2025-04-14T05:22:27.5066667+00:00

Hello @Bodapati Harish ,
I am still not able to fix the issue after applying your suggested changes.

Bodapati Harish 820 Microsoft External Staff Moderator

Hello @Gautam Goklani,

We have already provided resolution steps, but the issue still persists and has not been resolved. Could you please try below final change that might help resolve the issue .

Step 1: Explicitly Set Video Stream Constraints

Ensure that the video stream maintains a consistent resolution and aspect ratio from the start. This can help prevent the blur effect from introducing unexpected scaling.


useEffect(() => {

  const setCameraConstraints = async () => {

    try {

      const deviceManager = call.deviceManager;

      const cameras = await deviceManager.getCameras();

      const selectedCamera = cameras[0]; // Or your selected camera

      await deviceManager.selectCamera({

        deviceId: selectedCamera.id,

        constraints: {

          width: { ideal: 1280 },

          height: { ideal: 720 }, // Enforce 16:9 aspect ratio

          aspectRatio: { ideal: 16 / 9 },

          frameRate: { ideal: 30 },

        },

      });

    } catch (error) {

      console.error("Error setting camera constraints:", error);

    }

  };

  if (call) {

    setCameraConstraints();

  }

}, [call]);

Step 2: Update VideoGallery Rendering with Strict Aspect Ratio

Modify the VideoGallery component to enforce a strict aspect ratio at all times, even when the blur effect is applied. Use the styles prop to ensure the video element (or canvas) respects the desired aspect ratio.


<VideoGallery

  {...videoGalleryProps}

  styles={{

    root: {

      width: "100%",

      height: "auto",

      aspectRatio: "16 / 9", // Enforce 16:9 aspect ratio

      overflow: "hidden",

      backgroundColor: "black",

    },

    video: {

      width: "100% !important",

      height: "100% !important",

      objectFit: "cover !important", // Use 'cover' to ensure no black bars

      aspectRatio: "16 / 9 !important",

    },

  }}

/>

Step 3: Dynamically Adjust Video Stream on Blur Effect

Since applying the blur effect might change the video stream, listen for stream updates and dynamically adjust the rendering to maintain the aspect ratio. ACS might emit events or update the stream, so we can hook into the videoFrameUpdated event or reapply styles after the blur effect is applied.


useEffect(() => {

  const blurEffect = async () => {

    try {

      if (call) {

        const videoEffectsFeatureApi = await call?.localVideoStreams

          .find((stream) => stream.mediaStreamType === "Video")

          ?.feature(Features.VideoEffects);

        setVideoEffectsFeatureApi(videoEffectsFeatureApi);

        if (toggleStates.blurBackground && videoEffectsFeatureApi) {

          const effect = new BackgroundBlurEffect();

          const isSupported = videoEffectsFeatureApi?.isSupported(effect);

          if (!isSupported) {

            console.error("Background blur is not supported on this device or browser.");

            return;

          }

          await videoEffectsFeatureApi?.startEffects(effect);

          // After applying the effect, force the aspect ratio on the video element

          const videoNode = document.querySelector("video"); // Adjust selector as needed

          if (videoNode) {

            Object.assign(videoNode.style, {

              width: "100% !important",

              height: "100% !important",

              objectFit: "cover !important",

              aspectRatio: "16 / 9 !important",

            });

          }

        } else {

          await videoEffectsFeatureApi?.stopEffects();

          // Reapply styles when blur is removed

          const videoNode = document.querySelector("video");

          if (videoNode) {

            Object.assign(videoNode.style, {

              width: "100% !important",

              height: "100% !important",

              objectFit: "cover !important",

              aspectRatio: "16 / 9 !important",

            });

          }

        }

        // Listen for video frame updates

        const localVideoStream = call.localVideoStreams.find(

          (stream) => stream.mediaStreamType === "Video"

        );

        if (localVideoStream) {

          localVideoStream.on("videoFrameUpdated", () => {

            const videoNode = document.querySelector("video");

            if (videoNode) {

              Object.assign(videoNode.style, {

                width: "100% !important",

                height: "100% !important",

                objectFit: "cover !important",

                aspectRatio: "16 / 9 !important",

              });

            }

          });

        }

      }

    } catch (error) {

      console.error("Error while applying blur background effect:", error);

    }

  };

  blurEffect();

}, [call, call?.isLocalVideoStarted, toggleStates.blurBackground]);

Step 4: Verify SDK Versions and Browser Support

Ensure you’re using the correct versions of the ACS SDKs, as background blur is only supported on specific browsers (Chrome, Edge, and Safari on desktop). Confirm the following:

@azure/communication-calling: v1.13.1 or higher
@azure/communication-calling-effects: v1.0.1 or higher
@azure/communication-react: Use the latest version to ensure bug fixes for video rendering.

If the issue persists on unsupported browsers (e.g., mobile browsers), consider disabling the blur effect or providing a fallback.

Step 5: Test Without Blur Effect

To isolate the issue, temporarily disable the blur effect and confirm if the aspect ratio remains correct. If it does, the issue is definitely related to the blur effect’s processing in ACS. If the aspect ratio is still incorrect, there might be an issue with the VideoGallery component’s default rendering behavior or parent container styles.

Additional Debugging :

Inspect Video Stream Dimensions: After applying the blur effect, log the video stream’s dimensions to see if they change:


   const stream = call.localVideoStreams.find((s) => s.mediaStreamType === "Video");

   const videoTrack = stream?.source?.getTracks()[0];

   console.log(videoTrack?.getSettings());

If the dimensions or aspect ratio change, you may need to manually adjust the stream’s constraints.

Custom Rendering: If the VideoGallery component continues to misbehave, consider rendering the local video stream manually using VideoStreamRenderer from @azure/communication-calling. This gives you more control over the rendering process:


   const renderer = new VideoStreamRenderer(localVideoStream);

   const view = await renderer.createView({ scalingMode: "Crop" });

   const videoContainer = document.getElementById("local-video-container");

   videoContainer.appendChild(view.target);

Fallback to FFmpeg: If ACS cannot resolve the issue, you might consider processing the video with FFmpeg (as suggested earlier by Bhargavi) to apply the blur effect before streaming it through ACS. This would require additional infrastructure but ensures complete control over the video output.

Let me know if you need further assistance!

Gautam Goklani 20 Reputation points

2025-04-15T05:49:06.92+00:00

Hello @Bodapati Harish ,
I tried your solution in which I got error at the following block of code:

Then I ignored the following changes and applied the other suggested steps after which also I was not able to fix the following issue. Then I tried to debug using the debugging steps you provided in which I got the following error:
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-16T13:16:07.3766667+00:00

Hello Gautam Goklani,

Please verify if the following link helps in adjusting video aspect ratio changes: Azure Communication Services - Video Constraints."
Gautam Goklani 20 Reputation points

2025-04-17T06:19:46.48+00:00

Hello @Bodapati Harish ,

I tried this Azure Communication Services - Video Constraints solution too and then also I was not able to fix the following issue. After debugging the following applied solution I noted:

Before Blur SampleReported:

After Blur SampleReported:

As you can see frameHeightReceived: 234 & frameWidthReceived: 416 is same in both of the cases (With & Without Blur).
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-18T12:06:24.3+00:00
Hello Gautam Goklani,

Thanks for the update.

The resolution values remain constant before and after blur (frameHeightReceived: 234, frameWidthReceived: 416), the issue may not be related to resolution settings.

Here are a few other areas you can review:

Apply Explicit Video Constraints

Make sure you are applying custom video constraints when creating the LocalVideoStream. This ensures better control over resolution and performance, which may help effects like background blur apply correctly.

const localVideoStream = new LocalVideoStream(cameraDevice, { width: 640, height: 360, frameRate: 30 });

This helps standardize the video stream across devices and browsers.

Test Without Azure Video Gallery

You mentioned that you're using Azure Video Gallery to render the video feeds. Try rendering the local video stream in a basic <video> HTML element outside the gallery. This test will help check if the issue is related to the blur effect itself or how the gallery is displaying it.

Inspect and Adjust CSS Styling

The Video Gallery might have its own layout styles that could interfere with the video display. Inspect the CSS and try applying simple styles like:

video { object-fit: cover; width: 100%; height: auto; }

Make sure that no scaling, cropping, or transformations are hiding the blur effect.
I hope this helps!. Let me know if you need any further clarification, and I’ll be happy to assist you.

7 answers

Your answer

Bhargavi Naragani 6,535 Reputation points Microsoft External Staff Moderator

2025-04-04T19:23:03.53+00:00

Hi @Gautam Goklani,

Since Azure Media Services has been retired, direct support and documentation for its features, including video transformations and applying effects like blurring, are no longer available. https://learn.microsoft.com/en-us/samples/azure-samples/media-services-v3-dotnet-tutorials/media-services-v3-dotnet-tutorials/

To address the issue of aspect ratio changes after applying a blur effect, consider using alternative approach:
FFmpeg - A widely used, open-source multimedia framework that can handle video processing tasks, including applying blur effects without altering the aspect ratio. Applying a Blur Effect with FFmpeg:

ffmpeg -i input.mp4 -vf "gblur=sigma=10" -c:a copy output.mp4

This command applies a Gaussian blur to input.mp4 and saves it as output.mp4 while preserving the original aspect ratio.

While Azure Media Services is retired, you can set up a virtual machine or container in Azure to run FFmpeg or similar tools. This allows you to integrate video processing into your Azure-based workflows. https://learn.microsoft.com/en-us/answers/questions/1921026/with-azure-media-services-retired-is-there-a-way-t

Let me know if you have any further Queries.
Bhargavi Naragani 6,535 Reputation points Microsoft External Staff Moderator

2025-04-07T02:27:02.4833333+00:00

Hi @Gautam Goklani,
Just checking in to see if above information was helpful. If you have any further updates on this issue, please feel free to post back.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Gautam Goklani 20 Reputation points

2025-04-07T06:25:37.47+00:00

I'm a bit confused—since we're using Azure Communication Services (as specified in the category section), I'm wondering if Azure Media Services is included within it. Also, I'm sharing the code we're using to apply a blur effect to the local video stream during a call.

useEffect . ?. } } } } } } } }, [
Gautam Goklani 20 Reputation points

2025-04-09T06:37:58.2733333+00:00

Hello @Bhargavi Naragani ,
I tried using CSS which was provided but it didn't work for me. We are using Azure Video Gallery for rendering all of the videos on the call. Can you please provide me any video gallery attribute which I can use for fixing this issue.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Gautam Goklani 20 Reputation points

2025-04-09T13:27:14.15+00:00

Hello @Bodapati Harish ,

I have Added Video Gallery as suggested in the Azure Communication Services Ui Components documentation and made the changes you suggested then also my video's aspect ratio changes as below.

Before Blur:

After Blur:
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-10T05:13:41.1266667+00:00

Hello @Gautam Goklani,

Thanks for sharing the update and the screenshots.

It seems like the video element inside the VideoGallery might still be stretching or zooming slightly when the blur is enabled.

Here are a few things you can try:

In your styles prop, try switching from objectFit: 'contain' to 'cover' and see if it improves how the video looks after blur is applied.

Make sure that no parent container is forcing width or height that could be affecting layout, especially if you're using flex or grid.

Check if the video stream changes when the blur effect is applied. Sometimes, a new video stream instance can reset or override layout styles.

Try wrapping the VideoGallery in a fixed aspect ratio container (using aspect-ratio: 16/9) and see if it helps maintain the correct view consistently.

If this answer helps, please consider upvoting. If you have more questions, click Comment.
Gautam Goklani 20 Reputation points

2025-04-10T06:01:42.9133333+00:00

Hello @Bodapati Harish ,
I am still facing the issue of the aspect ratio even after making the suggested changes
Gautam Goklani 20 Reputation points

2025-04-10T11:10:38.8066667+00:00

Hello @Bodapati Harish ,
I am still facing the issue of the aspect ratio even after making the suggested changes.
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-11T03:16:41.6733333+00:00

Hello @Gautam Goklani,

Thanks for the update.

Since the issue still persists even after applying the above suggestions, could you please help with the following details so I can further investigate?

Are you using any custom implementation inside the VideoGallery, or are you rendering the local stream separately using VideoStreamRenderer? If yes, please share a snippet of how you’re applying the blur and rendering the local stream.

Are you observing the aspect ratio issue only on your local video stream or also on remote streams (other participants)?

Is this behavior consistent across browsers (e.g., Chrome, Edge)?

Could you confirm if you're using the latest version of @azure/communication-react package? If not, upgrading might help as recent versions include improvements to video rendering and layout handling.

If you temporarily remove the blur effect and re-test, does the aspect ratio render correctly in all resolutions? This will help us isolate whether the issue is related to the blur effect or stream layout handling in general.

Once I have these details, I can help suggest a more precise fix.
Gautam Goklani 20 Reputation points

2025-04-11T05:18:15.3066667+00:00

Hello @Bodapati Harish ,

I am using VideoStreamRenderer which I have applied in the following way.

I am also observing aspect ratio issue on remote streams too.

Yes, the following issue is consistent across browsers. I have faced the following issue in Chrome and Edge both.

As you can see, I have latest package installed of @azure/communication-react.

If I stop blur effect the aspect ratio of the video changes back to normal.
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-14T04:46:00.6066667+00:00

Hello @Gautam Goklani,

Thank you for sharing your implementation.

The aspect ratio issue still appears when blur is applied (but looks fine when blur is off), it's very likely related to the ACS processing pipeline for background effects.

I've suggest trying the following two final fixes:

Use aspect-ratio CSS property (more reliable than padding-based aspect ratio):

.video-wrapper { aspect-ratio: 16 / 9; width: 100%; max-height: 100%; background-color: black; overflow: hidden; position: relative; border-radius: 8px; }

This ensures your layout maintains 16:9, even when ACS adds blur/canvas processing.

Force override styles on the rendered video or canvas:

After attaching view.target, add this:

useEffect(() => { const videoNode = view?.target?.querySelector('video') || view?.target?.querySelector('canvas'); if (videoNode) { Object.assign(videoNode.style, { width: '100% !important', height: '100% !important', objectFit: 'cover !important' }); } }, [view]);

These two steps combined should force aspect ratio control even when ACS applies transformations like blur.
Gautam Goklani 20 Reputation points

2025-04-14T05:22:27.5066667+00:00

Hello @Bodapati Harish ,
I am still not able to fix the issue after applying your suggested changes.
Gautam Goklani 20 Reputation points

2025-04-15T05:49:06.92+00:00

Hello @Bodapati Harish ,
I tried your solution in which I got error at the following block of code:

Then I ignored the following changes and applied the other suggested steps after which also I was not able to fix the following issue. Then I tried to debug using the debugging steps you provided in which I got the following error:
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-16T13:16:07.3766667+00:00

Hello Gautam Goklani,

Please verify if the following link helps in adjusting video aspect ratio changes: Azure Communication Services - Video Constraints."
Gautam Goklani 20 Reputation points

2025-04-17T06:19:46.48+00:00

Hello @Bodapati Harish ,

I tried this Azure Communication Services - Video Constraints solution too and then also I was not able to fix the following issue. After debugging the following applied solution I noted:

Before Blur SampleReported:

After Blur SampleReported:

As you can see frameHeightReceived: 234 & frameWidthReceived: 416 is same in both of the cases (With & Without Blur).
Bodapati Harish 820 Reputation points Microsoft External Staff Moderator

2025-04-18T12:06:24.3+00:00

Hello Gautam Goklani,

Thanks for the update.

The resolution values remain constant before and after blur (frameHeightReceived: 234, frameWidthReceived: 416), the issue may not be related to resolution settings.

Here are a few other areas you can review:

Apply Explicit Video Constraints

Make sure you are applying custom video constraints when creating the LocalVideoStream. This ensures better control over resolution and performance, which may help effects like background blur apply correctly.

const localVideoStream = new LocalVideoStream(cameraDevice, { width: 640, height: 360, frameRate: 30 });

This helps standardize the video stream across devices and browsers.

Test Without Azure Video Gallery

You mentioned that you're using Azure Video Gallery to render the video feeds. Try rendering the local video stream in a basic <video> HTML element outside the gallery. This test will help check if the issue is related to the blur effect itself or how the gallery is displaying it.

Inspect and Adjust CSS Styling

The Video Gallery might have its own layout styles that could interfere with the video display. Inspect the CSS and try applying simple styles like:

video { object-fit: cover; width: 100%; height: auto; }

Make sure that no scaling, cropping, or transformations are hiding the blur effect.
I hope this helps!. Let me know if you need any further clarification, and I’ll be happy to assist you.

Answer 1

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.