tencent cloud

PrevNext

フィードバック

キーワードで検索してください

Recent Pages

ドキュメント
Chat
    ドキュメント

    Setting Resolution and Fill Pattern

    最終更新日: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.
      お問い合わせ

      カスタマーサービスをご提供できるため、ぜひお気軽にお問い合わせくださいませ。

      お問い合わせ
      テクニカルサポート

      さらにサポートが必要な場合は、サポートチケットを送信して弊社サポートチームにお問い合わせください。24時間365日のサポートをご提供します。

      チケットを送信
      電話サポート（24 時間365日対応）
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      個人情報保護方針利用規約クッキーポリシー