Web
本文主要介绍如何使用 TRTC Web SDK 控制视频渲染时的镜像、填充模式。
说明:
本教程基于5.x TRTC Web SDK 实现,若您使用4.x版本 SDK,可参考stream.play 的 objectFit 属性。
镜像
通过 trtc.startLocalVideo({ option: { mirror: true } }) 和 trtc.startRemoteVideo({ option: { mirror: true }}) 的方式来控制本地和远端视频的渲染镜像效果。
// 本地摄像头渲染镜像,默认为 trueawait 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}`,// 镜像播放远端视频,默认为 falseoption: { mirror: true }});// 动态更新参数await trtc.updateRemoteVideo({ userId, streamType, option: { mirror: false }})});
注意:
填充模式
通过 trtc.startLocalVideo({ option: { fillMode: 'cover' } }) 和 trtc.startRemoteVideo({ option: { fillMode: 'cover' }}) 的方式来控制本地和远端视频的渲染填充模式。
不同参数的含义:
contain
保留宽高比,在目标容器中完整显示画面,若宽高比与目标容器不匹配,则会以黑边填充。建议播放屏幕分享使用该参数。cover
默认值,保留宽高比,在目标容器中显示,若宽高比与目标容器不匹配,则画面则会被裁剪,以填满整个目标容器。fill
不保留宽高比,在目标容器中显示,若宽高比与目标容器不匹配,则画面会被拉伸,以填满整个模板容器。// 本地摄像头填充模式,默认为 coverawait 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' }})});