flv.js 怎么实现断流自动重连与异常恢复

设想在一个无人值守的实时视频监控大屏或高频互动直播场景中，前端采用 flv.js 拉取 HTTP-FLV 数据流。当推流端网络闪断 3 秒、或者边缘 CDN 节点因高可用漂移重置连接时，播放器画面会突然停滞，控制台抛出 NetworkError (status 502/404) 或 MEDIA_MSE_ERROR。此时若不进行任何干预，播放器便直接瘫痪；如果直接粗暴调用 player.play()，也会因为底层的 MediaSource 管道处于崩溃状态而毫无效果。要彻底解决断流自动重连与异常恢复，核心路径在于：搭建一套状态机驱动的生命周期托管器，在截获错误或静默卡死后，执行“暂停、卸载、解绑、销毁”四步资源彻底释放，再配合指数退避调度机制创建全新播放器实例，并在起播时执行低延迟追帧对齐。

一、底层流水线与断流失效机理

flv.js 并不是原生 HTML5 视频解码器，它的本质是一个运行在 JavaScript 主线程中的“转封装引擎”（Remuxer）。了解它的运行流水线，是设计稳健重连机制的前提。

flv.js 通过 Fetch API 或 moz-chunked-arraybuffer 建立流式 HTTP 连接，分段接收二进制 FLV 数据块；随后内部的 Demuxer 解析 FLV Tag（音频 AAC、视频 AVC/H.264 及元数据）；再由 Remuxer 将其动态封装为符合 ISO BMFF 规范的 fMP4（Fragmented MP4）切片；最后通过 W3C 标准的 MSE（Media Source Extensions）API 将切片追加（appendBuffer）到 SourceBuffer 队列中，交由原生 <video> 标签硬解渲染。

图 1：flv.js 核心数据流水线与四大异常感知拦截点架构图

二、四大异常类型拦截与“静默断流”探测

实现高可用重连的前提是准确感知异常。在实际生产网络中，播放中断并不会总是主动抛出显式报错，我们需要综合两类探测手段：原生事件监听与业务层进度心跳。

1. 原生错误事件拦截

flv.js 提供了全局统一的错误监听钩子 flvjs.Events.ERROR。通过回调参数中的 errorType 与 errorDetail，可以精准区分错误层级：

• NETWORK_ERROR（网络链路错误）：包含 NETWORK_STATUS_CODE_INVALID（HTTP 4xx/5xx）、NETWORK_TIMEOUT（请求握手超时）、NETWORK_UNRECOVERABLE_EARLY_EOF（连接被服务端非正常切断）。此类错误绝大多数源自推流侧临时断网或 CDN 链路抖动，是重连的核心目标。
• MEDIA_ERROR（媒体解析错误）：包含 MEDIA_MSE_ERROR（SourceBuffer 追加失败或显存 Quota 溢出）、MEDIA_FORMAT_UNSUPPORTED（推流编码不合规）、MEDIA_FORMAT_MALFORMED（FLV Tag 二进制结构破损）。对于时间戳跳变或解析错位，重建实例往往能有效复位。

2. 隐蔽的“静默断流”（Silent Stalling）心跳守卫

最棘手的问题往往是没有报错的“卡死”。当主播端直接强拔网线、或者某些特定网络代理卡死时，TCP 链路尚未达到系统的 keep-alive 超时，HTTP 连接一直保持 open 状态，但服务端已经没有任何字节下发。此时 flv.js 不会抛出任何 NETWORK_ERROR，<video> 元素直接停留在最后一帧。

针对静默断流，必须在业务层引入 currentTime 进度心跳巡检：每隔 1 秒读取一次 video.currentTime，若在视频处于非暂停（!video.paused）且未处于页面切后台挂起状态下，连续 3 秒当前播放时间没有丝毫推进，且缓冲队列（video.buffered）已消耗殆尽，即可判定流已僵死，主动调用重连触发器。

三、重连状态机设计与四步安全卸载

自动化重连如果处理不当，极易引发严重问题：例如错误事件与心跳同时触发导致多次重复重建，或者老实例未完全销毁造成 MSE 内存泄漏、浏览器标签页崩溃。因此必须使用严格的状态机管理整个周期。

图 2：flv.js 断流自愈状态机与完整销毁重建闭环流程图

四步安全销毁顺序（防内存泄漏）

