Merge pull request #297850 from sloanster/patch-35

JillGrant615 · web-flow · commit 27ee0a7a0559 · 2025-04-08T17:33:00.000-06:00
Update video-effects-javascript.md
diff --git a/articles/communication-services/quickstarts/voice-video-calling/includes/video-effects/video-effects-javascript.md b/articles/communication-services/quickstarts/voice-video-calling/includes/video-effects/video-effects-javascript.md
@@ -5,33 +5,33 @@ description: Learn how to add video effects in your video calls using Azure Comm
 author: sloanster
 
 ms.author: micahvivion
-ms.date: 02/14/2025
+ms.date: 04/08/2025
 ms.topic: quickstart
 ms.service: azure-communication-services
 ms.subservice: calling
 ms.custom: mode-other
 ---
 
-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.
+The Video effects feature lets users add visual effects to video calls, including background blur and video replacement. This helps eliminate distractions and protect sensitive information, especially in contexts like telehealth, telebanking, and virtual hearings. Background blur enhances privacy and allows for custom backgrounds, making calls more engaging and personalized.
 
 > [!NOTE]
-> 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). 
+> The [calling effect library](https://www.npmjs.com/package/@azure/communication-calling-effects)is designed to work exclusively with the [Azure Communication Calling client library for WebJS](https://www.npmjs.com/package/@azure/communication-calling) and cannot be used independently. 
 
 ## Using video effects
 ### Install the package
 > [!IMPORTANT]
 > 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.
 
 
-> [!NOTE]
-> Background blur and background replacement for **Android Chrome and Android Edge mobile browser** is available in public preview starting in build [1.29.1](https://github.com/Azure/Communication/blob/master/releasenotes/acs-javascript-calling-library-release-notes.md#1291-beta1-2024-08-26) and later beta WebJS SDK versions.
+> [!IMPORTANT]
+> Background blur and background replacement for **Android Chrome and Android Edge mobile browser** is available in General Availability starting in build [1.34.1](https://www.npmjs.com/package/@azure/communication-calling/v/1.34.1) and later WebJS SDK versions. You must use version [1.1.4](https://www.npmjs.com/package/@azure/communication-calling-effects) or higher of the calling effects package to implement background effects on Android mobile browsers.
 
 Use the `npm install` command to install the Azure Communication Services Effects SDK for JavaScript.
 
 ```console
 npm install @azure/communication-calling-effects --save
 ```
-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.
+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:
@@ -143,5 +143,4 @@ 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.
+* **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.
diff --git a/articles/communication-services/quickstarts/voice-video-calling/optimizing-video-placement.md b/articles/communication-services/quickstarts/voice-video-calling/optimizing-video-placement.md
@@ -5,7 +5,7 @@ titleSuffix: An Azure Communication Services quickstart
 description: This document describes how to place video on a web page based on resolution size to optimize video placement and enhance overall page performance.
 author: sloanster
 services: azure-communication-services
-ms.date: 03/07/2025
+ms.date: 04/08/2025
 ms.topic: quickstart
 ms.service: azure-communication-services
 ms.subservice: calling
@@ -55,7 +55,7 @@ When placing multiple videos on a web page, consider the user's network bandwidt
 
 ### Use the Web UI Library
 
-The Azure Communication Services [Web UI Library](../../concepts/ui-library/ui-library-overview.md) is a powerful tool for developers looking to create seamless and visually appealing web applications. The Web UI Library offers a comprehensive set of pre-built UI components that are easy to integrate and highly customizable. This solution enables developers to focus on building functionality rather than designing from scratch.
+The Azure Communication Services [Web UI Library](../../concepts/ui-library/ui-library-overview.md) is a powerful tool for developers looking to create seamless and visually appealing web applications. The Web UI Library offers a comprehensive set of prebuilt UI components that are easy to integrate and highly customizable. This solution enables developers to focus on building functionality rather than designing from scratch.
 
 The Web UI Library ensures consistent design standards across different projects and platforms, enhancing user experience and reducing development time. Its extensive documentation and active community support make it an excellent choice for both beginners and experienced developers. By applying the Web UI Library, you can streamline your workflow, create professional-quality interfaces, and deliver engaging web applications more efficiently. Also, using the Web UI Library removes the guesswork of determining how many videos you can optimally subscribe to at one time.
 
@@ -76,28 +76,99 @@ When there's a change in the optimal video count value, if the result indicates
 
 Conversely, if the optimal count decreases and is [less than the current number of videos on the page](../../resources/troubleshooting/voice-video-calling/video-issues/reaching-max-number-of-active-video-subscriptions.md), consider disposing of a video using the dispose method and updating the application layout accordingly.
 
-### Things to consider when adding a 1080P or 720P video to a page.
+### Things to consider when adding a 1080p or 720p video to a page.
 
-- You can place one 1080p incoming video with the rest smaller than 720P.
+- You can place one 1080p incoming video with the rest smaller than 720p.
 - You can place two 720p incoming videos with the rest smaller than 720p.
 
 [!INCLUDE [Public Preview Disclaimer](../../includes/public-preview-include.md)]
 
-In [version 1.33](https://github.com/Azure/Communication/blob/master/releasenotes/acs-javascript-calling-library-release-notes.md#1332-beta1-2025-01-30) and later of the public preview calling SDK support putting 2 720P videos simultaneously on a web page.
+In [version 1.33](https://github.com/Azure/Communication/blob/master/releasenotes/acs-javascript-calling-library-release-notes.md#1332-beta1-2025-01-30) and later of the public preview calling SDK supports placing 2 720p videos simultaneously on a web page.
 
 For instance, in a group call where seven participants have their video cameras on, on each client page you can select two participants' videos are displayed at higher resolutions. These two participants set to show their video at 720p by setting their views on the web page to be 720 pixels in height by 1280 pixels in width (or greater). The remaining five participant videos should be set to a lower resolution, such as 360p or lower.
 
-- To ensure that the total number of rendered videos remains below the OVC value threshold, review and adhere to the [Optimal Video Count (OVC)](../../how-tos/calling-sdk/manage-video.md?pivots=platform-web).
-- Each client can specify which user's video they want to receive and set individual resolution sizes on their respective machines.
+- Please ensure that the total number of rendered videos does not exceed the OVC [Optimal Video Count (OVC)](../../how-tos/calling-sdk/manage-video.md?pivots=platform-web) value.
+- Each client can choose the video feed from specific users and adjust the resolution size on their individual devices.
 - Each participant's ability to send a specific video resolution can vary. Some computers are equipped with higher quality cameras, enabling them to transmit a 1080p video. Conversely, some mobile browsers have lower video transmission capabilities, such as only 540p. If you embedded the video resolution to be 1080p or 720p in a page, the incoming video might not match that resolution. In this case, the system upscales the video stream to fill the video renderer size.
 - Currently, a maximum of two 720p video streams can be rendered on a web page. If more than two 720p streams are enabled, all 720p video renditions are streamed at 540p.
 - The maximum number of incoming remote streams that can be subscribed to is 16 video streams plus 1 screen sharing on desktop browsers, and 4 video streams plus 1 screen sharing on web mobile browsers.
 - Azure Communication Services video [Simulcast](../../concepts/voice-video-calling/simulcast.md) ability enhances video streaming by enabling a single video delivered by an end client at multiple resolutions and bitrates simultaneously.
 
    This function enables viewers with varying network conditions to select which video rendition to select to receive for the best possible video quality without buffering or interruptions. By optimizing bandwidth usage, simulcast sends higher resolution streams only to users who can support them. This behavior minimizes unnecessary data transmission. Simulcast improves the overall user experience by providing stable and consistent video quality and enables adaptive streaming.
 
-   Simulcast isn't supported on all browser devices. Currently, simulcast is unavailable when sending videos on mobile browsers or macOS Safari. If a participant attempts to render 720p video from a user on iOS Safari, Android Chrome, or macOS Safari and another participant on the call tries to render the same video at a smaller resolution, both receive the smaller resolution. This change happens because the devices prioritize smaller resolutions when simulcast send isn't supported.
+   Simulcast isn't supported on all browsers, specifically mobile browsers and macOS Safari. If a participant using iOS Safari, Android Chrome, or macOS Safari renders a 720p video and another participant tries to render the same video at a lower resolution, both will receive the lower resolution. This happens because these devices prioritize smaller resolutions when simulcast sending is unsupported.
+
+## How to configure to send a 1080p stream
+[!INCLUDE [Public Preview Disclaimer](../../includes/public-preview-include.md)]
+
+[Version 1.35.1](https://www.npmjs.com/package/@azure/communication-calling/v/1.35.1-beta.1) and higher of the public preview calling SDK supports sending a 1080p video.
+
+When using the WebJS SDK to send video at a 1080p resolution, you must use the [Video Constraints API](../voice-video-calling/get-started-video-constraints.md?pivots=platform-web) and specify that you want to use 1080p. If the Video Constraints API isn't used and 1080p isn't specified, the default video stream resolution is 720p.
+
+```javascript
+    const callOptions = {
+        videoOptions: {
+            localVideoStreams: [...],
+            constraints: {
+                send: {
+                    height: {
+                        max: 1080
+                    }
+                }
+            }
+        },
+        audioOptions: {
+            muted: false
+        }
+    };
+    // make a call
+    this.callAgent.startCall(identitiesToCall, callOptions);
+```
+
+### Items to note when sending a 1080p video stream
+* The camera in use should be capable of sending a 1080p video. To check what resolutions your camera supports, you can use the following JavaScript example to determine the available resolutions.
+
+```javascript
+async function getSupportedResolutions() {
+  const constraints = {
+    video: {
+      width: { ideal: 4096 }, // Try to get the maximum width
+      height: { ideal: 2160 } // Try to get the maximum height
+    }
+  };
+ 
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+    const videoTrack = stream.getVideoTracks()[0];
+    const settings = videoTrack.getSettings();
+    
+    console.log(`Supported resolution: ${settings.width}x${settings.height}`);
+    
+    // Stop the video track to release the camera
+    videoTrack.stop();
+  } catch (error) {
+    console.error('Error accessing media devices.', error);
+  }
+}
+ 
+getSupportedResolutions();
+```
+
+* The machine sending a 1080p must have a powerful enough machine to support sending a 1080p. 
+* The client that is on the  receiver side (people accepting of a 1080p video) must have a video render HTML5 element capable of 1080p to accept 1080p. If any participants on the call don't have a 1080p element enabled to receive the video, the call will adjust and negotiate down to a smaller resolution.
+* All the people on the call that are sending and receiving a 1080p video stream must have the bandwidth to support a 1080p stream.
+
+| **Resolution** | **Min framerate** | **Max framerate** |  **Max bitrate**  |
+|--|--|--|--|
+| 1080p | 30 | 30 | 4 M |
+| 720p | 30 | 30 | 2.5 M |
+| 540p | 30 | 30 | 2 M |
+| 360p | 30 | 30 | 1 M |
+| 240p | 15 | 15 | 650 K |
+| 180p | 7.5 | 15 | 250 K(350 K if 15 FPS)|
+
+You can use the media quality statistics API within the WebJS SDK to determine the real time video send and receive resolution. See [here](../../concepts/voice-video-calling/media-quality-sdk.md?pivots=platform-web) for more details.
 
 ## Conclusion
 
-To determine how many videos to place on a web page, you need to carefully consider resolution, device type, bandwidth, and user experience. Follow these guidelines and best practices to create web apps that not only look appealing but also function seamlessly, providing an optimal viewing experience for users across various devices and connection speeds.
+To determine how many videos to place on a web page, you need to carefully consider resolution, device type, bandwidth, and user experience. Follow these guidelines and best practices to create web apps that not only look appealing but also function seamlessly, providing an optimal viewing experience for users across various devices and connection speeds.
