设置分辨率、填充模式(Web)

Recent Pages

设置分辨率、填充模式(Web)

最后更新时间：2024-04-03 17:23:11

本位介绍如何设置分辨率、填充模式。
设置分辨率、填充模式
TUICallKit 组件提供了若干个功能开关，可以根据需要选择开启或关闭，具体参见 TUICallKit 属性介绍。
videoDisplayMode：画面显示模式。
videoResolution：通话分辨率。
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
画面显示模式 videoDisplayMode 属性有三个值：
VideoDisplayMode.CONTAIN
VideoDisplayMode.COVER
VideoDisplayMode.FILL，默认值是VideoDisplayMode.COVER。
属性
值
描述
videoDisplayMode
VideoDisplayMode.CONTAIN
优先保证视频内容全部显示。
视频尺寸等比缩放，直至视频窗口的一边与视窗边框对齐。
如果视频尺寸与显示视窗尺寸不一致，在保持长宽比的前提下，将视频进行缩放后填满视窗，缩放后的视频四周会有一圈黑边。
﻿
VideoDisplayMode.COVER
优先保证视窗被填满。
视频尺寸等比缩放，直至整个视窗被视频填满。
如果视频长宽与显示窗口不同，则视频流会按照显示视窗的比例进行周边裁剪或图像拉伸后填满视窗。
﻿
VideoDisplayMode.FILL
保证视窗被填满的同时保证视频内容全部显示，但是不保证视频尺寸比例不变。
视频的宽高会被拉伸至和视窗尺寸一致。
videoResolution
分辨率 videoResolution 有三个值：
VideoResolution.RESOLUTION_480P
VideoResolution.RESOLUTION_720P
VideoResolution.RESOLUTION_1080P，默认值是VideoResolution.RESOLUTION_480P。
分辨率说明：
视频 Profile
分辨率（宽 × 高）
帧率（fps）
码率（kbps）
480p
640 × 480
15
900
720p
1280 × 720
15
1500
1080p
1920 × 1080
15
2000
常见问题：
iOS 13&14不支持编码高于 720P 的视频，建议在这两个系统版本限制最高采集 720P。参见 iOS Safari 已知问题 case 12。
Firefox 不支持自定义视频帧率（默认为 30fps）。
受系统性能占用，摄像头采集能力和浏览器限制等因素的影响，视频分辨率、帧率、码率的实际值不一定能够完全匹配设定值，在这种情况下，浏览器会自动调整 Profile 尽可能匹配设定值。

联系我们

联系我们，为您的业务提供专属服务。

技术支持

如果你想寻求进一步的帮助，通过工单与我们进行联络。我们提供7x24的工单服务。

7x24 电话支持

tencent cloud

Recent Pages

设置分辨率、填充模式(Web)

设置分辨率、填充模式

videoDisplayMode

videoResolution

本页内容是否解决了您的问题？

本页内容是否解决了您的问题？

属性	值	描述
videoDisplayMode	VideoDisplayMode.CONTAIN	优先保证视频内容全部显示。视频尺寸等比缩放，直至视频窗口的一边与视窗边框对齐。如果视频尺寸与显示视窗尺寸不一致，在保持长宽比的前提下，将视频进行缩放后填满视窗，缩放后的视频四周会有一圈黑边。
		VideoDisplayMode.COVER	优先保证视窗被填满。视频尺寸等比缩放，直至整个视窗被视频填满。如果视频长宽与显示窗口不同，则视频流会按照显示视窗的比例进行周边裁剪或图像拉伸后填满视窗。
		VideoDisplayMode.FILL	保证视窗被填满的同时保证视频内容全部显示，但是不保证视频尺寸比例不变。视频的宽高会被拉伸至和视窗尺寸一致。

视频 Profile	分辨率（宽 × 高）	帧率（fps）	码率（kbps）
480p	640 × 480	15	900
720p	1280 × 720	15	1500
1080p	1920 × 1080	15	2000

tencent cloud

注册

登录

Recent Pages

设置分辨率、填充模式(Web)

设置分辨率、填充模式

videoDisplayMode

videoResolution

本页内容是否解决了您的问题？

本页内容是否解决了您的问题？