Skip to content

Commit 4f634d7

Browse files
authored
835 improve video encoding guide (#1530)
* further-updates * android updates * updates * swift, windows, electron updates * flutter update * RN-update * unity & unreal * web updates
1 parent 02c9c6b commit 4f634d7

File tree

20 files changed

+903
-335
lines changed

20 files changed

+903
-335
lines changed

shared/video-sdk/develop/screen-sharing/project-implementation/macos.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Call `getScreenCaptureSourcesWithThumbSize` to get an object list of screens and
3434
}
3535
```
3636

37-
### Enable <Vg k="SCR_SHR" />
37+
### Enable screen capture
3838

3939
Depending on the actual application use-case, choose one of the following three <Vg k="SCR_SHR" /> methods.
4040

shared/video-sdk/enhance-call-quality/configure-video-encoding/index.mdx

Lines changed: 88 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import NotAvailable from '@docs/shared/common/not-available.mdx'
44

55
Customer satisfaction with your <Vg k="VIDEO"/> integrated <Vpl k="CLIENT" /> depends on the quality of video and audio it provides. The sharpness, smoothness, and overall quality of the video is directly linked to the frame rate, bitrate, and other video encoder settings. Choosing improper settings can result in poor video quality. Conversely, if the settings are too demanding, the available bandwidth quickly gets choked, leading to a suboptimal experience for your users.
66

7-
<PlatformWrapper platform="web">
8-
Try out the [online demo](https://webdemo-global.agora.io/index.html) to [Adjust video profile](https://webdemo-global.agora.io/example/advanced/adjustVideoProfile/index.html).
9-
</PlatformWrapper>
10-
117
<PlatformWrapper notAllowed="react-js">
128

139
This page guides you on configuring the video encoder settings to ensure optimal video quality in your <Vpd k="NAME" /> <Vpl k="CLIENT" />.
@@ -18,49 +14,34 @@ In <Vg k="VSDK"/> you can set the video dimensions, framerate, bitrate, orientat
1814

1915
<PlatformWrapper notAllowed="web">
2016

21-
### Resolution, frame rate, and bitrate
17+
#### Resolution, frame rate, and bitrate
2218

2319
* **Resolution**: Defines the video encoding resolution in pixels. The default value is `960 × 540`. Higher resolutions generally result in better video clarity. Note that this parameter does not determine the final video orientation. Refer to [Video orientation](#video-orientation) for setting the video output orientation.
2420

2521
* **Frame rate**: Represents the number of frames encoded per second (FPS). The default value is `15` FPS. A higher frame rate contributes to smoother video playback. For use-cases demanding high video smoothness, consider setting this parameter to `20` or `25`. It is advised not to exceed a frame rate of `30`.
2622

2723
* **Bitrate**: Indicates the video encoding bitrate in Kbps. The default mode is set to *Standard Bitrate*. In this mode, the <Vg k="VSDK"/> dynamically sets an appropriate bitrate based on the channel profile, resolution, and frame rate.
2824

29-
To find a suitable bitrate for a given combination of dimensions and framerate, refer to the [Video profiles table](#video-profiles-table).
25+
* **Minimum bitrate**: Sets the minimum video encoding bitrate in Kbps. The SDK automatically adjusts bitrate based on network conditions. The default value for this parameter allows the SDK to determine the minimum bitrate automatically, which is recommended for most use cases. Setting this parameter higher than the default value forces the video encoder to maintain higher quality, but may increase packet loss and affect video playback smoothness.
26+
27+
<Vpd k="SDK" /> offers a variety of resolutions and frame rates to choose from. To specify your own configuration, refer to the [Video profiles table](#video-profiles-table).
3028

3129
To achieve high video quality, it's crucial to maintain a balanced relationship between resolution, bitrate, and frame rate. Higher resolutions necessitate a higher bitrate. If the bitrate is fixed, an excessively high frame rate can reduce the resolution.
3230

3331
The configured parameter settings represent maximum values under ideal conditions. In cases where video quality cannot reach the set maximum values due to network constraints or other factors, the actual values are adjusted to match the specified maximum resolution, frame rate, or bitrate as closely as possible.
3432

35-
<Admonition type="caution" title="Note">
36-
Video encoder configuration settings may affect billing. If settings are lowered due to adaptation, billing is based on the video resolution actually subscribed to by the user. For details, see [Pricing](../overview/pricing).
33+
<Admonition type="info" >
34+
Billing is based on actual video resolution, not configured settings. For example, if network adaptation reduces your video from 1280×720 to 640×360, you are billed for the lower resolution that users actually receive.
3735
</Admonition>
3836

3937
</PlatformWrapper>
4038

4139
<PlatformWrapper platform="web">
4240
</PlatformWrapper>
4341

44-
### Recommended video settings
45-
46-
The recommended video settings vary by use-case. For example, in a one-to-one online class, the video windows of the teacher and student are both large, which calls for higher resolution, frame rate, and bitrate. However, in a one-to-many online class, the video windows are smaller. You can set lower resolution, frame rate, and bitrate to accommodate bandwidth limitations.
47-
48-
Use the following as a guide when configuring video settings for these use-cases:
49-
50-
- One-to-one video call:
51-
52-
- Resolution: 320 x 240; Frame rate: 15 fps; Bitrate: 200 Kbps.
53-
- Resolution: 640 x 360; Frame rate: 15 fps; Bitrate: 400 Kbps.
54-
55-
- One-to-many video call:
56-
57-
- Resolution: 160 x 120; Frame rate: 15 fps; Bitrate: 65 Kbps.
58-
- Resolution: 320 x 180; Frame rate: 15 fps; Bitrate: 140 Kbps.
59-
- Resolution: 320 x 240; Frame rate: 15 fps; Bitrate: 200 Kbps.
60-
6142
<PlatformWrapper notAllowed="web">
6243

63-
### Video orientation
44+
#### Video orientation
6445

6546
The way video is displayed on the playing device depends on `orientationMode` used on the encoding device, orientation of the capturing device, orientation of the playing device, and whether screen rotation is enabled on the playing device. On the capturing device, you can set the `orientationMode` to:
6647

@@ -70,21 +51,35 @@ The way video is displayed on the playing device depends on `orientationMode` us
7051

7152
* **Fixed Portrait**
7253

73-
In this mode, the output video is always in landscape mode relative to the Status Bar. If the captured video is in portrait mode, the video encoder crops it. This method is suitable for situations where the receiving end cannot process the rotation information.
74-
75-
* **Fixed Landscape**
76-
7754
In this mode, the output video is always in portrait mode relative to the Status Bar. If the captured video is in landscape mode, the video encoder crops it. This method is suitable for situations where the receiving end cannot process the rotation information.
55+
56+
* **Fixed Landscape**
7857

79-
The following images illustrate different combinations.
58+
In this mode, the output video is always in landscape mode relative to the Status Bar. If the captured video is in portrait mode, the video encoder crops it. This method is suitable for situations where the receiving end cannot process the rotation information, such as web browsers or legacy applications.
8059

8160
<PlatformWrapper platform="ios, macos">
8261
<Admonition type="caution" title="Note">
8362
On the macOS platform, the Status Bar is always positioned directly above the vertical ground direction, so there is no UI (Screen rotation) lock. The UI lock below applies only to the iOS platform.
8463
</Admonition>
8564
</PlatformWrapper>
8665

87-
#### Orientation mode: _Adaptive_
66+
The following table shows how video orientation behaves under different mode and device configurations:
67+
68+
| Orientation mode | Screen rotation | Capturing device | Recording server | Receiving end display |
69+
|-----------------|-----------------|------------------|------------------|----------------------|
70+
| **Adaptive** | Disabled | Landscape | Landscape | Landscape. Does not change with device rotation |
71+
| **Adaptive** | Disabled | Portrait | Portrait | Portrait. Does not change with device rotation |
72+
| **Adaptive** | Enabled | Landscape | Landscape | Landscape. Rotates with device orientation |
73+
| **Adaptive** | Enabled | Portrait | Portrait | Portrait. Rotates with device orientation |
74+
| **Fixed landscape** | | Landscape | Landscape | Always landscape |
75+
| **Fixed landscape** | | Portrait | Landscape (cropped) | Always landscape (cropped) |
76+
| **Fixed portrait** | | Portrait | Portrait | Always portrait |
77+
| **Fixed portrait** | | Landscape | Portrait (cropped) | Always portrait (cropped) |
78+
79+
The following images illustrate the orientation behavior:
80+
81+
<details>
82+
<summary>Adaptive orientation mode</summary>
8883

8984
* Screen rotation: _Disabled_
9085
* Capturing device orientation: _Landscape_
@@ -102,45 +97,58 @@ On the macOS platform, the Status Bar is always positioned directly above the ve
10297
* Capturing device orientation: _Portrait_
10398
![orientation_adaptive_unlocked_portrait](/images/video-sdk/orientation_adaptive_unlocked_portrait.png)
10499

105-
#### Orientation mode: _Landscape_
100+
</details>
101+
102+
<details>
103+
<summary>Landscape orientation mode</summary>
106104

107105
* Capturing device orientation: _Landscape_
108106
![orientation_landscape_landscape](/images/video-sdk/orientation_landscape_landscape.png)
109107

110108
* Capturing device orientation: _Portrait_
111109
![orientation_landscape_portrait](/images/video-sdk/orientation_landscape_portrait.png)
112110

113-
#### Orientation mode: _Portrait_
111+
</details>
112+
113+
<details>
114+
<summary>Portrait orientation mode</summary>
114115

115116
* Capturing device orientation: _Portrait_
116117
![orientation_portrait_portrait](/images/video-sdk/orientation_portrait_portrait.png)
117118

118119
* Capturing device orientation: _Landscape_
119120
![orientation_portrait_landscape](/images/video-sdk/orientation_portrait_landscape.png)
120121

121-
### Degradation preference
122+
</details>
122123

123-
To enhance the video experience for users in low-bandwidth conditions, the <Vg k="VSDK"/> offers the `degradationPreference` parameter. This parameter allows you to set your preference for video encoding downgrade when bandwidth is limited.
124+
#### Degradation preference
124125

125-
### Mirror mode
126-
127-
By default, Video SDK does not mirror the video during encoding. You use the `mirrorMode` parameter to decide whether to mirror the video that remote users see.
126+
To enhance the video experience for users in low-bandwidth conditions, the <Vg k="VSDK"/> offers the `degradationPreference` parameter. This parameter determines how video adapts when bandwidth is limited: prioritize frame rate for smooth playback, prioritize resolution for visual clarity, balance both qualities, or let the SDK decide automatically based on the scenario.
128127

129-
### Minimum encoding frame rate
128+
#### Mirror mode
130129

131-
For specific requirements related to video quality or transmission frame rate, adjust the minimum encoding frame rate parameter `minBitrate`. It sets the minimum video encoding bitrate in Kbps. The <Vg k ="VSDK"/> performs bitrate adaptation based on network conditions. Increasing this parameter beyond the default value compels the video encoder to produce high-quality images, but it may lead to increased packet loss, affecting video playback smoothness.
132-
133-
<Admonition type="caution" title="Caution">The default value of `minBitrate` meets the requirements of most real-time use-cases. For general use-cases, <Vg k= "COMPANY"/> suggests not changing the default value.</Admonition>
130+
By default, Video SDK does not mirror the video during encoding. You use the `mirrorMode` parameter to decide whether to mirror the video that remote users see.
134131

135132
</PlatformWrapper>
136133

137134
## Prerequisites
138135
Ensure that you have implemented the [SDK quickstart](../../video-calling/get-started/get-started-sdk) in your project.
139136

140-
## Implement video encoder configuration
137+
## Implementation
141138

142139
<ProjectImplement/>
143140

141+
### Troubleshooting
142+
143+
The following are some common issues and their solutions:
144+
145+
| Issue | Possible solution |
146+
|--------|--------------------|
147+
| **Blurry video** | Increase resolution or bitrate |
148+
| **Choppy/laggy playback** | Reduce resolution, increase minimum bitrate, or use maintain framerate degradation |
149+
| **High bandwidth usage** | Lower resolution or frame rate |
150+
| **Video orientation incorrect** | Use fixed portrait or fixed landscape orientation mode |
151+
144152
## Reference
145153

146154
This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.
@@ -152,42 +160,42 @@ This section contains content that completes the information on this page, or po
152160

153161
| Resolution (width × height) | Frame rate (fps) |
154162
|------------------|------------------|
155-
| 160 × 120 | 15 |
156-
| 120 × 120 | 15 |
157-
| 320 × 180 | 15 |
158-
| 180 × 180 | 15 |
159-
| 240 × 180 | 15 |
160-
| 320 × 240 | 15 |
161-
| 240 × 240 | 15 |
162-
| 424 × 240 | 15 |
163-
| 640 × 360 | 15 |
164-
| 360 × 360 | 15 |
165-
| 640 × 360 | 30 |
166-
| 360 × 360 | 30 |
167-
| 480 × 360 | 15 |
168-
| 480 × 360 | 30 |
169-
| 640 × 480 | 15 |
170-
| 480 × 480 | 15 |
171-
| 640 × 480 | 30 |
172-
| 480 × 480 | 30 |
173-
| 848 × 480 | 15 |
174-
| 848 × 480 | 30 |
175-
| 640 × 480 | 10 |
176-
| 960 × 540 | 15 |
177-
| 960 × 540 | 30 |
178-
| 1280 × 720 | 15 |
179-
| 1280 × 720 | 30 |
180-
| 960 × 720 | 15 |
181-
| 960 × 720 | 30 |
182-
| 1920 × 1080 | 15 |
183-
| 1920 × 1080 | 30 |
184-
| 1920 × 1080 | 60 |
185-
| 2560 × 1440 | 30 |
186-
| 2560 × 1440 | 60 |
187-
| 3840 × 2160 | 30 |
188-
| 3840 × 2160 | 60 |
189-
190-
<Admonition type="caution" title="Note">
163+
| 160 × 120 | 15 |
164+
| 120 × 120 | 15 |
165+
| 320 × 180 | 15 |
166+
| 180 × 180 | 15 |
167+
| 240 × 180 | 15 |
168+
| 320 × 240 | 15 |
169+
| 240 × 240 | 15 |
170+
| 424 × 240 | 15 |
171+
| 640 × 360 | 15 |
172+
| 360 × 360 | 15 |
173+
| 640 × 360 | 30 |
174+
| 360 × 360 | 30 |
175+
| 480 × 360 | 15 |
176+
| 480 × 360 | 30 |
177+
| 640 × 480 | 15 |
178+
| 480 × 480 | 15 |
179+
| 640 × 480 | 30 |
180+
| 480 × 480 | 30 |
181+
| 848 × 480 | 15 |
182+
| 848 × 480 | 30 |
183+
| 640 × 480 | 10 |
184+
| 960 × 540 | 15 |
185+
| 960 × 540 | 30 |
186+
| 1280 × 720 | 15 |
187+
| 1280 × 720 | 30 |
188+
| 960 × 720 | 15 |
189+
| 960 × 720 | 30 |
190+
| 1920 × 1080 | 15 |
191+
| 1920 × 1080 | 30 |
192+
| 1920 × 1080 | 60 |
193+
| 2560 × 1440 | 30 |
194+
| 2560 × 1440 | 60 |
195+
| 3840 × 2160 | 30 |
196+
| 3840 × 2160 | 60 |
197+
198+
<Admonition type="info" title="Note">
191199
After you set the resolution and frame rate, the SDK automatically sets the corresponding bitrate. Agora does not recommend that you modify the bitrate manually.
192200
</Admonition>
193201
</PlatformWrapper>

0 commit comments

Comments
 (0)