实时音视频 Web

TUIRoomKit PC 端提供九宫格布局、侧边栏布局和顶部栏布局三种流布局方式供用户切换；而 TUIRoomKit H5 及小程序端则支持用户切换演讲者视图和六宫格布局。
本文将介绍 TUIRoomKit 流布局的微调方法及如何快速自定义流布局。
﻿
Roomkit 流布局微调指引
以下代码展示了 TUIRoomKit 已经支持的流布局的具体实现，如果您需要对已经支持布局进行微调，可以在 导出 TUIRoomKit 源码 后对TUIRoom/components/RoomContent/StreamContainer 文件中的布局样式及参数进行调整。
说明：
SingleStreamView 组件及 MultiStreamView 组件的详细使用说明请查看 TUIRoomKit 流布局基础组件介绍。
PC 端宫格布局
PC 端侧边栏布局
PC 顶部栏布局
移动端布局
<template>
  <div class="stream-container">
    <multi-stream-view
      :maxColumn="maxColumn"
      :maxRow="maxRow">
    </multi-stream-view>
  </div>
</template>
﻿
<script setup>
  const maxColumn = ref(3);
  const maxRow = ref(3);
</script>
﻿
<style lang="scss">
  div.stream-container {
    width: 100%;
    heght: 100%;
  }
</style>
<template>
  <div class="stream-container">
    <single-stream-view
      class="single-stream-view"
      :streamInfo="enlargeStreamInfo"
    </single-stream-view>
    <multi-stream-view
      class="multi-stream-view"
      :maxColumn="maxColumn"
      :maxRow="maxRow"
      :excludeStreamInfoList="excludeStreamInfoList"
      @stream-view-dblclick="handleStreamViewDblclick">
    </multi-stream-view>
  </div>
</template>
﻿
<script setup>
  import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
  const enlargeStreamInfo = ref({
    userId: 'user_master',
    streamType: TUIVideoStreamType.kCameraStream,
  })
  const maxColumn = ref(1);
  const maxRow = ref(Infinity);
  const excludeStreamInfoList = computed(() => {
    return [enalrgeStreamInfo];
  })
  
  function handleStreamViewDblclick(streamInfo) {
    enlargeStreamInfo.value = streamInfo;
  }
</script>
﻿
<style lang="scss">
  div.stream-container {
    width: 100%;
    heght: 100%;
    display: flex;
    .single-stream-view {
      flex: 1;
    }
    .multi-stream-view {
      width: 240px;
      height: 100%;
    }
  }
</style>
<template>
  <div class="stream-container">
    <single-stream-view
      class="single-stream-view"
      :streamInfo="enlargeStreamInfo"
    </single-stream-view>
    <multi-stream-view
      class="multi-stream-view"
      :maxColumn="maxColumn"
      :maxRow="maxRow"
      :excludeStreamInfoList="excludeStreamInfoList"
      @stream-view-dblclick="handleStreamViewDblclick">
    </multi-stream-view>
  </div>
</template>
﻿
<script setup>
  import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
  const enlargeStreamInfo = ref({
    userId: 'user_master',
    streamType: TUIVideoStreamType.kCameraStream,
  })
  const maxColumn = ref(Infinity);
  const maxRow = ref(1);
  const excludeStreamInfoList = computed(() => {
    return [enalrgeStreamInfo];
  })
  
  function handleStreamViewDblclick(streamInfo) {
    enlargeStreamInfo.value = streamInfo;
  }
</script>
﻿
<style lang="scss">
  div.stream-container {
    width: 100%;
    heght: 100%;
    display: flex;
    flex-direction: column-reverse;
    .single-stream-view {
      flex: 1;
    }
    .multi-stream-view {
      width: 100%;
      height: 175px;
    }
  }
