Chrome浏览器通过EasyPlayer播放多路flv视频流后浏览器崩溃是什么原因？

Posted 2021-12-12 TSINGSEE

EasyPlayer播放器系列项目是TSINGSEE青犀视频开发的极具开放性的播放器项目，用户可以根据自己的需求调用接口或者进行开发，实用性强，稳定性也非常优越，很多用户调用EasyPlayer播放器自行做开发或者集成。

在最近在使用@easydarwin/easyplayer播放器过程中播放多路flv流出现的浏览器崩溃问题。经过分析源码发现程序内有个定时器：

this.player.on("ended", () => {
    if (this.live) {
      this.isWaiting = true;
      this.timers = setInterval(this.myTimer, 1000);
  }
});

在播放flv出现断流时，播放触发了定时器，定时器里面实现了播放器的创建和销毁。由于这一步操作短时间创建大量flv流请求，但是播放器并不知道flv流什么时候恢复正常，无法及时销毁这个定时任务。Chrome浏览器最多允许对同一个域名Host建立6个TCP连接，不同的浏览器有所区别，所以才导致浏览器出现崩溃。

如果想实现flv断流重连，可使用最新的easyplayer和保活通道接口配合来初始化播放器和销毁播放器。参考代码如下：

<EasyPlayer
    ref="easyPlayer"
    live
    :aspect="aspect"
    :onDemand="true"
    :autoplay="autoplay"
    v-loading="bLoading"
    :loading.sync="bLoading"
    :videoUrl="oldVideoUrl"
    element-loading-text="加载中..."
    element-loading-background="#000"
    @message="$message"
    fluent
    stretch
    @ended="onPlayEnded"
/>

this.$refs.easyPlayer.initVideoJS();
this.$refs.easyPlayer.destroyVideoJS()