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

【问题标题】：Videojs HLS Live longtime play memory issueVideojs HLS Live 长时间播放内存问题
【发布时间】：2019-04-16 12:14:33
【问题描述】：

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

  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-400 MB，但问题是随着时间的推移，内存使用量（RAM）逐渐增加，大约 2-3 小时后，RAM 达到 2GB 以上并且由于内存问题导致浏览器崩溃。

我尝试了一种方法来减少此问题，例如每隔 15 分钟销毁所有播放器并创建新播放器并重新连接实时源。这在执行步骤时对代码有一些影响，RAM 使用量正在减少，但大约为 400-500 MB，这意味着内存使用量在每 15 分钟周期内仍在增加，并且在 5-6 小时和浏览器后达到 2GB崩溃。

这里是删除视频播放的代码

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

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

【问题讨论】：

你有答案吗？
嗨 CodeDezk，你解决了这个问题吗？
我现在正在使用 hls.js github.com/video-dev/hls.js

标签： javascript html video.js http-live-streaming

【解决方案1】：

以防万一其他人登陆这里寻找修复程序，以下是帮助我的方法。运行 2 小时后，当直播单个 hls 视频时，videojs 内存占用在 200MB 到 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 });

【讨论】：