Call
  • Web
    • Overview
      • Product Introduction
      • Activate the Service
      • 가격
        • 무료시간
        • 오디오/비디오 통화 Call 월정액 패키지
        • 구독 패키지 기간 과금 설명
    • Get Started
      • Run Sample Code
      • Integration (React)
      • Integration (Vue3)
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Configuring Nickname and Avatar
      • GroupCall
      • 플로팅 윈도우
      • 사용자 정의 벨소리
      • 해상도 및 채우기 모드 설정
      • 통화 상태 모니터링
    • Advanced Features
      • 가상 배경
      • AI 노이즈 캔슬링
      • 클라우드 녹화
    • 인터페이스 문서
      • UIKit APIs
        • API Overview
        • TUICallKit
      • Engine APIs
        • TUICallEngine
        • TUICallEvent
    • 서버 API
      • 통화 상태 콜백
        • 통화 상태 콜백
        • 통화 이벤트 콜백
        • 콜백 구성
          • 콜백 구성 인터페이스 목록
          • 콜백 구성 생성
          • 콜백 구성 조회
          • 콜백 구성 업데이트
          • 콜백 구성 삭제
      • REST 인터페이스
        • REST 인터페이스 소개
        • callId를 통한 기록 획득
        • 조건에 따른 기록 획득
    • FAQs
      • All Platfroms
      • Web
      • ErrorCode
      • 배포 설명
  • Android
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo 실행
      • 통합
      • Secure authentication with userSig
    • Basic Features
      • UI 맞춤화
      • 오프라인 통화 푸시
      • Configuring Nicknames and Avatars
      • 그룹 통화
      • 플로팅 윈도우
      • 사용자 정의 벨소리
      • 통화 상태 모니터링
    • 더 많은 기능
      • 가상 배경
      • AI 노이즈 캔슬링
      • 클라우드 녹화
    • 인터페이스 문서
      • UIKit APIs
        • 인터페이스 개요
        • TUICallKit
        • TUICallObserver
        • 유형 정의
      • Engine APIs
        • TUICallEngine
    • 서버 API
      • 통화 상태 콜백
        • 통화 상태 콜백
        • 통화 이벤트 콜백
        • 콜백 구성
          • 콜백 구성 인터페이스 목록
          • 콜백 구성 생성
          • 콜백 구성 조회
          • 콜백 구성 업데이트
          • 콜백 구성 삭제
      • REST 인터페이스
        • REST 인터페이스 소개
        • callId를 통한 기록 획득
        • 조건에 따른 기록 획득
    • FAQs
      • All Platforms
      • Android
      • ErrorCode
      • 배포 설명
  • iOS
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo 실행
      • 통합
      • Secure authentication with userSig
    • Basic Features
      • UI 맞춤화
      • 오프라인 통화 푸시
        • VoIP
        • APN
      • 닉네임 및 아바타 설정
      • 그룹 통화
      • 플로팅 윈도우
      • 사용자 정의 벨소리
      • 통화 상태 모니터링
    • 더 많은 기능
      • 가상 배경
      • AI 노이즈 캔슬링
      • 클라우드 녹화
    • 인터페이스 문서
      • UIKit APIs
        • 인터페이스 개요
        • TUICallKit
        • TUICallObserver
        • 유형 정의
      • Engine APIs
        • TUICallEngine
    • 서버 API
      • 통화 상태 콜백
        • 통화 상태 콜백
        • 통화 이벤트 콜백
        • 콜백 구성
          • 콜백 구성 인터페이스 목록
          • 콜백 구성 생성
          • 콜백 구성 조회
          • 콜백 구성 업데이트
          • 콜백 구성 삭제
      • REST 인터페이스
        • REST 인터페이스 소개
        • callId를 통한 기록 획득
        • 조건에 따른 기록 획득
    • FQAs
      • All Platform
      • iOS
      • ErrorCode
      • 배포 설명
  • Flutter
    • Overview
      • 개요
      • 서비스 활성화
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Demo 실행
      • 통합
      • Secure authentication with userSig
    • Basic Features
      • UI 맞춤화
      • 오프라인 통화 푸시
        • 알림
        • VoIP(옵션)
      • 닉네임 및 아바타 설정
      • 그룹 통화
      • 플로팅 윈도우
      • 사용자 정의 벨소리
      • 통화 상태 모니터링
    • 더 많은 기능
      • 가상 배경
      • AI 노이즈 캔슬링
      • 클라우드 녹화
      • 뷰티 특수효과
    • 인터페이스 문서
      • 인터페이스 개요
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • 유형 정의
    • 서버 API
      • 통화 상태 콜백
        • 통화 상태 콜백
        • 통화 이벤트 콜백
        • 콜백 구성
          • 콜백 구성 인터페이스 목록
          • 콜백 구성 생성
          • 콜백 구성 조회
          • 콜백 구성 업데이트
          • 콜백 구성 삭제
      • REST 인터페이스
        • REST 인터페이스 소개
        • callId를 통한 기록 획득
        • 조건에 따른 기록 획득
    • FQAs
      • All Platform
      • Flutter
      • ErrorCode
      • 업그레이드
      • 배포 설명
Call
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

해상도 및 채우기 모드 설정

Introduction to how to set resolution, fill pattern.

Setting resolution, fill pattern

The TUICallKit component provides numerous feature switches, allowing for selective enabling or disabling as needed. For specifics, refer to Introduction to TUICallKit Attributes .
VideoDisplayMode: Display mode of the frame.
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

There are three values for the videoDisplayMode display mode:
VideoDisplayMode.CONTAIN
VideoDisplayMode.COVER
VideoDisplayMode.FILL, the default value is VideoDisplayMode.COVER.
Attribute
Value
Description
videoDisplayMode
VideoDisplayMode.CONTAIN
Ensuring the full display of video content is our top priority.
The dimensions of the video are scaled proportionally until one side aligns with the frame of the viewing window.
In case of discrepancy in sizes between the video and the display window, the video is scaled - on the premise of maintaining the aspect ratio - to fill the window, resulting in a black border around the scaled video.
VideoDisplayMode.COVER
Priority is given to ensure that the viewing window is filled.
The video size is scaled proportionally until the entire window is filled.
If the video's dimensions are different from those of the display window, the video stream will be cropped or stretched to match the window's ratio.
VideoDisplayMode.FILL
Ensuring that the entire video content is displayed while filling the window does not guarantee preservation of the original video's proportion.
The dimensions of the video will be stretched to match those of the window.

videoResolution

The resolution videoResolution has three possible values:
VideoResolution.RESOLUTION_480P
VideoResolution.RESOLUTION_720P
VideoResolution.RESOLUTION_1080P, the default value is VideoResolution.RESOLUTION_480P.
Resolution Explanation:
Video Profile
Resolution (W x H)
Frame Rate (fps)
Bitrate (Kbps)
480p
640 × 480
15
900
720p
1280 × 720
15
1500
1080p
1920 × 1080
15
2000
Frequently Asked Questions:
iOS 13&14 does not support encoding videos higher than 720P. It is suggested to limit the highest collection to 720P on these two system versions. Refer to iOS Safari known issue case 12.
Firefox does not permit the customization of video frame rates (default is set to 30fps).
Due to the influence of system performance usage, camera collection capabilities, browser restrictions, and other factors, the actual values of video resolution, frame rate, and bit rate may not necessarily match the set values exactly. In such scenarios, the browser will automatically adjust the Profile to get as close to the set values as feasible.