tencent cloud

文档反馈

设置分辨率和填充模式

最后更新时间:2024-05-08 11:37:24
    本文介绍如何设置分辨率、填充模式。

    设置分辨率、填充模式

    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 电话支持