Video.js text tracks memory leak (WebVTT/VTT)

Question

I use Video Text Tracks for displaying some advanced live info over the video.
Every few minutes a new video is loaded with its own .webvtt file (2-3k lines).

Everything works great except the fact that memory usage constantly increases.

It's a memory leak, for each new video additional VTTCue and TextTrack recordings are appended to the previous ones.

Tried many things and ended up with the below approach, I'm out of ideas.

The tracks are added as proposed by the Video.js documentation (remote text tracks):

player.ready(() => {
  if (videoOptions.subtitles) {
    player.addRemoteTextTrack(
      {
        src: videoOptions.subtitles,
        kind: 'subtitles',
      },
      false,
    );
  }
});

And removed before the player dispose:

const remoteTextTracks = this.player.remoteTextTracks();
for (let i = remoteTextTracks.length - 1; i >= 0; i -= 1) {
  this.player.removeRemoteTextTrack(remoteTextTracks[i]);
}

They are successfully removed from the player but obviously kept in the memory.

How can I tell/direct/force the GC to completely remove old text tracks?

Answer 1

If someone comes here struggling with a similar issue, this is the solution I thought it worked well:

const remoteTextTracks = this.player.remoteTextTracks();
for (let i = remoteTextTracks.length - 1; i >= 0; i -= 1) {
    
    remoteTextTracks[i].activeCues_.forEach((val, key) => {
        delete remoteTextTracks[i].activeCues_[key];
    });

    remoteTextTracks[i].cues_.forEach((val, key) => {
        delete remoteTextTracks[i].cues_[key];
    });

    if (!isNil(remoteTextTracks[i].lastCue)) {
        delete remoteTextTracks[i].lastCue;
    }

    this.player.removeRemoteTextTrack(remoteTextTracks[i]);
}

All the items had to be deleted individually to free up the memory, many other solutions weren't helpful at all.

But after further investigation due to other memory leaks, I ended up with this - the issue was caused by Vue Dev Tools, after disabling it everything seemed okay.

Actually, the memory leak existed in the production and it was fixed by approach from the question but because of active Vue Dev Tools, I wasn't aware I fixed it. :|