拉流和自定义布局

const reqList = [
  {
    resolution: 1,
    quality: 1,
    mediagroupid: 0,
    // 指定A的设备ID
    calluri: 'A'
  },
  {
    resolution: 1,
    quality: 1,
    mediagroupid: 0,
    // 指定B的设备ID
    calluri: 'B'
  }  
];

XYClient.requestNewLayout(reqList, 2, 0);

const reqList = [
  {
    resolution: 1,
    quality: 1,
    mediagroupid: 0,
    // 指定C的设备ID
    calluri: 'C'
  },
  {
    resolution: 1,
    quality: 1,
    mediagroupid: 0,
    // 指定的设备ID    
    calluri: 'D'
  }
];

XYClient.requestNewLayout(reqList, 2, 0);

const reqList = [
  {
    resolution: 1,
    quality: 1,
    mediagroupid: 0,
    // 自动填充参会者视频流
    calluri: ''
  },
  {
    resolution: 1,
    quality: 1,
    mediagroupid: 0,
    // 自动填充参会者视频流
    calluri: ''
  }  
];

// 请求第一页数据
XYClient.requestNewLayout(reqList, 2, 1);

const reqList = [
  {
    resolution: 1,
    quality: 1,
    mediagroupid: 0,
    // 自动填充参会者视频流
    calluri: ''  
  },
  {
    resolution: 1,
    quality: 1,
    mediagroupid: 0,
    // 自动填充参会者视频流
    calluri: ''  
  }
];

// 请求第二页的数据
XYClient.requestNewLayout(reqList, 2, 2);

const XYClient = XYRTC.createClient({
  ...
  layout: 'CUSTOM'
});

let cacheContentUri = '';

XYClient.on('conf-change-info', (data: IConfInfo) => {
  cacheContentUri = data.contentUri;
  
  // 见第四步骤实现
  requestLayout();
})

let cacheRosterList = [];

XYClient.on('roster', (data: IRoster[]) => {
  cacheRosterList = data;
  
  // 见第四步骤实现
  requestLayout();
})

const requestLayout = () => {
  const reqList = [];
  const totalCount = cacheRosterList.length;
  // 每页最大显示4画面
  const pageSize = totalCount > 4 ? 4 : totalCount;
  // 页码，可以基于totalCount和pageSize算出总页数，并缓存数据作分页处理
  // 此处固定配置第一页，仅作演示流程使用
  const pageIndex = 1;
  // 获取指定页码的参会者数据
  const rosters = cacheRosterList.slice(pageIndex - 1, pageSize);

  for (let i = 0; i < pageSize; i++) {
    const requestConfig = {
      mediagroupid: 0,
      resolution: 2,
      quality: 1,
      calluri: rosters[i].endpointId,
    };

    reqList.push(requestConfig);
  }

  // 存在共享内容
  if (cacheContentUri) {
    reqList.push({
      // Content内容配置：1
      mediagroupid: 1,
      // Content分辨率请求1080P
      resolution: 4,
      // 帧率最高
      quality: 2,
      calluri: cacheContentUri,
    });
  }

  // 调用请求流接口，注意第三个参数固定配置0
  XYClient.requestNewLayout(reqList, 5, 0);
}

// 安装@xylink/xy-rtc-sdk库即可加载
// 此处使用SDK提供的辅助函数计算旋转角度
import { getLayoutRotateInfo } from './node_modules/@xylink/xy-rtc-sdk/xyrtc.js';

// 参会者布局列表数据
let layoutList = [];
// 缓存列表数据，做Diff使用
let cacheLayoutList = [];

XYClient.on('layout', (e: ILayout[]) => {
  console.log('layout list: ', e);

  layoutList = e;
  // 获取成员列表布局数据，直接渲染使用即可
  renderLayoutList();  
})

// 渲染Layout布局列表数据
const renderLayoutList = () => {
  const meetingContainer = document.getElementById('layout');
  diffInvalidLayout();

  layoutList
    // 批量更新计算移动端画面旋转角度
    .map((item) => {
      if (item.rotationInfo) {
        const rotate = getLayoutRotateInfo(item.rotationInfo, videoContainerWidth, videoContainerHeight);

        if (rotate) {
          item.rotate = rotate;
        }
      }
      return item;
    })
    // 下方同自动布局处理流程一致
    .forEach((item) => {
      const { positionStyle = {}, rotate = {}, id, state } = item;
      const { displayName = '' } = item?.roster || {};
      const layoutItemId = 'wrap-' + id;
      const isExist = document.getElementById(layoutItemId);
      const { width, height, left, top } = positionStyle;
      // Layout外围容器样式
      const layoutItemStyle = `width: ${width}; height: ${height}; left: ${left}; top: ${top}`;
      const isPause = state === 'MUTE';
      // video样式，包含竖屏旋转样式
      let layoutVideoStyle = '';
      for (let key in rotate) {
        layoutVideoStyle += `${key}: ${rotate[key]};`;
      }
      if (!isExist) {
        // 初始渲染
        const layoutItemString = `
          <div class="layout_item" style="${layoutItemStyle}" id=${layoutItemId}>
            <div class="layout_name">${displayName}</div>
            <div class="layout_pause center ${isPause ? 'show' : 'hidden'}">视频暂停</div>
            <div class="center layout_video">
              <video class="video" style="${layoutVideoStyle}" playsinline autoplay muted></video>
            </div>
          </div>`;
        // 向容器中追加新的Layout画面Dom
        meetingContainer.insertAdjacentHTML('beforeend', layoutItemString);
        // id不变的情况下，只需要执行一次即可
        XYClient.setVideoRenderer(id, layoutItemId);
      } else {
        // 已渲染，更新样式和状态
        const layoutItemEle = document.getElementById(layoutItemId);
        const layoutNameEle = layoutItemEle.querySelector('.layout_name');
        const layoutVideoEle = layoutItemEle.querySelector('.video');
        const layoutPauseEle = layoutItemEle.querySelector('.layout_pause');
        layoutItemEle.style.cssText = layoutItemStyle;
        layoutNameEle.innerHTML = displayName;
        layoutVideoEle.style.cssText = layoutVideoStyle;
        layoutPauseEle.className = `center layout_pause ${isPause ? 'show' : 'hidden'}`;
      }
    });
  // 缓存上一组Layout List数据，下一次diff出离开会议的设备并清空DOM
  cacheLayoutList = JSON.parse(JSON.stringify(layoutList));
};

// diff出离开会议设备
const diffInvalidLayout = () => {
  const filterLayoutList = cacheLayoutList.filter((item) => {
    return !layoutList.some(({ id }) => id === item.id);
  });

  // 清理Video资源
  clearInvalidLayout(filterLayoutList);
};

// 清理Video资源和DOM
const clearInvalidLayout = (list) => {
  list.forEach(({ id }) => {
    const layoutItemId = 'wrap-' + id;
    const layoutItemEle = document.getElementById(layoutItemId);

    // 清理Video资源
    XYClient.removeVideoRenderer(id);
    // 移除layoutItemEle元素
    layoutItemEle.remove();
  });
};

// UI伪代码代码
<div class="meeting center" id="meeting">
  <!-- 渲染所有Layout数据 -->
  <div id="layout" class="layout"></div>
</div>