tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    Setting Resolution and Fill Pattern

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

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy