Issue with video.js text track memory leakage (WebVTT/VTT)

Question

Issue with video.js text track memory leakage (WebVTT/VTT)

I am utilizing Video Text Tracks to showcase advanced live information on top of the video.
A new video is loaded every few minutes, each with its own .webvtt file (consisting of 2-3k lines).

Although everything is functioning properly, there is a persistent issue with memory usage increasing continuously.

This problem stems from a memory leak where additional VTTCue and TextTrack records are added for each new video, leading to an accumulation of unnecessary data. https://i.stack.imgur.com/HN3Ln.png

After trying several approaches without success, I find myself stuck with the current method:

The text tracks are implemented according to the guidelines in the Video.js documentation (remote text tracks):

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

And they are removed before disposing of the player:

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

Even though they are successfully removed from the player, they linger in memory. Is there a way to prompt/urge/force the GC to completely eliminate old text tracks?

javascript vue.js memory-leaks garbage-collection video.js

Answer 1

Answer №1

To prevent Video.js' memory leak when working with text tracks, consider implementing the following steps:

if (player && player.remoteTextTracks().length) {
  while (player.remoteTextTracks().length > 0) {
    player.removeRemoteTextTrack(player.remoteTextTracks()[0]);
  }
  player.remoteTextTracks().forEach(function(track) {
    track.src = '';
    player.removeRemoteTextTrack(track);
  });
}

Answer 2

To prevent Video.js' memory leak when working with text tracks, consider implementing the following steps:

if (player && player.remoteTextTracks().length) {
  while (player.remoteTextTracks().length > 0) {
    player.removeRemoteTextTrack(player.remoteTextTracks()[0]);
  }
  player.remoteTextTracks().forEach(function(track) {
    track.src = '';
    player.removeRemoteTextTrack(track);
  });
}

Answer 3

Answer №2

If someone is facing a similar problem and needs a solution, here's what worked for me:

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]);
}

To free up memory, all items had to be deleted individually — other solutions didn't cut it.

After digging deeper due to additional memory leaks, I found out this was the culprit - the issue stemmed from Vue Dev Tools, but disabling it resolved everything.

The memory leak was actually present in production, and though I fixed it using the mentioned method, Vue Dev Tools masked my realization of the fix. :|

Answer 4

If someone is facing a similar problem and needs a solution, here's what worked for me:

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]);
}

To free up memory, all items had to be deleted individually — other solutions didn't cut it.

After digging deeper due to additional memory leaks, I found out this was the culprit - the issue stemmed from Vue Dev Tools, but disabling it resolved everything.

The memory leak was actually present in production, and though I fixed it using the mentioned method, Vue Dev Tools masked my realization of the fix. :|

Issue with video.js text track memory leakage (WebVTT/VTT)

Answer №1

Answer №2

Similar questions

Dealing with checked input type='checkbox' in React - A guide

Simple way to retrieve the first and last date of the current month using Node.js

Issue with datepicker initialization causing format not to work in Bootstrap

Tips for modifying CSS when a user scrolls beyond a specific div

The error encountered is due to an invalid assignment on the left-hand side

Fixing Memory Leaks from Objects Created with NEW Keyword

Implementing long-lasting login functionality in React using JSON Web Tokens

Tips for concealing labels until the submit button is activated

With a tree arrangement flanking the Transfer module on either side

Retrieve the selected value from a specific div element

Should I return X in async functions, or should I return "Promise.Resolve(X)"?

Creating a custom homepage route in Nuxt and Netlify for a dynamic experience

How can a false validation be conducted on knockout js?

Generating various arrays of data

When running the PHP script, the output is shown in the console rather than in the

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

The frequency of database updates exceeds expectations - involving vue.js this.$router.push and express operations

Update the div element without needing to reload the entire page

Carrying over additions in arrays using only Javascript

The table is not visible when using Bootstrap Vue