I am using a canvas to render participant videos and element to render self video. When new user join to the meeting browser window is not responding.

here is the code that i am using to render participant video

  renderParticipantsVideo(stream: any) {
    let { canvasElement, width, height, partWidth, partHeight, users } = this.getRenderParameters();
    this.canvasCoordinates = this.divideTiles(width!, height!, users);
    users.map(async (user, index) => {
      await stream.renderVideo(
        canvasElement!,
        user.userId,
        partWidth,
        partHeight,
        this.canvasCoordinates[index].x,
        this.canvasCoordinates[index].y,
        VideoQuality.Video_360P
      );
    });
  }


  getRenderParameters() {
    let users = this.zoomState.participants
      .filter((user: any) => user.bVideoOn)
      .filter((user: any) => this.zoomState.participants.length <= 2 ? user.userId != this.zoomState.selfId : true);
    let totalSquares = users.length;

    if (totalSquares == 0) return { numCols: 0, numRows: 0, totalSquares: 0, partWidth: 0, partHeight: 0, users: users };

    // Calculate the number of rows and columns
    var numRows = Math.round(Math.sqrt(totalSquares));
    var numCols = Math.round(totalSquares / numRows);
    let canvasElement = document.getElementById("participants-canvas")! as HTMLCanvasElement;
    let width = canvasElement.width;
    let height = canvasElement.height;

    if (width > height) {
      this.zoomState.isWeb = true;
      this.zoomState.isMobile = false;
    } else if (this.zoomState.isKiosk) {
      this.zoomState.isWeb = false;
      this.zoomState.isMobile = false;
    } else {
      this.zoomState.isMobile = true;
      this.zoomState.isWeb = false;
      this.zoomState.isKiosk = false;
    }

    if (totalSquares == 1 && (this.zoomState.isWeb || this.zoomState.isMobile)) {
      numCols = 1;
      numRows = 1;
    } else if ((totalSquares == 1 && !this.zoomState.isKiosk) || (totalSquares == 2 && this.zoomState.isWeb)) {
      numCols = 2;
      numRows = 1;
    }

    // Calculate the width and height of each part
    var partWidth = width / numCols;
    var partHeight = height / numRows;

    return { canvasElement, width, height, partWidth, partHeight, users };
  }

  divideTiles(width: number, height: number, users: Participant[]) {
    const tiles = [];

    if (users.length == 1 && (this.zoomState.isWeb || this.zoomState.isMobile)) {
      //No Division
      tiles.push({ x: 0, y: 0 });
    } else if ((users.length == 1 && !this.zoomState.isKiosk) || (users.length == 2 && this.zoomState.isWeb)) {
      // Divide vertically
      tiles.push({ x: 0, y: 0 });
      tiles.push({ x: width / 2, y: 0 });
    } else {
      // Divide horizontally
      const halfWidth = width / 2;
      tiles.push({ x: 0, y: height / 2 });
      tiles.push({ x: halfWidth, y: height / 2 });

      // Divide vertically
      tiles.push({ x: 0, y: 0 });
      tiles.push({ x: halfWidth, y: 0 });
    }
    return tiles;
  }

I tried with enabeling sharedbuffer using coi-serviceworker npm package
https://www.npmjs.com/package/coi-serviceworker