Merge pull request #294706 from sloanster/patch-31

Update video-effects-javascript.md

Author: prmerger-automator[bot]

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

@@ -5,17 +5,17 @@ description: Learn how to add video effects in your video calls using Azure Comm
 author: sloanster
 
 ms.author: micahvivion
-ms.date: 01/20/2023
+ms.date: 02/14/2025
 ms.topic: quickstart
 ms.service: azure-communication-services
 ms.subservice: calling
 ms.custom: mode-other
 ---
 
-You can use the Video effects feature to add effects to your video in video calls. This feature enables developers to build background visual effects and background video replacement into the calling experience. Background blur provides users with the mechanism to remove distractions behind a participant so that participants can communicate without disruptive activity or confidential information in the background. This is especially useful the context of telehealth, where a provider or patient might want to obscure their surroundings to protect sensitive information or personally identifiable information. Background blur can be applied across all virtual appointment scenarios, including telebanking and virtual hearings, to protect user privacy. In addition to enhanced confidentiality, background blur allows for more creativity of expression, allowing users to upload custom backgrounds to host a more fun, personalized calling experience.
+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 helpful 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.
 
 > [!NOTE]
-> 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). 
+> 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). 
 
 ## Using video effects
 ### Install the package
@@ -31,20 +31,20 @@ Use the `npm install` command to install the Azure Communication Services Effect
 ```console
 npm install @azure/communication-calling-effects --save
 ```
-See [here](https://www.npmjs.com/package/@azure/communication-calling-effects) for more details on the calling communication effects npm package page.
+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.
 
 > [!NOTE]
 > Currently there are two available video effects:
 > - Background blur
 > - Background replacement with an image (the aspect ratio should be 16:9 to be compatible)
 
-To use video effects with the Azure Communication Calling SDK, once you've created a `LocalVideoStream`, you need to get the `VideoEffects` feature API of the `LocalVideoStream` to start/stop video effects:
+To use video effects with the Azure Communication Calling SDK, once you create a `LocalVideoStream`, you need to get the `VideoEffects` feature API of the `LocalVideoStream` to start/stop video effects:
 ```js
 import * as AzureCommunicationCallingSDK from '@azure/communication-calling'; 
 
 import { BackgroundBlurEffect, BackgroundReplacementEffect } from '@azure/communication-calling-effects'; 
 
-// Get the video effects feature api on the LocalVideoStream 
+// 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.feature(AzureCommunicationCallingSDK.Features.VideoEffects); 
 
@@ -72,15 +72,16 @@ const backgroundBlurEffect = new BackgroundBlurEffect();
 const backgroundBlurSupported = await videoEffectsFeatureApi.isSupported(backgroundBlurEffect);
 
 if (backgroundBlurSupported) { 
-    // Use the video effects feature api we created to start effects
+    // Use the video effects feature API we created to start effects
     await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 
 }
 ```
 
+
 ### Background replacement with an image
 You 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.
+> The `startEffects` method fails if the URL isn't of an image or is unreachable/unreadable.
 >
 
 > [!NOTE]
@@ -100,7 +101,7 @@ const backgroundReplacementEffect = new BackgroundReplacementEffect({
 const backgroundReplacementSupported = await videoEffectsFeatureApi.isSupported(backgroundReplacementEffect);
 
 if (backgroundReplacementSupported) { 
-    // Use the video effects feature api as before to start/stop effects 
+    // Use the video effects feature API as before to start/stop effects 
     await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect); 
 }
 ```
@@ -114,7 +115,7 @@ await backgroundReplacementEffect.configure({
 });
 ```
 
-Switching effects can be done using the same method on the video effects feature api:
+Switching effects can be done using the same method on the video effects feature API:
 ```js
 // Switch to background blur 
 await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 
@@ -126,11 +127,21 @@ await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect);
 At any time if you want to check what effects are active, you can use the `activeEffects` property.
 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.
 ```js
-// Using the video effects feature api
+// Using the video effects feature API
 const currentActiveEffects = videoEffectsFeatureApi.activeEffects;
 ```
 
 To stop effects:
 ```js
 await videoEffectsFeatureApi.stopEffects();
 ```
+
+### Add a frosted glass background effect
+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.
+
+For best results when preparing the frosted PNG image, keep in mind:
+
+* **Resolution**: Use 1920x1080 pixels for a high-quality background
+* **Avoid full opacity**: Colored content such as logos looks best with a little transparency. We recommend 75% opacity
+* **Defocus the image**: A Gaussian blur of radius 2 works well to simulate a bit of depth of field in the scene.
+* **Stencil mid-gray foreground**: For grayscale PNG with transparency, we recommend having the full image in mid-gray (value 128) so that the transparency pattern is visible on both light and dark backgrounds.