Chat
- News and Announcements
- Announcements
- Product Introduction
- Account System
- User Profile and Relationship Chain
- Group Related
- Purchase Guide
- Demo Zone
- Chat Interaction (UI Included)
- TUIKit Library
- Integrating TUIKit
- Build Basic Interfaces
- Setting UI Styles
- Implementing Local Search
- Integrating Offline Push
- User Online Status
- Typing Status
- Message Read Receipt
- Message Reactions
- Message Quotation
- Message Translation
- Internationalization
- Adding Custom Messages
- Emoji & Stickers
- Custom UI components
- Conversation List(React)
- Video Call (UI Included)
- Additional Features(TUICallKit)
- Group Call
- Multi-Person Call
- Floating Window
- Beauty Effects (TUICallKit)
- Monitoring Call Status
- API Documentation(TUICallKit)
- Release Notes (TUICallKit)
- Push Service
- Manufacturer Channel
- Manufacturer Configuration
- Quick Integration
- Client APIs
- REST API
- Advanced Features
- Release Notes
- Desk
- Integration Guide
- Integration of UIKit（recommend）
- Integrating Agent End
- Desk related webhooks
- Admin Operation Manual
- Team Management
- More Practices
- No UI Integration
- Quick Start
- Login and Logout
- Message
- Message Overview
- Sending Message
- Receiving Message
- Historical Message
- Forwarding Message
- Modifying Message
- Message Inserting
- Deleting Message
- Clearing Messages
- Recalling Message
- Querying Message
- Group @ Message
- Targeted Group Message
- Notification Muting
- Message Extension
- Message Reaction
- Message Translation
- Message Pinning
- Conversation
- Conversation Overview
- Conversation List
- Getting Conversation
- Conversation Unread Count
- Pinning Conversation to the Top
- Deleting Conversation
- Conversation Draft
- Conversation Mark
- Conversation Group
- Group
- Group Management
- Group Member Management
- Group Member Profile
- Custom Group Attribute
- Group Counter
- Community Topic
- Community Management
- Permission Group
- User Profile and Relationship Chain
- Friend Management
- Follow Feature
- Cloud Search
- Cloud Search Messages
- Cloud Search Users
- Cloud Search Groups
- Cloud Search Group Members
- Local Search
- Searching for Message
- Searching for Friend
- Searching Group
- Searching for Group Member
- Signaling
- Signaling Management
- Server APIs
- RESTful APIs
- Message Related
- Send Message
- Historical Message
- Withdraw Message
- Read Receipt
- Message Extension
- Session Related
- Conversation List
- Session Unread Count
- Delete Session
- Group Related
- Group Management
- Group Member Management
- Group Member Information
- Group Custom Attributes
- Live Group Management
- Community Management
- Permission Group Management
- User Management
- Account Management
- User Information
- Friend Management
- Friend Lists
- Global Mute Management
- Operations Management
- Official Account Management
- Official Account Related
- Webhooks
- Operations Management Callbacks
- Online Status Webhooks
- Relationship Chain Webhooks
- One-to-One Message Webhooks
- Group Webhooks
- Chatbot Callbacks
- Webhooks related to the Official Account
- Console Guide
- Advanced Features
- Cloud Search Plugin
- Integration Guide
- Text Message Translation Plugin
- Integration Guide
- TUIPoll
- Integration Guide
- TUIGroupNote
- Integration Guide
- TUIConversationMark
- Integration Guide
- TUIConversationGroup
- Integration Guide
- FAQs
- SDK
- Security Compliance Certification
- Chat Policies
DocumentationChatVideo Call (UI Included)Additional Features(TUICallKit)Setting Resolution and Fill Pattern
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.
Import { VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-react";<TUICallKitvideoDisplayMode={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.
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No