Multiple Canvas Stream - Too many active WebGL contexts

[davidCheah]

I am required to allow users to choose to view the live camera view base on 4 camera views, 8 camera views or 12 camera views in a single page. so I will loop through base on the camera selections that the users have selected and pass in the url through a loop into the function initializePlayer(wsUrl, index) { const canvas = document.getElementById(canvas-${index}); if (!canvas) { return; }

        try {
           loadPlayer({
              url: wsUrl,
              canvas: canvas,
              onDisconnect: () => {
                 this.closeWebSocket(index);
              },
           })
              .then((player) => {
                 this.players[index] = player;
                 this.selectedChannels[index].loading = false;
                 this.selectedChannels[index].loaded = true;
              })
              .catch((error) => {
                 this.selectedChannels[index].loading = false;
                 this.selectedChannels[index].loaded = false;
              })
              .finally(() => {
                 this.$nextTick(() => {
                    this.$forceUpdate();
                 });
              });
        } catch (error) {
           this.selectedChannels[index].loading = false;
           this.selectedChannels[index].loaded = false;
           console.error("Error initializing player:", error);
        }
     }

But I face this error jsmpeg.min.js:1 WARNING: Too many active WebGL contexts. Oldest context will be lost. when I tried to load more then 8 videos at a time.

So I am thinking if I can load multiple url together and have it return in a single canvas? or is there any alternative to solve this problem?