flv.js解决直播流延迟、断流重连以及画面卡死

视频流延迟

在普通的网络环境下,flv.js播放http-flv的视频流延迟大概在3~5秒左右,对于实时性要求比较高的场景,显然是不适用的,那么怎么才能降低延迟呢? 通过对buffered(缓冲区末尾)和currentTime(当前播放位置)的比较,发现差值大概在1.8秒左右,这时候就需要我们定时检测currentTime和buffered的差值,然后手动跳帧,使currentTime和buffered同步(PS:这两个值在Player对象中可以获取到,可以查看我的上一篇帖子:vue使用flv.js(bilibili)拉流),代码如下:

setInterval(() => {
      if (this.player.buffered.length) {
        let end = this.player.buffered.end(0);//获取当前buffered值
        let diff = end - this.player.currentTime;//获取buffered与currentTime的差值
        if (diff >= 0.5) {//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
          this.player.currentTime = this.player.buffered.end(0);//手动跳帧
       }
      }
    }, 2000); //2000毫秒执行一次  

断流重连

视频直播时,有时候会遇到视频loading,卡顿,有可能是本地网络波动或者服务端流断开,我们可以通过监听flvjs.Events.ERROR来判断连接是否已经断开,继而进行断流重连,代码如下:

this.player.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
		console.log("errorType:", errorType);
        console.log("errorDetail:", errorDetail);
        console.log("errorInfo:", errorInfo);
        //视频出错后销毁重新创建
         if (this.player) {
          this.player.pause();
          this.player.unload();
          this.player.detachMediaElement();
          this.player.destroy();
          this.player= null;
          this.createPlayer(videoElement, this.url);
        }
      });

画面卡死

如果控制台没有错误信息,而且查看network发现视频流没有断开,但是画面一直在loading或者卡住不动,我这边的原因是服务端推流突然断开,然后在很快的时间内继续推流,这个时候因为客户端的超时时间还没有结束,流会继续推送到原链接,这个时候我们的视频会卡在掉线的那个时间,不会继续播放.这个时候我们就需要监听推流的decodedFrame,如果decodedFrame不再发生变化,我们就销毁掉该实例并进行重新连接,代码如下:

this.player.on("statistics_info", function (res) {
       if (this.lastDecodedFrame == 0) {
         this.lastDecodedFrame = res.decodedFrames;
         return;
       }
       if (this.lastDecodedFrame != res.decodedFrames) {
         this.lastDecodedFrame = res.decodedFrames;
       } else {
           this.lastDecodedFrame = 0;
           if (this.player) {
             this.player.pause();
             this.player.unload();
             this.player.detachMediaElement();
             this.player.destroy();
             this.player= null;
             this.createPlayer(videoElement, this.url);
         }
       }
     });