Skip to content

Commit 69781e4

Browse files
authored
update v2
1 parent f1da9ea commit 69781e4

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

articles/communication-services/quickstarts/voice-video-calling/includes/video-effects/video-effects-javascript.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,17 @@ description: Learn how to add video effects in your video calls using Azure Comm
55
author: sloanster
66

77
ms.author: micahvivion
8-
ms.date: 02/14/2024
8+
ms.date: 02/14/2025
99
ms.topic: quickstart
1010
ms.service: azure-communication-services
1111
ms.subservice: calling
1212
ms.custom: mode-other
1313
---
1414

15-
The Video Effects feature allows users to incorporate visual effects into their video calls, providing developers with the ability to integrate background visual effects and background video replacement into their calling experience. Background blur offers users a way to eliminate distractions behind them, facilitating communication without disruptive activities or confidential information appearing in the background. This is particularly advantageous in telehealth contexts, where providers or patients may wish to obscure their surroundings to protect sensitive or personally identifiable information. Background blur can be applied across various virtual appointment scenarios, such as telebanking and virtual hearings, to enhance user privacy or to hide a messy office. In addition to improving confidentiality, background blur enables greater creative expression by allowing users to upload custom backgrounds for a more engaging and personalized calling experience.lows for more creativity of expression, allowing users to upload custom backgrounds to host a more fun, personalized calling experience.
15+
The Video Effects feature allows users to incorporate visual effects into their video calls, providing developers with the ability to integrate background visual effects and background video replacement into their calling experience. Background blur offers users a way to eliminate distractions behind them, facilitating communication without disruptive activities or confidential information appearing in the background. This is advantageous in telehealth contexts, where providers or patients may wish to obscure their surroundings to protect sensitive or personally identifiable information. Background blur can be applied across various virtual appointment scenarios, such as telebanking and virtual hearings, to enhance user privacy or to hide a messy office. In addition to improving confidentiality, background blur enables greater creative expression by allowing users to upload custom backgrounds for a more engaging and personalized calling experience.lows for more creativity of expression, allowing users to upload custom backgrounds to host a more fun, personalized calling experience.
1616

1717
> [!NOTE]
18-
> The calling effect library cannot be used standalone and can only work when used with the Azure Communication Calling client library for WebJS (https://www.npmjs.com/package/@azure/communication-calling).
18+
> The calling effect library can't be used standalone and can only work when used with the Azure Communication Calling client library for WebJS (https://www.npmjs.com/package/@azure/communication-calling).
1919
2020
## Using video effects
2121
### Install the package
@@ -31,7 +31,7 @@ Use the `npm install` command to install the Azure Communication Services Effect
3131
```console
3232
npm install @azure/communication-calling-effects --save
3333
```
34-
See [here](https://www.npmjs.com/package/@azure/communication-calling-effects) for more details on the calling communication effects npm package page.
34+
For more information see [here](https://www.npmjs.com/package/@azure/communication-calling-effects) for more details on the calling communication effects npm package page.
3535

3636
> [!NOTE]
3737
> Currently there are two available video effects:
@@ -44,7 +44,7 @@ import * as AzureCommunicationCallingSDK from '@azure/communication-calling';
4444

4545
import { BackgroundBlurEffect, BackgroundReplacementEffect } from '@azure/communication-calling-effects';
4646

47-
// Get the video effects feature api on the LocalVideoStream
47+
// Get the video effects feature API on the LocalVideoStream
4848
// (here, localVideoStream is the LocalVideoStream object you created while setting up video calling)
4949
const videoEffectsFeatureApi = localVideoStream.feature(AzureCommunicationCallingSDK.Features.VideoEffects);
5050

@@ -72,7 +72,7 @@ const backgroundBlurEffect = new BackgroundBlurEffect();
7272
const backgroundBlurSupported = await videoEffectsFeatureApi.isSupported(backgroundBlurEffect);
7373

7474
if (backgroundBlurSupported) {
75-
// Use the video effects feature api we created to start effects
75+
// Use the video effects feature API we created to start effects
7676
await videoEffectsFeatureApi.startEffects(backgroundBlurEffect);
7777
}
7878
```
@@ -81,7 +81,7 @@ if (backgroundBlurSupported) {
8181
### Background replacement with an image
8282
You need to provide the URL of the image you want as the background to this effect.
8383
> [!IMPORTANT]
84-
> The `startEffects` method will fail if the URL is not of an image or is unreachable/unreadable.
84+
> The `startEffects` method fails if the URL isn't of an image or is unreachable/unreadable.
8585
>
8686
8787
> [!NOTE]
@@ -101,7 +101,7 @@ const backgroundReplacementEffect = new BackgroundReplacementEffect({
101101
const backgroundReplacementSupported = await videoEffectsFeatureApi.isSupported(backgroundReplacementEffect);
102102

103103
if (backgroundReplacementSupported) {
104-
// Use the video effects feature api as before to start/stop effects
104+
// Use the video effects feature API as before to start/stop effects
105105
await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect);
106106
}
107107
```
@@ -115,7 +115,7 @@ await backgroundReplacementEffect.configure({
115115
});
116116
```
117117

118-
Switching effects can be done using the same method on the video effects feature api:
118+
Switching effects can be done using the same method on the video effects feature API:
119119
```js
120120
// Switch to background blur
121121
await videoEffectsFeatureApi.startEffects(backgroundBlurEffect);
@@ -127,7 +127,7 @@ await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect);
127127
At any time if you want to check what effects are active, you can use the `activeEffects` property.
128128
The `activeEffects` property returns an array with the names of the current active effects, and returns an empty array if there are no effects active.
129129
```js
130-
// Using the video effects feature api
130+
// Using the video effects feature API
131131
const currentActiveEffects = videoEffectsFeatureApi.activeEffects;
132132
```
133133

@@ -137,9 +137,9 @@ await videoEffectsFeatureApi.stopEffects();
137137
```
138138

139139
### Add a frosted glass background effect
140-
Frosted glass backgrounds combine the privacy of a blurred background with the customization of your selected image to produce a sophisticated effect resembling frosted glass windows. To achieve this effect, upload a transparent PNG image as your custom background. This image could be your company logo or a unique design. The frosted glass effect will blur the transparent areas of your image, while preserving the graphic as part of the background. To use a frosted glass appearance you must use version `1.1.3` or higher of the [Azure Communication Calling Effects library for JavaScript](https://www.npmjs.com/package/@azure/communication-calling-effects) package.
140+
Frosted glass backgrounds combine the privacy of a blurred background with the customization of your selected image to produce a sophisticated effect resembling frosted glass windows. To achieve this effect, upload a transparent PNG image as your custom background. This image could be your company logo or a unique design. The frosted glass effect blurs the transparent areas of your image, while preserving the graphic as part of the background. To use a frosted glass appearance, you must use version `1.1.3` or higher of the [Azure Communication Calling Effects library for JavaScript](https://www.npmjs.com/package/@azure/communication-calling-effects) package.
141141

142-
For best results when preparing the frosted PNG image, please keep in mind:
142+
For best results when preparing the frosted PNG image, keep in mind:
143143

144144
* **Resolution**: Use 1920x1080 pixels for a high-quality background
145145
* **Avoid full opacity**: Colored content such as logos looks best with a little transparency. We recommend 75% opacity

0 commit comments

Comments
 (0)