Skip to content

Commit 948cdb9

Browse files
authored
update 7
1 parent 94d19e6 commit 948cdb9

File tree

1 file changed

+13
-21
lines changed

1 file changed

+13
-21
lines changed

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

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ ms.custom: mode-other, devx-track-js
1616

1717
A crucial element to consider when building web pages is how to best integrate video into the page layout. The placement and number of videos can impact page performance, user quality experience, and overall aesthetic. This article includes guidelines to help developers determine how many videos to place on a web page and the best video resolution size to optimize the end user experience.
1818

19-
## Understand screen resolution
19+
## Understand video resolution
2020

2121
Developers need to know important details about video resolution. Resolution refers to the number of pixels displayed on a video output, typically measured in `width x height` format. Higher resolution means more pixels, leading to sharper and clearer images. Incoming video resolutions available in Azure Communication Services video calling include:
2222

@@ -27,21 +27,23 @@ Developers need to know important details about video resolution. Resolution ref
2727
- 240p: 426 x 240 pixels
2828
- 240p: 320 x 240 pixels
2929

30-
## Factors that influence video placement
30+
## Factors that influence the video quality experience
3131

3232
Several factors influence how many videos you can effectively place on a web page. These factors include resolution, device type, bandwidth, and user experience considerations.
3333

3434
### Local device abilities
3535

36-
The type of device used to display the web page plays a significant role. For example, desktops and laptops with larger screens can accommodate more videos than mobile devices. We recommend using responsive design techniques to adjust the number and sizes of videos based on screen dimensions.
36+
The type of device used to display the web page plays a significant role. For example, desktops and laptops with larger screens can accommodate more videos than mobile devices. We recommend using [responsive design techniques](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design) to adjust the number and sizes of videos based on screen dimensions.
3737

3838
In addition, the local machine must process, encode, and display these videos properly. The size of the local monitor screen and browser abilities also determine the number of active videos that can be displayed simultaneously on a web page.
3939

4040
Consider all these factors when developing the concept of happy pages to embed on a web page.
4141

42-
### Resolution and video size
42+
### Resolution and video screen size
4343

44-
The display resolution of the end user device directly affects the number of videos you can display per page. The higher the resolution, the more videos you can display.
44+
The display resolution of the end user device directly affects the number of videos you can display per page. The higher the resolution of the monitor and screen, the more videos you can display.
45+
46+
It is important to remember that the more videos you place on a page, the more internet bandwidth each of those videos will consume. Additionally, the local machine must have sufficient performance capabilities to encode and display the video properly.
4547

4648
We recommend balancing the video quality and performance. Don't fill every pixel on the screen with video output, which can overwhelm the user. Consider the incoming and outgoing bandwidth as you add more videos to a page.
4749

@@ -51,11 +53,8 @@ To improve the end user experience, we need to understand how internet speeds ar
5153

5254
When placing multiple videos on a web page, consider the user's network bandwidth. Higher resolution videos require more data to stream. The more overall videos placed on a page, the more bandwidth each one consumes. If someone connects to the internet via a connection with lower overall bandwidth throughput, their ability to stream higher resolution videos or multiple videos on a page are limited. Conversely, if someone has higher internet bandwidth for both inbound and outbound traffic, they have a greater ability to deliver and consume high-resolution videos and accommodate more videos on the page.
5355

54-
### User experience
55-
56-
Ultimately, the user experience determines how many videos you include on a web page. Too many videos can lead to cluttering and distract from the primary content.
5756

58-
## Best practices for video placement
57+
## Best practices for optimal number of videos on a page
5958

6059
### Prioritize content
6160

@@ -67,7 +66,7 @@ Lazy loading delays the loading of videos until they're needed or in the viewpor
6766

6867
### Use optimal video count API
6968

70-
The Azure Communication Services WebJS SDK introduced the [Optimal Video Count (OVC)](../../how-tos/calling-sdk/manage-video.md?pivots=platform-web) feature in version 1.15.1. OVC informs applications how many incoming videos from different participants can be optimally rendered during a group call. The `optimalVideoCount` property adjusts dynamically based on network and hardware capabilities. Applications should update the number of videos rendered according to the output from OVC. The value from optimal video count (OVC) is updated every 10 seconds.
69+
The Azure Communication Services WebJS SDK introduced the [Optimal Video Count (OVC)](../../how-tos/calling-sdk/manage-video.md?pivots=platform-web) feature in version 1.15.1. OVC informs applications how many incoming videos from different participants can be optimally rendered during a group call. The `optimalVideoCount` property adjusts dynamically based on network and hardware capabilities. Applications should update the number of videos rendered according to the output from OVC. Developers should ensure that their application subscribes to changes in the `Optimal Video Count` in group calls. The optimal video count returns an integer defining the ideal number of videos that can be displayed on a web page. The value from optimal video count (OVC) is updated every 10 seconds.
7170

7271
You need to reference the feature `OptimalVideoCount` via the feature method of the Call object. You can then set a listener via the on method of the `OptimalVideoCountCallFeature` to be notified when the `optimalVideoCount` changes. To unsubscribe from the changes, you can call the off method. The current maximum number of incoming videos that can be rendered on a web page is **16**. To properly support 16 incoming videos, the computer should have a minimum of 16-GB RAM and a 4-core or greater CPU that is no older than three years old.
7372

@@ -78,27 +77,20 @@ optimalVideoCountFeature.on('optimalVideoCountChanged', () =\> {
7877
})
7978
```
8079

81-
Developers should ensure that their application subscribes to changes in the `Optimal Video Count` in group calls. The optimal video count returns an integer defining the ideal number of videos that can be displayed on a web page.
82-
8380
When there's a change in the optimal video count value, if the result indicates increased capacity on the local computer for more incoming videos, you can create a new incoming video using the [`createView`](/javascript/api/azure-communication-services/@azure/communication-calling/videostreamrenderer?view=azure-communication-services-js&preserve-view=true#@azure-communication-calling-videostreamrenderer-createview) method to display more incoming video streams to be displayed on the page.
8481

8582
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.
8683

87-
## Determine the maximum video size for a page
84+
## Determine the maximum resolution sizes for a page.
8885

89-
In the current version 1.33 of the WebJS SDK:
86+
In the version 1.33 and later of the WebJS SDK:
9087

91-
- You can place one 1080p incoming video with the rest smaller than 1080p.
88+
- You can place one 1080p incoming video with the rest smaller than 720P.
9289
- You can place two 720p incoming videos with the rest smaller than 720p.
9390

94-
| Version | 1080p Videos | 720p Videos |
95-
|------------------|--------------------------------------|-------------------------------------|
96-
| 1.32 and earlier | 1 (with the rest smaller than 1080p) | 1 (with the rest smaller than 720p) |
97-
| 1.33 | 1 (with the rest smaller than 1080p) | 2 (with the rest smaller than 720p) |
98-
9991
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.
10092

101-
### Video size considerations
93+
## Considerations for the optimal number of concurrent video streams
10294

10395
- 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).
10496
- Each client can specify which user's video they want to receive and set individual resolution sizes on their respective machines.

0 commit comments

Comments
 (0)