Videojs HLS Live长时间播放内存问题

Question

我正在创建视频播放器使用video-js HLS来播放HLS Live视频。我正在创建16个视频播放器和连接16个不同的HLS直播网址在同一时间。下面是创建视频元素的java-script部分。

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

代码运行良好，RAM使用率约为33-400MB，但问题是随着时间的推移，内存使用量( RAM )逐渐增加，大约2-3小时后，RAM达到2 2GB以上，浏览器因内存问题而崩溃。

我已经尝试了一种方法来减少这个问题，比如，在15分钟的时间间隔内销毁所有播放器，然后创建新的播放器并重新连接实时馈送。这会对代码产生一些影响，因为内存使用量正在减少，但大约是400-500MB，这意味着内存使用量在每15分钟周期内仍在增加，5-6小时后达到2 2GB，浏览器崩溃。

以下是删除视频播放的代码

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

可能的原因是，Live play中的任何缓存存储也是如此，如果是这样，我如何清除内存。

Answer 1

以防其他人在这里寻找修复程序，下面是对我有帮助的。在运行2小时后，当实时流式传输单个200MB视频时，videojs的内存占用在250MB之间振荡。

看起来有一大堆参数需要探索和配置。默认值设置得很糟糕。

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