本文主要介绍如何使用 TRTC Web SDK 控制视频渲染时的镜像、填充模式。
镜像
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,
view: `${userId}_${streamType}`,
option: { mirror: true }
});
await trtc.updateRemoteVideo({ userId, streamType, option: { mirror: false }})
});
注意:
该镜像效果只是针对渲染时做处理,实际编码或解码出的画面是没有镜像效果的。您可以通过 canvas 自定义采集 的方式,对 canvas 进行翻转,从而实现编码镜像的效果。 填充模式
不同参数的含义:
contain
保留宽高比,在目标容器中完整显示画面,若宽高比与目标容器不匹配,则会以黑边填充。建议播放屏幕分享使用该参数。
cover
默认值,保留宽高比,在目标容器中显示,若宽高比与目标容器不匹配,则画面则会被裁剪,以填满整个目标容器。
fill
不保留宽高比,在目标容器中显示,若宽高比与目标容器不匹配,则画面会被拉伸,以填满整个模板容器。
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,
view: `${userId}_${streamType}`,
option: { fillMode: 'contain' }
});
await trtc.updateRemoteVideo({ userId, streamType, option: { fillMode: 'cover' }})
});
本页内容是否解决了您的问题?