在创建新播放器之前，对旧实例的清理必须严格遵循以下四步次序：

1. player.pause()：通知底层停止消费，切断音视频驱动时钟。
2. player.unload()：取消挂起中的 fetch/xhr 请求，中断流传输网络循环。
3. player.detachMediaElement()：将 MSE 管道与原生 <video> 节点解绑，解除原生 DOM 事件挂载。
4. player.destroy()：释放 Demuxer 内存缓存、清空 SourceBuffer，将实例置为 null，触发垃圾回收。

四、生产级自动化重连控制器代码实现

以下是一套经过高并发生产环境验证的完整控制器类 FlvLiveController。它集成了状态互斥锁、指数退避调度、静默断流心跳以及低延迟追帧处理：

/**
 * 生产级 flv.js 直播流生命周期与自愈控制器
 */
class FlvLiveController {
  constructor(videoElement, streamUrl, options = {}) {
    this.video = videoElement;
    this.streamUrl = streamUrl;
    this.options = Object.assign({
      maxRetries: 8,          // 最大重试次数
      baseDelay: 1000,        // 基础退避时间 (ms)
      maxDelay: 10000,        // 最大重试间隔 (ms)
      stallTimeout: 3500,     // 卡顿心跳超时阈值 (ms)
    }, options);

    this.player = null;
    this.retryCount = 0;
    this.isReconnecting = false;
    this.heartbeatTimer = null;
    this.lastCurrentTime = 0;
    this.stallStartTime = 0;
    this.isManualPaused = false;

    this.init();
  }

  // 初始化并创建播放器
  init() {
    if (!flvjs.isSupported()) {
      console.error('[flv-controller] 当前浏览器不支持 MSE / flv.js');
      return;
    }
    this.createPlayer();
    this.startHeartbeat();
  }

  // 创建并装配 flv.js 实例
  createPlayer() {
    this.destroyCurrentPlayer();

    this.player = flvjs.createPlayer({
      type: 'flv',
      isLive: true,
      url: this.streamUrl,
      hasAudio: true,
      hasVideo: true,
    }, {
      enableWorker: true,            // 启用 Web Worker 提高解封装性能
      enableStashBuffer: false,      // 直播场景关闭缓存，追求低延迟
      stashInitialSize: 128,         // 初始缓存大小 128KB
      lazyLoad: false,               // 关闭懒加载
      autoCleanupSourceBuffer: true, // 自动修剪历史 SourceBuffer，防内存撑爆
    });

    this.player.attachMediaElement(this.video);
    this.bindEvents();

    this.player.load();
    const playPromise = this.player.play();
    if (playPromise !== undefined) {
      playPromise.catch(err => {
        console.warn('[flv-controller] 自动起播失败 (可能受浏览器自动播放策略限制):', err);
      });
    }
  }

