tencent cloud

文档反馈

最后更新时间:2023-09-11 17:49:16
    本文主要介绍如何使用 TRTC Web SDK 控制视频渲染时的镜像、填充模式。
    说明:
    本教程基于5.x TRTC Web SDK 实现,若您使用4.x版本 SDK,可参考stream.play 的 objectFit 属性

    镜像

    通过 trtc.startLocalVideo({ option: { mirror: true } })trtc.startRemoteVideo({ option: { mirror: true }}) 的方式来控制本地和远端视频的渲染镜像效果。
    // 本地摄像头渲染镜像,默认为 true
    await trtc.startLocalVideo({ option: { mirror: true }});
    
    // 动态更新参数
    await trtc.updateLocalVideo({ option: { mirror: false }});
    
    trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, async ({ userId, streamType }) => {
    await trtc.startRemoteVideo({
    userId,
    streamType,
    // 您需在 DOM 中提前放置视频容器,建议以 `${userId}_${streamType}` 作为 element id。
    view: `${userId}_${streamType}`,
    // 镜像播放远端视频,默认为 false
    option: { mirror: true }
    });
    // 动态更新参数
    await trtc.updateRemoteVideo({ userId, streamType, option: { mirror: false }})
    });
    注意:
    该镜像效果只是针对渲染时做处理,实际编码或解码出的画面是没有镜像效果的。您可以通过 canvas 自定义采集 的方式,对 canvas 进行翻转,从而实现编码镜像的效果。

    填充模式

    通过 trtc.startLocalVideo({ option: { fillMode: 'cover' } })trtc.startRemoteVideo({ option: { fillMode: 'cover' }}) 的方式来控制本地和远端视频的渲染填充模式。
    不同参数的含义:
    contain 保留宽高比,在目标容器中完整显示画面,若宽高比与目标容器不匹配,则会以黑边填充。建议播放屏幕分享使用该参数。
    cover 默认值,保留宽高比,在目标容器中显示,若宽高比与目标容器不匹配,则画面则会被裁剪,以填满整个目标容器。
    fill 不保留宽高比,在目标容器中显示,若宽高比与目标容器不匹配,则画面会被拉伸,以填满整个模板容器。
    // 本地摄像头填充模式,默认为 cover
    await trtc.startLocalVideo({ option: { fillMode: 'cover' }});
    
    // 动态更新参数
    await trtc.updateLocalVideo({ option: { fillMode: 'contain' }});
    
    trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, async ({ userId, streamType }) => {
    await trtc.startRemoteVideo({
    userId,
    streamType,
    // 您需在 DOM 中提前放置视频容器,建议以 `${userId}_${streamType}` 作为 element id。
    view: `${userId}_${streamType}`,
    option: { fillMode: 'contain' }
    });
    // 动态更新参数
    await trtc.updateRemoteVideo({ userId, streamType, option: { fillMode: 'cover' }})
    });
    
    联系我们

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

    技术支持

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

    7x24 电话支持