实时音视频
有奖捉虫：办公协同&微信生态&物联网文档专题 HOT
文档中心 > 实时音视频 > 无 UI 集成 > 接入指引 > 06. 进阶指引 > 视频画面旋转 > Web

Web

最近更新时间：2023-08-16 16:41:01

我的收藏

本页目录：

本文主要介绍如何使用 TRTC Web SDK 控制视频渲染时的镜像、填充模式。
说明：
本教程基于5.x TRTC Web SDK 实现，若您使用4.x版本 SDK，可参考stream.play 的 objectFit 属性。
5.x与4.x版本的区别。

镜像

通过 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' }})
});

中国站