flv视频流延迟

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

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

flv.js播放文件时，快进卡死

1. flv没有元数据信息，需要使用工具yamdi注入信息
2. 为提供视频的服务增加OPTIONS，比如nginx配置，看一下配置

yamdi官方文档

yamdi -i src.flv -o src_meta.flv

这样操作后，flv在快进时就不卡顿了，以下为nginx配置，增加OPTIONS

server {
......
location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            #
            # Custom headers and headers various browsers *should* be OK with but aren't
            #
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            #
            # Tell client that this pre-flight info is valid for 20 days
            #
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        }  
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
......
}