</style>
<template>
  <div ref="streamContainerRef" class="stream-container">
    <TuiSwiper
      :active-index="swiperActiveIndex"
      :show-page-dots="showSwiperPageDots"
      @change="handleSwiperChange"
      class="page-stream-container"
    >
      <TuiSwiperItem v-if="showLargeAndFloatPage">
        <single-stream-view
          class="enlarged-stream"
          :streamInfo="enlargeStream"
          :support-touch-scale="isEnlargeScreenStream"
        />
        <single-stream-view
          v-if="floatStream"
          class="float-stream"
          :style="floatStreamStyle"
          :streamInfo="floatStream"
        />
      </TuiSwiperItem>
      <TuiSwiperItem
        v-for="(item, index) in equalPointsLayoutStreamList"
        :key="index"
      >
        <multi-stream-view
          class="page-stream-container"
          :maxColumn="maxColumn"
          :maxRow="maxRow"
          :stream-info-list="item"
          @stream-view-dblclick="handleStreamViewDblclick"
        />
      </TuiSwiperItem>
    </TuiSwiper>
  </div>
</template>
﻿
<script setup>
  import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
  const maxColumn = ref(2);
  const maxRow = ref(3);
  
  const enlargeStream = ref({
    userId: 'user_master',
    streamType: TUIVideoStreamType.kCameraStream,
  })
  const floatStream = ref({
    userId: 'user_me',
    streamType: TUIVideoStreamType.kCameraStream,
  });
  const equalPointsLayoutStreamList: ComputedRef<StreamInfo[][]> = computed(
    () => {
      return [
        ...new Array(
          Math.ceil(cameraStreamList.value.length / maxCountEveryPage.value)
        ).keys(),
      ].map((pageIndex: number) => {
        return cameraStreamList.value.slice(
          pageIndex * maxCountEveryPage.value,
          (pageIndex + 1) * maxCountEveryPage.value
        );
      });
    }
  );
﻿
  function handleStreamViewDblclick(streamInfo) {
    enlargeStreamInfo.value = streamInfo;
  }
</script>
﻿
<style lang="scss">
  div.stream-container {
    width: 100%;
    heght: 100%;
  }
  .enlarge-stream {
    width: 100%;
    heght: 100%;
  }
  .float-stream {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
  }
