tencent cloud

Feedback

Setting Resolution and Fill Pattern

Last updated: 2024-05-08 11:37:25
    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.
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support