  // 绑定全局异常与生命周期监听
  bindEvents() {
    if (!this.player) return;

    this.player.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
      console.warn(`[flv-controller] 捕获异常: ${errorType} | 详情: ${errorDetail}`, errorInfo);
      this.handleStreamFailure(`ErrorEvent: ${errorType}`);
    });

    // 监听起播成功事件，当视频稳定播流 5 秒后，重置重试计数器
    this.video.addEventListener('playing', this.onPlayingSuccess);
  }

  onPlayingSuccess = () => {
    setTimeout(() => {
      if (this.player && !this.video.paused && !this.isReconnecting) {
        this.retryCount = 0;
        this.isReconnecting = false;
      }
    }, 5000);
  };

  // 统一故障处理入口 (带防并发互斥锁)
  handleStreamFailure(reason) {
    if (this.isReconnecting || this.isManualPaused) {
      return;
    }
    this.isReconnecting = true;

    if (this.retryCount >= this.options.maxRetries) {
      console.error(`[flv-controller] 已达到最大重试次数 (${this.options.maxRetries})，放弃自动恢复`);
      this.destroyCurrentPlayer();
      return;
    }

    // 计算指数退避时间：Math.min(baseDelay * 2^retryCount, maxDelay)
    const delay = Math.min(
      this.options.baseDelay * Math.pow(2, this.retryCount),
      this.options.maxDelay
    );
    this.retryCount++;
    console.log(`[flv-controller] 触发断流自愈 (原因: ${reason})，将在 ${delay}ms 后执行第 ${this.retryCount} 次重连...`);

    // 立即执行老实例四步拆卸
    this.destroyCurrentPlayer();

    setTimeout(() => {
      if (!this.isManualPaused) {
        this.createPlayer();
        this.isReconnecting = false;
      }
    }, delay);
  }

  // 静默断流心跳巡检器
  startHeartbeat() {
    this.stopHeartbeat();
    this.heartbeatTimer = setInterval(() => {
      if (!this.player || this.video.paused || this.isReconnecting || this.isManualPaused) {
        return;
      }

      const current = this.video.currentTime;
      // 检查播放进度是否停滞
      if (current === this.lastCurrentTime) {
        const now = Date.now();
        if (!this.stallStartTime) {
          this.stallStartTime = now;
        } else if (now - this.stallStartTime > this.options.stallTimeout) {
          console.warn('[flv-controller] 检测到画面静默卡死超限，判定为网络断流');
          this.stallStartTime = 0;
          this.handleStreamFailure('SilentStall');
        }
      } else {
        this.lastCurrentTime = current;
        this.stallStartTime = 0;
      }

      // 直播低延迟追帧：若累积延迟大于 3 秒，强制跳跃至最新边缘
      this.catchUpLiveEdge();
    }, 1000);
  }

  // 低延迟追帧：跳跃缓冲区至 Live Edge
  catchUpLiveEdge() {
    if (this.video.buffered.length > 0) {
      const end = this.video.buffered.end(this.video.buffered.length - 1);
      const diff = end - this.video.currentTime;
      if (diff > 3.0) {
        console.log(`[flv-controller] 缓冲区积压延迟 ${diff.toFixed(2)} 秒，执行追帧对齐`);
        this.video.currentTime = end - 0.2;
      }
    }
  }

  stopHeartbeat() {
    if (this.heartbeatTimer) {
      clearInterval(this.heartbeatTimer);
      this.heartbeatTimer = null;
    }
  }

  // 严格按序释放资源，防止内存泄漏
  destroyCurrentPlayer() {
    if (this.player) {
      try {
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
      } catch (e) {
        console.warn('[flv-controller] 卸载旧播放器发生异常 (通常可安全忽略):', e);
      } finally {
        this.player = null;
      }
    }
  }

  // 外部销毁接口
  dispose() {
    this.isManualPaused = true;
    this.stopHeartbeat();
    this.video.removeEventListener('playing', this.onPlayingSuccess);
    this.destroyCurrentPlayer();
  }
}

五、不同异常维度的恢复策略对比

面对网络瞬断、编码格式破坏或后台挂起，恢复策略的重点各不相同。下表展示了三类典型故障的排查与恢复差异：

图 3：网络断流、媒体解码错与静默假死的识别及处置策略对比矩阵

六、低延迟直播中的“追帧自愈”与缓冲调优

在网络重连恢复后，许多开发者常发现一个新问题：重新起播后，直播画面的延迟变得极大（甚至滞后真实画面 10 余秒）。这是因为浏览器在断流重连期间可能积存了尚未播放的陈旧切片，或者服务器下发了包含较长 GOP 缓存的历史数据。

解决重连后延迟积累的配置原则与动作如下：

• 关闭多余缓存（enableStashBuffer: false）：对于低延迟实时流，禁用 flv.js 的内存预存机制，将 stashInitialSize 压缩至 128KB 甚至 64KB，收到数据后第一时间丢入 MSE。
• 动态追帧跳转（Live Edge Seek）：如控制器中的 catchUpLiveEdge() 函数所示，定时检查 video.buffered.end() - video.currentTime 的间距。一旦发现延迟落后超过阈值（如 2.5 秒），直接执行 video.currentTime = video.buffered.end(0) - 0.2，瞬间将画面拉回最新现场。
• 轻微加速追赶（PlaybackRate Catch-up）：若业务要求画面平滑、不可发生跳帧（如教学直播），当延迟在 1 到 3 秒之间时，可将 video.playbackRate 临时设置为 1.15 倍速，当延迟恢复到 0.8 秒以内时恢复 1.0 倍速。

七、全链路自愈与容灾体系总结

在企业级大规模推拉流架构中，单一播放器的重试逻辑只是客户端防线的一环。完整的自愈体系涵盖了“感知、决策、自愈、容灾”四个层级：

图 4：flv.js 生产级全链路自愈与容灾防护体系全景架构图