react/vue使用flv.js做直播流，解决断流重连&跳帧

1.以前有个老项目用的flash，由于现在谷歌不支持flash故而更改用http流，采用flv.js来加载 .flv。由于视频长期播放会出现视频延时或者卡顿断流，本文就解决此问题。

2.引入flv.js
import flv from 'flv.js'
3.根据github.com中flv.js的介绍，以及相关配置，可以配置相关一些内容：地址：https://github.com/bilibili/flv.js/blob/master/docs/api.md，可根据项目自行配置。以下是个人配置：

 let flvPlayer
 let videoElement = window.document.getElementById(id)//video的id
        flvPlayer = flv.createPlayer({
            type: 'flv',// 指定视频类型
            url: relUrl, // 指定流链接
            "isLive": isLive,// 开启直播
            hasAudio: false,  // 关闭声音
            cors: true,  // 开启跨域访问
            duration:0,
            currentTime:0,
        },{
            autoCleanupSourceBuffer:true,//对SourceBuffer进行自动清理
            autoCleanupMaxBackwardDuration:12,//    当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
            autoCleanupMinBackwardDuration:8,//指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            isLive: true,
            lazyLoad: false,
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();

4.上面配置好后，我们可以正常开始直播，但是由于视频会延时，为保证实时性，可以做跳帧操作

//用于视频延时，超过1分钟，就关闭当前流且重新拉流； 每2s循环监听一次
            let timer =setInterval(() => { // ->注意：这里的定时器，在中断视频时，要清理哦
                if (flvPlayer.buffered && flvPlayer.buffered.length) {
                    let end = flvPlayer.buffered.end(0);//获取当前buffered值
                    let diff = end - flvPlayer.currentTime;//获取buffered与currentTime的差值
                    if (diff >= 60) {//如果差值大于等于60s 手动跳帧 这里可根据自身需求来定
                        //单个视频用
                        // flvPlayer.currentTime = end;//手动跳帧
                        // flvPlayer.currentTime = flvPlayer.buffered.end(0);//手动跳帧

                        //多个视频用
                        clearInterval(timer)
                        flvPlayer.pause();
                        flvPlayer.unload();
                        flvPlayer.detachMediaElement();
                        flvPlayer.destroy();
                        flvPlayer= null;
                        //重新加载当前停止的视频流，根据个人的方法来配置
                        player(id ,relUrl ,isLive, cameraId)
                    }
                }
            }, 2000); //2000毫秒执行一次

5.延时的问题通过跳帧的方法解决了，但是如果视频卡顿导致流断了，那就重连，如下

  flvPlayer.on(flv.Events.ERROR, (errorType, errorDetail, errorInfo) => {
                //视频出错后销毁重新创建
                if (flvPlayer) {
                    clearInterval(timer)
                    flvPlayer.pause();
                    flvPlayer.unload();
                    flvPlayer.detachMediaElement();
                    flvPlayer.destroy();
                    flvPlayer= null;
                    //重新加载当前停止的视频流，根据个人的方法来配置
                    player(id ,relUrl ,isLive, cameraId)
                }
            });