TUILiveLayoutManager

const roomEngine = new TUIRoomEngine();
const liveLayoutManager = roomEngine.getLiveLayoutManager();
const layoutData = {
  // Set the canvas size
  VideoEncode: {
    Width: 1920,
    Height: 1080,
  },
  LayoutMode: 1000,    // 0~9 built-in layout template, 1000 for custom layout, LayoutInfo property is valid only when set to 1000
  // Set screen layout
  LayoutInfo: {
    LayoutList: [
      {
        LocationX: 0,                   // x coordinate with the top-left corner of the frame as the origin point
        LocationY: 0,                   // y coordinate with the top-left corner of the frame as the origin point
        ImageWidth: 1080,               // Adjusted frame width
        ImageHeight: 960,               // Adjusted screen height
        ZOrder: 0,                      // Frame layer, value ranges from 0 to +∞
        StreamType: 0,                  // 0 camera, 1 screen sharing, 2 whiteboard, 3 custom
        Member_Account: 'admin001',     // User ID of this stream
        BackgroundImageUrl: 'ImageUrl', // can be empty
        RoomId: 'roomId',              
        BackgroundColor: '0x1F212C',    // nullable
      },
    ],
  },
  // Set maximum screen layout info 
  MaxUserLayout: {
    LocationX: 0,                      // x coordinate with the top-left corner of the frame as the origin point
    LocationY: 0,                      // y coordinate with the top-left corner of the frame as the origin point
    ImageWidth: 1920,                  // Adjusted frame width
    ImageHeight: 1080,                 // Adjusted screen height
    ZOrder: 0,                         // Frame layer, the maximum recommended layer is 0
    StreamType: 0,                     // 0 camera, 1 screen sharing
    Member_Account: 'admin001',        // User ID of this stream
    BackgroundImageUrl: 'ImageUrl',    // can be set, may not function on large screen
    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);
});