</style>
Roomkit 流布局基础组件
RoomKit 内部提供 singleStreamView 及 MultiStreamView 流渲染组件。使用以下组件，开发者可以快速自定义流布局交互模式。
SingleStreamView 组件
SingleStreamView 用于播放指定用户的流。当当前用户正在推流时，会自动播放；若无流，将显示用户的头像信息。
﻿
﻿
﻿
组件属性
参数
说明
类型
默认值
streamInfo
当前区域播放的流信息
{
  userId: string;
  streamType: TUIVideoStreamType;
}
-
fillMode
流播放时的填充模式
'fill'/'contain'
'fill'： 视频流画面填充整个区域，如果视频流的宽高比与容器不匹配，视频流会被拉伸
'contain'：视频流画面保持原始宽高比播放，如果视频流的宽高比与容器不匹配，视频流被填充黑边
PC 端默认为 'contain', 移动端默认为 'fill'，
屏幕分享统一为 'contain' 模式
组件事件
事件名称
说明
回调参数
stream-view-dblclick
当前流播放区域被用户双击
{
  userId: string;
  streamType: TUIVideoStreamType;
}
MultiStreamView 组件
MultiStreamView 组件默认采用 SingleStreamView 来展示房间内所有用户的流。该组件根据传入的 maxColumn 和 maxRow 参数自动调整流布局。开发者还可以通过 excludeStreamInfoList 参数来指定不在 MultiStreamView 组件中播放的流。
﻿
﻿
﻿
组件属性
参数
说明
类型
默认值
maxColume
横向展示的流的最大个数（1， Infinity]
number
-
maxRow
纵向展示的流的最大个数（1， Infinity]
number
-
fillMode
列表中所有流的渲染模式
'fill'/'contain'
'fill'：视频流画面填充整个区域，如果视频流的宽高比与容器不匹配，视频流会被拉伸
'contain'：视频流画面保持原始宽高比播放，如果视频流的宽高比与容器不匹配，视频流被填充黑边
'contain'
excludeStreamInfoList
房间中不需要在当前 MultiStreamView 组件中展示的流
{
userId: string;
streamType: TUIVideoStreamType;
}[]
[]
组件事件
事件名称
说明
回调参数
stream-view-dblclick
被用户双击的单个流的信息
{
  userId: string;
  streamType: TUIVideoStreamType;
}
自定义 Roomkit 流布局
如果 TUIRoomKit 提供的流布局交互不符合您的业务需求，您可以使用 SingleStreamView 组件及 MultiStreamView 组件快速搭建符合您需求的流布局。使用 SingleStreamView 及 MultiStreamView 基础组件，您只需要指定特定区域需要播放的流信息，处理简单的流信息替换，处理 css 布局即可实现复杂的流布局交互。
说明：
SingleStreamView 组件及 MultiStreamView 组件的详细使用说明请查看 TUIRoomKit 流布局基础组件介绍。
以经典教育场景布局为例，介绍 SingleStreamView 组件及 MultiStreamView 组件的使用示例。
﻿
﻿
﻿
<template>
  <div class="stream-container">
    <white-board v-if="isWhiteBoardInEnlarge"></white-board>
    <single-stream-view 
      v-else
      class="enlarge-stream-view"
      :streamInfo="masterStream"
    </single-stream-view>
    <div class="side-stream-container">
        <white-board v-if="!isWhiteBoardInEnlarge"></white-board>
        <single-stream-view
          v-else
          class="top-right-stream-view"
          :streamInfo="masterStream"
          @stream-view-dblclick="handleStreamViewDblclick">
        </single-stream-view>
        <multi-stream-view
          class="multi-stream-view"
          :maxColumn="maxColumn"
          :maxRow="maxRow"
          :excludeStreamInfoList="[masterStream]">
        </multi-stream-view>
    </div>
  </div>
</template>
﻿
<script setup>
  import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
  const masterStream = ref({
    userId: 'user_master',
    streamType: TUIVideoStreamType.kCameraStream,
  })
  const isWhiteBoardInEnlarge = ref(true);
﻿
  const maxColumn = ref(2);
  const maxRow = ref(Infinity);
  
  function handleStreamViewDblclick(streamInfo) {
    const tempStreamInfo = enlargeStreamInfo;
    enlargeStream.value = topRightStream.value;
    topRightStream.value = tempStreamInfo;
  }
</script>
﻿
<style lang="scss">
  div.stream-container {
    width: 100%;
    heght: 100%;
    display: flex;
    .enlarge-stream-view {
      flex: 1;
    }
    .side-stream-container {
      width: 240px;
      height: 100%;
      display: flex;
      .top-right-stream-view {
        width: 240px;
        height: 135px;
      }
      .multi-stream-view {
        flex: 1;
      }
    }
  }
</style>
参数	说明	类型	默认值
streamInfo	当前区域播放的流信息	{ userId: string; streamType: TUIVideoStreamType; }	-
fillMode	流播放时的填充模式	'fill'/'contain' 'fill'：视频流画面填充整个区域，如果视频流的宽高比与容器不匹配，视频流会被拉伸 'contain'：视频流画面保持原始宽高比播放，如果视频流的宽高比与容器不匹配，视频流被填充黑边	PC 端默认为 'contain', 移动端默认为 'fill'，屏幕分享统一为 'contain' 模式
事件名称	说明	回调参数
stream-view-dblclick	当前流播放区域被用户双击	{ userId: string; streamType: TUIVideoStreamType; }
Web

本页目录：

Roomkit 流布局微调指引

Roomkit 流布局基础组件

SingleStreamView 组件

MultiStreamView 组件

自定义 Roomkit 流布局
