Skip to content

Commit 1347da9

Browse files
authored
updates 4
1 parent 4a1a591 commit 1347da9

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

articles/communication-services/quickstarts/voice-video-calling/optimizing-video-placement.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ When placing multiple videos on a web page, consider the user's network bandwidt
5555

5656
### Use the Web UI Library
5757

58-
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.
58+
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.
5959

6060
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.
6161

@@ -83,27 +83,27 @@ Conversely, if the optimal count decreases and is [less than the current number
8383

8484
[!INCLUDE [Public Preview Disclaimer](../../includes/public-preview-include.md)]
8585

86-
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.
86+
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.
8787

8888
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.
8989

90-
- 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).
91-
- Each client can specify which user's video they want to receive and set individual resolution sizes on their respective machines.
90+
- 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.
91+
- Each client can choose the video feed from specific users and adjust the resolution size on their individual devices.
9292
- 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.
9393
- 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.
9494
- 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.
9595
- 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.
9696

9797
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.
9898

99-
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.
99+
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.
100100

101101
## How to configure to send a 1080p stream
102102
[!INCLUDE [Public Preview Disclaimer](../../includes/public-preview-include.md)]
103103

104104
[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.
105105

106-
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 is not used and 1080p is not specified, the default video stream resolution will be 720p.
106+
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.
107107

108108
```javascript
109109
const callOptions = {
@@ -154,21 +154,21 @@ async function getSupportedResolutions() {
154154
getSupportedResolutions();
155155
```
156156

157-
* The machine sending a 1080p must have a powerful enough machine to suppor sending a 1080p.
158-
* 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 do not have a 1080p element enabled to receive the video, the call will adjust and negotiate down to a smaller resolution.
157+
* The machine sending a 1080p must have a powerful enough machine to support sending a 1080p.
158+
* 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.
159159
* All the people on the call that are sending and receiving a 1080p video stream must have the bandwidth to support a 1080p stream.
160160

161161
| **Resolution** | **Min framerate** | **Max framerate** | **Max bitrate** |
162162
|--|--|--|--|
163-
| 1080p | 30 | 30 | 4M |
164-
| 720p | 30 | 30 | 2.5M |
165-
| 540p | 30 | 30 | 2M |
166-
| 360p | 30 | 30 | 1M |
167-
| 240p | 15 | 15 | 650K |
168-
| 180p | 7.5 | 15 | 250K(350K if 15 FPS)|
163+
| 1080p | 30 | 30 | 4 M |
164+
| 720p | 30 | 30 | 2.5 M |
165+
| 540p | 30 | 30 | 2 M |
166+
| 360p | 30 | 30 | 1 M |
167+
| 240p | 15 | 15 | 650 K |
168+
| 180p | 7.5 | 15 | 250 K(350 K if 15 FPS)|
169169

170170
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.
171171

172172
## Conclusion
173173

174-
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.
174+
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.

0 commit comments

Comments
 (0)