Flv.js 直播简单？延迟和卡顿你怎么处理( 二 ) _Flv.js

实际的缓存时间会根据网络情况动态变化，值的范围在上述两个配置项之间。
处理卡顿关键 —— 断流检测直播是实时流播放，任何一个环节出现异常，都会导致直播卡顿、出现黑屏等现象。这是因为实时拉取的流数据断开了，我们称之为“断流” 。
多数情况下的断流都是网络原因导致，此时可能需要提醒用户“当前网络拥堵”、或者显示“直播加载中”的字样，告诉用户发生了什么。
而实现这些功能的前提，必须要知道流什么时候断开，我们就需要做“断流检测” 。
mpegts.js 提供了几个内置事件来监听直播的状态，常用如下：

mpegts.Events.ERROR：出现异常事件。
mpegts.Events.LOADING_COMPLETE：流结束事件。
mpegts.Events.STATISTICS_INFO：流状态变化事件。

前两个事件分别会在出现异常和直播结束的时候触发，监听方法如下：

let player = mpegts.createPlayer({...})player.on(mpegts.Events.ERROR, e=> {console.log('发生异常')});player.on(mpegts.Events.LOADING_COMPLETE, (e) => {console.log("直播已结束");});

当未发生异常、且直播未结束的情况下，我们就需要监听直播卡顿。通过监听 STATISTICS_INFO 事件来实现。
首先科普一下：播放器在播放直播时需要实时解码，每一帧画面过来，就需要解码一次。当直播卡顿时，没有画面过来，解码也会暂停，因此可以通过已解码的帧数来判断是否卡顿。
STATISTICS_INFO 事件的回调函数参数中，有一个 decodedFrames 属性，正是表示当前已解码的帧数，我们来看一下：

player.on(mpegts.Events.STATISTICS_INFO, (e) => {console.log("解码?。?quot;e.decodedFrames); // 已经解码的帧数});

在直播过程中，上述回调函数会一直执行，打印结果如下：

文章插图
可以看到，解码帧一直在递增，表示直播正常。
当直播卡顿时，打印结果是这样的：

文章插图
【Flv.js 直播简单？延迟和卡顿你怎么处理】解码帧连续 9 次卡在了 904 一个数值不变，这是因为直播卡顿了，没有画面需要解码。
所以，判断卡顿的方法是将上一次的解码帧与当前解码帧做对比，如果值一致则出现了卡顿。
当然轻微的卡顿不需要处理。我们可以将连续 N 次出现相同的解码帧视为一次卡顿，然后执行自己的业务逻辑。
当解码帧的值长时间没有变化时，我们可以视为推流已结束，此时可以主动结束直播。