CODEWITHSUNDEEP
javascripthtmlvideo.jshttp-live-streaming
CodeDezk
CodeDezk

Reputation: 1260

Videojs HLS Live longtime play memory issue

I am creating video player using video-js HLS to play HLS Live video. I am creating 16 video player and connecting 16 different HLS live url at the same time. Below is the java-script part to create video element. 

  var video = document.getElementById("video_id");


  var player = videojs(video,{hls:{ bandwidth: 102400,enableLowInitialPlaylist:true}});
                 player.src({
                 src: videoURL,
                 type: 'application/x-mpegURL',
                 withCredentials: false
                });

The code works fine and the RAM usage is about 33-400 MB, but the problem is that as times goes the memory usage(RAM) is getting increased gradually, and after about 2-3 hours the RAM reaches more than 2GB and the browser crash due to memory problem.

I have tried a method to reduce this issue like, destroy all player in an interval of 15 minutes and create new player and reconnect the live feed. This has some effect on the code when doing the step them RAM usage is reducing but it's about 400-500 MB, that means the memory usage is still increasing on each 15 minutes cycle, and it's reach on 2GB after 5-6 hours and browser crashes.

Here is the code of deleting video playes

    var videoElement =  document.getElementById(video_id);
    if (typeof(videoElement) != 'undefined' && videoElement != null){
        var player =  videojs(video_id);
        player.dispose();
    }

What could be the reason, is the any cache storage in Live play also, if so how I can clear memory.

Upvotes: 4

Views: 2397

Answers (1)

chendu
chendu

Reputation: 838

After a run of two hours, the videojs memory footprint was oscillating between 200MB to 250MB when live streaming a single hls video.

Looks like there are a ton of parameters which have to be explored and configured. The default values are badly set.

window.addEventListener("offline", (e) => window.location.reload());
      
        this.instanceId = new Date().getTime();
       
        videojs.registerPlugin("hlsQualitySelector", qualitySelector);
     
        this.player = videojs(
            this.videoNode,
            {
                techOrder: ["html5", "flash", "other supported tech"],
                liveui: true,
                autoPlay: "muted",
                controls: true,
               
                html5: {
                    hlsjsConfig: {
                    enableWorker: true,
                    liveBackBufferLength: 15,
                    backBufferLength: 15,
                    liveMaxBackBufferLength: 15,
                    maxBufferSize: 0, 
                    maxBufferLength: 10,
                    liveSyncDurationCount: 1,
                    },
                },
            },
            function onPlayerReady() {
                this.play();
            },
        );
        
        this.player.hlsQualitySelector({ displayCurrentQuality: true });

Upvotes: 3

Related Questions