- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 组件介绍（TUICallKit）
- 开通服务（TUICallKit）
- 跑通 Demo（TUICallKit）
- 快速接入（TUICallKit）
- Chat 集成通话能力（TUICallKit）
- 界面定制（TUICallKit）
- 离线唤醒（TUICallKit）
- AI 降噪（TUICallKit）
- 虚拟背景（TUICallKit）
- 会话聊天（TUICallKit）
- 云端录制（TUICallKit）
- 更多特性（TUICallKit）
- 解决方案（TUICallKit）
- 服务端 API（TUICallKit）
- 客户端 API（TUICallKit）
- 错误码表（TUICallkit）
- 发布日志（TUICallKit）
- 常见问题（TUICallKit）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- Live 视频直播计费说明
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 组件介绍（TUICallKit）
- 开通服务（TUICallKit）
- 跑通 Demo（TUICallKit）
- 快速接入（TUICallKit）
- Chat 集成通话能力（TUICallKit）
- 界面定制（TUICallKit）
- 离线唤醒（TUICallKit）
- AI 降噪（TUICallKit）
- 虚拟背景（TUICallKit）
- 会话聊天（TUICallKit）
- 云端录制（TUICallKit）
- 更多特性（TUICallKit）
- 解决方案（TUICallKit）
- 服务端 API（TUICallKit）
- 客户端 API（TUICallKit）
- 错误码表（TUICallkit）
- 发布日志（TUICallKit）
- 常见问题（TUICallKit）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- Live 视频直播计费说明
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
本文主要介绍如何使用 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' }})});
是
否
本页内容是否解决了您的问题？