const roomEngine = new TUIRoomEngine();
const liveLayoutManager = roomEngine.getLiveLayoutManager();
const layoutData = {
  // 设置画布大小
  VideoEncode: {
    Width: 1920,
    Height: 1080,
  },
  LayoutMode: 1000,    // 0~9 内置布局模板， 1000 为自定义布局， 只有为1000 时才能 LayoutInfo 属性才有效
  // 设置画面布局
  LayoutInfo: {
    LayoutList: [
      {
        LocationX: 0,                   // 以画面左上角为原点的 x 坐标
        LocationY: 0,                   // 以画面左上角为原点的 y 坐标
        ImageWidth: 1080,               // 调整后的画面宽度
        ImageHeight: 960,               // 调整后的画面高度
        ZOrder: 0,                      // 画面层级，取值范围： 0 ～ +∞
        StreamType: 0,                  // 0 摄像头, 1 屏幕共享, 2 白板, 3 自定义
        Member_Account: 'admin001',     // 该路流的用户ID
        BackgroundImageUrl: 'ImageUrl', // 可为空
        RoomId: 'roomId',              
        BackgroundColor: '0x1F212C',    // 可为空
      },
    ],
  },
  // 设置最大画面布局信息 
  MaxUserLayout: {
    LocationX: 0,                      // 以画面左上角为原点的 x 坐标
    LocationY: 0,                      // 以画面左上角为原点的 y 坐标
    ImageWidth: 1920,                  // 调整后的画面宽度
    ImageHeight: 1080,                 // 调整后的画面高度
    ZOrder: 0,                         // 画面层级，最大画面层级推荐为 0
    StreamType: 0,                     // 0为摄像头， 1为屏幕共享
    Member_Account: 'admin001',        // 该路流的用户ID
    BackgroundImageUrl: 'ImageUrl',    // 可以设置看看，可能在最大画面时候没作用
    RoomId: 'roomId',
    BackgroundColor: '0x1F212C'
  },
 };

const roomId = 'roomId';
const layoutInfo = JSON.stringify(layoutData);
await liveLayoutManager.setLiveStreamLayoutInfo(roomId, layoutInfo);


const roomEngine = new TUIRoomEngine();
const liveLayoutManager = roomEngine.getLiveLayoutManager();
const callback = (roomId, layoutInfo) => {
  console.log('liveLayoutManager.onLiveVideoLayoutChanged', roomId, layoutInfo);
};
liveLayoutManager.on(TUILiveLayoutManagerEvents.onLiveVideoLayoutChanged, callback);


const roomEngine = new TUIRoomEngine();
const liveLayoutManager = roomEngine.getLiveLayoutManager();
const callback = (roomId, layoutInfo) => {
  console.log('liveLayoutManager.onLiveVideoLayoutChanged', roomId, layoutInfo);
};
liveLayoutManager.off(TUILiveLayoutManagerEvents.onLiveVideoLayoutChanged, callback);


const roomEngine = new TUIRoomEngine();
const liveLayoutManager = roomEngine.getLiveLayoutManager();
liveLayoutManager.on(TUILiveLayoutManagerEvents.onLiveVideoLayoutChanged, (roomId, layoutInfo) => {
  console.log('liveLayoutManager.onLiveVideoLayoutChanged', roomId, layoutInfo);
});


const roomEngine = new TUIRoomEngine();
const liveLayoutManager = roomEngine.getLiveLayoutManager();
liveLayoutManager.on(TUILiveLayoutManagerEvents.onSeatLayoutChanged, ({ roomId, seatLayout }) => {
  console.log('liveLayoutManager.onSeatLayoutChanged', roomId, seatLayout);
});