拉流以及布局

// AUTO模式回调数据，推送最新的Layout容器大小信息
xyRTC.on("ScreenInfo", (e: IScreenInfo) => {
  console.log("demo get screen info: ", e);

  // 更新到显示画面的容器上，再次容器的基础上，展示 Layout 布局画面
  // 此处使用 React Hook语法，具体参考 示例程序Demo
  setScreenInfo(e);
});

type IScreenInfo = {
  layoutWidth: number;
  layoutHeight: number;
}

// AUTO 布局回调layout数据，使用此数据直接渲染画面即可
xyRTC.on("VideoStreams", (e: ILayout[]) => {
  console.log("demo get layout map: ", e);

  // 更新数据，渲染画面
  setLayout(e);
});

// 接收到 ConfInfoChanged 数据后，需要基于此参会者人员数据计算想要请求的参会成员画面
// 调用 xyRTC.requestLayout 请求后，会回调 VideoStreams 数据，然后基于此数据处理计算每个人的位置，大小信息
xyRTC.on("ConfInfoChanged", (e: IConfInfo) => {
  let { participantCount, contentPartCount, chairManUrl = "" } = e;
  const reqList = [];
  // 存在主会场，那么需要指定callUri字段
  // 如果有content，那么content会上大屏，分辨率请高一些
  // 如果无content，那么content可以请高分辨率的
  if (chairManUrl) {
    reqList.push({
      isContent: false,
      callUri: chairManUrl,
      resolution: contentPartCount ? 2 : 3,
      quality: 1,
    });
    participantCount -= 1;
  }

  for (let i = 0; i < participantCount; i++) {
    const reqObj = {
      isContent,
      callUri: "",
      // content内容请求1080分辨率画面，其他画面请求 360P 画面
      // 此处可以根据自己的业务自控制每个人的分辨率数据，例如大屏画面可以请求高分辨画面，缩略图画面请求低分辨率画面
      resolution: contentPartCount > 0 ? 4 : 2,
      quality: 1,
    };
  }

  xyRTC.requestLayout(reqList, maxSize, currentPage);
});

// CUSTOM 自定义布局，通过 VideoStreams 回调布局结果数据
// 第一步：根据【ConfInfoChanged】回调消息的参会者人员数量请求对应参会人员的画面数据
// 第二步：在【VideoStreams】回调消息里面，获取请求的参会人最新的布局列表数据
// 第三步：基于最新的布局列表数据，计算 position/size 等信息，计算完成后，直接渲染即可
xyRTC.on("VideoStreams", (e: any) => {
  // 每次推送都会携带local数据，如果分页不需要展示，则移除local数据
  if (cachePageInfo.current.currentPage !== 0) {
    const localIndex = e.findIndex(
      (item) => item.sourceId === "LocalPreviewID"
    );

    if (localIndex >= 0) {
      e.splice(localIndex, 1);
    }
  }

  const nextTemplateRate = TEMPLATE.GALLERY.rate[e.length] || 0.5625;
  // 此处无id是container的容器，则使用document.body的size计算screen
  cacheScreenInfo.current = getScreenInfo("container", nextTemplateRate, [
    92,
    0,
  ]);
  // 计算初始layoutList数据
  // 包含计算每个参会成员的大小，位置，详见 sdk demo 程序
  const nextLayout = calculateBaseLayoutList(e);

  console.log("nextLayout:", nextLayout);
  // 处理完数据，执行渲染即可
  setLayout(nextLayout);
});