浏览器flv.js实时播放rtsp转码视频，浏览器内存泄露问题排查并解决

云游遍天下2024-07-02 12:39

背景：

由于浏览器无法直接播放rtsp协议，需要通过转码服务进行推送给前端，技术采用的转码服务+websocket+flv进行浏览器播放，有很多现场都没有出现浏览器崩溃的情况，最近遇到一个现场反馈说系统经常崩溃，无法打开，最后排查的原因是客户的浏览器直接崩溃了，经过和客户沟通复现这一过程，反向客户有个使用习惯，打开实时视频不会关闭，也不会刷新，就一直播放；这时就针对这个视频播放模块排查，发现浏览器内存持续增加，不会主动释放，页面刷新后，浏览器内存就下来了，这时怀疑内存泄露了，至于其他现场没问题，应该是打开一会就主动关闭了，所以间接没出现这个问题，既然问题出现了，就行优化：

在我的理解，由于websocket一直在推送视频流，说明播放器绝对有个缓存数据用来缓冲视频流数据，应该是这块数据缓冲区没有来的及进行释放，然后问题反馈到前端负责人，最后排查确实是这个原因，由于flvjs用的是bilibili的 flvjs，查看了相关文档确实有这块的设置，我把部分设置拿出来：

bash 复制代码

 flvOptionalConfig: {
          enableWorker: true,
          enableStashBuffer: true, //启用缓存
          stashInitialSize: 4096, //缓存大小4m
          lazyLoad: false,
          lazyLoadMaxDuration: 40 * 60,
          autoCleanupSourceBuffer: true,
          autoCleanupMaxBackwardDuration: 3 * 60,
          autoCleanupMinBackwardDuration: 1 * 60,
        }

这里配置有三个比较重要的：

autoCleanupSourceBuffer: true,

是否开启自动处理

autoCleanupMaxBackwardDuration: 3 * 60,

当向后缓冲区持续时间超过此值(以秒为单位)时，对SourceBuffer执行自动清理

autoCleanupMinBackwardDuration: 1 * 60,

指示在执行自动清理时为向后缓冲区保留的持续时间(以秒为单位)。

如果采用其他的组件，原理应该都差不过，自行阅读文档或者源码进行设置