이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
Docs Overview/
Setting Resolution and Fill Pattern/

Setting Resolution and Fill Pattern

This document describes how to set resolution and fill mode.

Setting Resolution and Fill Mode

The TUICallKit component offers several feature toggles, which can be enabled or disabled as needed. For details, see TUICallKit Property Overview.
videoDisplayMode: Display mode.
videoResolution: Call resolution.
React
Vue
Import { VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-react";

<TUICallKit
    videoDisplayMode={VideoDisplayMode.CONTAIN}
    videoResolution={VideoResolution.RESOLUTION_1080P} />
Import { VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";

<TUICallKit
    :videoDisplayMode="VideoDisplayMode.CONTAIN"
    :videoResolution="VideoResolution.RESOLUTION_1080P" />

videoDisplayMode

The display mode videoDisplayMode attribute has three values:
VideoDisplayMode.CONTAIN
VideoDisplayMode.COVER
VideoDisplayMode.FILL. The default value is VideoDisplayMode.COVER.
Attribute
Value
Description
videoDisplayMode
VideoDisplayMode.CONTAIN
Prioritize displaying the entire video content.
Scale the video dimensions proportionally until one side of the video window aligns with the viewport frame.
If the video dimensions do not match the display viewport size, under the precondition of maintaining aspect ratio, scale the video to fill the viewport. A ring of black bars will appear around the video after scaling.
VideoDisplayMode.COVER
Prioritize filling the viewport.
Scale the video dimensions proportionally until the entire viewport is filled by the video.
If the video's aspect ratio differs from that of the display window, the video stream will fill the viewport by either cropping the periphery or stretching the image according to the viewport's ratio.
VideoDisplayMode.FILL
Ensure the viewport is filled while displaying all video content, but the aspect ratio of the video dimensions is not guaranteed to remain unchanged.
The video width and height will be stretched to match the viewport dimensions.

videoResolution

Resolution videoResolution has three values:
VideoResolution.RESOLUTION_480P
VideoResolution.RESOLUTION_720P
VideoResolution.RESOLUTION_1080P. The default value is VideoResolution.RESOLUTION_480P.
Resolution Description:
Video Profile
Resolution (W × H)
Frame Rate (fps)
Bitrate (Kbps)
480p
640 × 480
15
900
720p
1280 × 720
15
1,500
1080p
1920 × 1080
15
2,000
FAQs:
iOS 13 & 14 do not support encoding videos higher than 720P. It is recommended to limit the highest capture to 720P on these two system versions. See Known issue case 12 with iOS Safari.
Firefox does not support custom video frame rates (30fps by default).
Due to factors such as system performance consumption, camera capture capability, and browser limitations, the actual values of video resolution, frame rate, and bitrate might not fully match the set values. In such cases, the browser will automatically adjust the profile to match the set values as closely as possible.