使用flv.js直播的时候优化的方案

1. 前言

最近在处理前端直播的业务，根据业务需要，使用 flv.js 的方案播放实时的flv视频流。不得不承认，flv.js 是一个伟大的库。

在使用flv.js开发的过程中，遇到了一些问题，也无外乎是视频延迟，视频卡顿等问题，经过在github issues里摸爬滚打，加上长时间的试错，将这些问题归纳出了对应的解决方案，也自己封装了一个扩展插件 flvExtend。

于是写这篇文章来对我遇到的一些问题进行总结，我提出的解决方案不一定适合所有场景，如果有更好的解决方案，欢迎讨论，这也是我写这篇文章的目的，也是我写文章的初心。

2. 前端直播

在讲解 flv.js 的优化方案之前，我想先简单的介绍一下前端直播的方案，为什么要使用 flv.js，方便大家理解以及作为一项技术来储备。

2.1 常见直播协议

• RTMP: 底层基于 TCP，在浏览器端依赖 Flash。
• HTTP-FLV: 基于 HTTP 流式 IO 传输 FLV，依赖浏览器支持播放 FLV。
• WebSocket-FLV: 基于 WebSocket 传输 FLV，依赖浏览器支持播放 FLV。WebSocket 建立在 HTTP 之上，建立 WebSocket 连接前还要先建立 HTTP 连接。
• HLS: Http Live Streaming，苹果提出基于 HTTP 的流媒体传输协议。HTML5 可以直接打开播放。
• RTP: 基于 UDP，延迟 1 秒，浏览器不支持。

可以看到，在浏览器端，可以考虑的方案有：HTTP-FLV、WebSocket-FLV 以及 HLS， 我们可以对比一下这几个直播协议之间的性能：
（以下数据来源于网络，只做对比参考）

传输协议	播放器	延迟	内存	CPU
RTMP	Flash	1s	430M	11%
HTTP-FLV	Video	1s	310M	4.4%
HLS	Video	20s	205M	3%

可以看出在浏览器里做直播，使用 HTTP-FLV 协议是不错的，性能优于 RTMP+Flash，延迟可以做到和 RTMP+Flash 一样甚至更好。

2.2 flv.js 的原理

flv