Change Background Image on Azure Communications Video Call using Mac (Ventura maybe other versions also) Safari or chrome causes video to freeze

Question

Hi Support,

When beta testing our new app the background image video fx was working fine on windows but when we tried macOS the video locked up when the user tried to change background - is this a known bug? Thanks, Paul

 "@azure/communication-calling": "^1.14.1",
 "@azure/communication-calling-effects": "^1.0.1",
 "@azure/communication-common": "^2.2.1",
 "@azure/communication-rooms": "^1.0.0",

Answer 1

Paul, Thanks for reporting this issue.

We are unable to repro this in our sample apps, we would need additional info about your scenario, resource, and logs. For this, we may have to engage offline.

Is this issue confined to any images sizes? If it's fine, share some' code snippets.

In the interim, capture additional logs at your end, outlined here : Troubleshooting in Azure Communication Services

Note: Kindly do not share any PII data on the public forum.

Answer 2

Update:

I'd been discussing on this on internally, our product engineering team have made an update - where they moved isSupported method on the video effects feature API - VideoEffectsFeature interface | Microsoft Learn - deprecating the old one.

Azure doc update:
QuickStart: Add video effects to your video calls | Background replacement with an image

const backgroundImage = 'https://linkToImageFile'; 
// Create the effect instance 
const backgroundReplacementEffect = new BackgroundReplacementEffect({ 
    backgroundImageUrl: backgroundImage
}); 
// Recommended: Check support by using the isSupported method on the feature API
const backgroundReplacementSupported = await videoEffectsFeatureApi.isSupported(backgroundReplacementEffect);
if (backgroundReplacementSupported) { 
    // Use the video effects feature api as before to start/stop effects 
    await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect); 
}

// The video effects feature API
const videoEffectsFeatureApi = localVideoStream.feature(Features.VideoEffects);

// The bg replacement effect object
const backgroundReplacementEffect = new EffectsSDK.BackgroundReplacementEffect({ backgroundImage: 'imagePath' });

// check support:
const backgroundReplacementSupported = await videoEffectsFeatureApi.isSupported(backgroundReplacementEffect);

Much appreciate your feedback.

---

If the answer helped (pointed you in the right direction) > please click Accept Answer and Upvote