Tutorial: 开启大小流

开启大小流

功能描述

大小流是指在开启摄像头时,同时编码两路视频流,一路是正常分辨率的视频(称为大流),另一路是低分辨率的视频(称为小流)。在拉流端可以选择拉大流或者拉小流,以达到节省流量的目的。

适用场景:大小流适用于多人音视频通话场景,一般在多人通话场景的页面中,页面布局会有一个大画面 + n个小画面,位于大画面的视频拉大流,位于小画面内的视频拉小流。该功能会少量增加上行带宽,但可以大大节省下行带宽。

前提条件

您可以通过如下代码检测当前环境是否支持开启大小流编码。在不支持开启大小流编码的环境中,设置了 small 参数,是不会生效的,也不会报错。SDK 会默认只编大流和只拉小流。

TRTC.isSupported().then((checkResult) => {
  if (!checkResult.result) {
    // 当前环境不支持使用 TRTC SDK,无法推拉流。
  }
  if (!checkResult.detail.isSmallStreamSupported) {
    // 当前环境不支持开启大小流编码。
  }
});

实现步骤

推流端开启大小流

startLocalVideo 时,填写 small 参数,可以开启小流编码。在不支持开启大小流的环境中,small 参数不会生效,也不会报错。

await trtc.startLocalVideo({ option: { small: '120p' }});

自 v5.3.0+ 支持动态开关小流

await trtc.startLocalVideo();
// 动态开启小流
await trtc.updateLocalVideo({ option: { small: '120p' }});
// 动态关闭小流
await trtc.updateLocalVideo({ option: { small: false }});

拉流端选择拉大流或者拉小流

startRemoteVideo 时,填写 small 参数,可以拉小流。否则默认拉大流。拉小流时,不需要提前判断远端用户是否有推小流。若远端没有推小流,则 SDK 会自动拉大流。

trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
  trtc.startRemoteVideo({ 
    view: '', // 传入视频容器的 elementId 或者 element 实例对象。
    userId, 
    streamType, 
    option: { small: true }
  });
})

updateRemoteVideo 时,填写 small 参数,可以切换指定 userId 的大小流。常用于实现这样的功能:用户点击“小画面”时,切换到“大画面”播放;用户点击“大画面”时,切换到“小画面”播放。

// 用户点击“小画面”时,切换到“大画面”播放
await trtc.updateRemoteVideo({ 
  view: '', // 传入“大画面”视频容器的 elementId 或者 element 实例对象。
  userId: '', // 传入远端用户的 userId 
  streamType: TRTC.TYPE.STREAM_TYPE_MAIN, 
  option: { small: false }
})
// 用户点击“大画面”时,切换到“小画面”播放。
await trtc.updateRemoteVideo({ 
  view: '', // 传入“小画面”视频容器的 elementId 或者 element 实例对象。
  userId: '', // 传入远端用户的 userId 
  streamType: TRTC.TYPE.STREAM_TYPE_MAIN, 
  option: { small: true }})

注意事项

  1. TRTC 的视频流有主流(主路视频流)和辅流(辅路视频流)之分。主流包括了大流和小流,辅流一般用于屏幕分享。
  2. 拉流时,主流默认拉大流,通过 small 参数可以指定拉小流。支持同时拉大流 + 辅流,小流 + 辅流,不支持同时拉大流 + 小流。大流和小流在同一个视频容器内播放。
  3. 只有推流端开启了小流,拉流端将远端流切换成小流才会生效。若没有小流,则 SDK 会自动拉大流。
  4. 切换大小流成功目前没有事件通知。