@azure/communication-calling-effects v1.0.1

Azure Communication Calling Effects library for JavaScript

Get started with Azure Communication Services by using the Communication Services calling client library to add voice and video calling to your app. Read more about Azure Communication Services here.

Prerequisites

• Setup Azure Communication Services to be able to start video calls. Follow this guide. You'll need the LocalVideoStream to be able to start effects.

Using video effects

Install the package

Use the npm install command to install the Azure Communication Services Effects SDK for JavaScript.

!IMPORTANT This quickstart uses the Azure Communication Services Calling SDK version greater than 1.10.0 and the Azure Communication Services Calling Effects SDK version greater than 1.0.0.

npm install @azure/communication-calling-effects --save

!NOTE Currently there are two available video effects:

• Background blur
• Background replacement with an image

To use video effects with the Azure Communication Calling SDK, once you have created a LocalVideoStream, get the VideoEffects feature API of the LocalVideoStream to start/stop video effects:

import * as AzureCommunicationCallingSDK from '@azure/communication-calling'; 
import { BackgroundBlurEffect, BackgroundReplacementEffect } from '@azure/communication-calling-effects'; 

// Get the video effects feature api on the LocalVideoStream // (here, localVideoStream is the LocalVideoStream object you created while setting up video calling) const videoEffectsFeatureApi = localVideoStream.features(AzureCommunicationCallingSDK.Features.VideoEffects);

// Subscribe to useful events videoEffectsFeatureApi.on(‘effectsStarted’, () => { // Effects started }); videoEffectsFeatureApi.on(‘effectsStopped’, () => { // Effects stopped }); videoEffectsFeatureApi.on(‘effectsError’, (error) => { // Effects error });

### Background blur:
```js
// Create the effect instance 
const backgroundBlurEffect = new BackgroundBlurEffect(); 

// Recommended: Check support 
const backgroundBlurSupported = await backgroundBlurEffect.isSupported(); 
if (backgroundBlurSupported) { 
    // Use the video effects feature api we created to start effects
    await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 
}

Background replacement with an image:

You'll need to provide the URL of the image you want as the background to this effect.

!IMPORTANT The startEffects method will fail if the URL is not of an image or is unreachable/unreadable.

!NOTE Current supported image formats are: png, jpg, jpeg, tiff, bmp.

const backgroundImage = 'https://linkToImageFile'; 

// Create the effect instance const backgroundReplacementEffect = new BackgroundReplacementEffect({ backgroundImageUrl: backgroundImage });

// Recommended: Check support const backgroundReplacementSupported = await backgroundReplacementEffect.isSupported(); if (backgroundReplacementSupported) { // Use the video effects feature api as before to start/stop effects await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect); }

Changing the background image for this effect can be done by passing it in in the configure method:
```js
const newBackgroundImage = 'https://linkToNewImageFile'; 
await backgroundReplacementEffect.configure({ 
    backgroundImageUrl: newBackgroundImage
});

Switching effects can be done using the same method on the video effects feature api:

// Switch to background blur 
await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 

// Switch to background replacement 
await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect);

To stop effects:

await videoEffectsFeatureApi.stopEffects();