flv 理论 | 使用flv.js做直播

为什么这个时候要探索flv.js进行直播？原因是各大浏览器厂商默认禁用了Flash，之前常见的Flash直播方案都要求用户同意使用Flash后才能正常使用直播功能，这是一种致命的用户体验。

在介绍flv.js之前，我们将介绍常见的直播协议，并给出它们的延迟和性能测试数据。如果你认真看，可以先了解一些音视频技术的基本概念。

常见的直播协议

RTMP:底层基于TCP，浏览器端依赖Flash。

HTTP-FLV:基于HTTP流IO，FLV播放依赖浏览器支持。

WebSocket-FLV:基于WebSocket传输FLV，依靠浏览器支持播放FLV。WebSocket是建立在HTTP之上的，在WebSocket连接建立之前必须建立HTTP连接。

HLS: Http直播。苹果提出了一种基于HTTP的流媒体传输协议。HTML5可以打开直接播放。

RTP:基于UDP，延迟1秒，浏览器不支持。

常见直播协议延迟与性能数据 以下数据只做对比参考传输协议播放器延迟内存CPURTMPFlash1s430M11%HTTP-FLVVideo1s310M4.4%HLSVideo20s205M3%

在支持浏览器的协议中，延迟排序是:

RTMP = HTTP-FLV = web socket-FLV & lt；流媒体

绩效排名正好相反:

RTMP & gt；FLV；流媒体

也就是说延迟小的性能不好。

可以看出，在浏览器中使用HTTP-FLV协议进行直播是不错的，性能比RTMP+Flash好，延时可以和RTMP+Flash一样甚至更好。

flv.js简介

Flv.js是来自Bilibli的开源项目。它解析FLV文件，并将它们馈送到本机HTML5视频标签，以播放音频和视频数据，这使得浏览器无需使用闪存即可播放FLV。

flv.js的优点

因为浏览器用硬件加速原生视频标签，所以性能好，支持高清。

支持同时录音和直播

摆脱对Flash的依赖

flv.js 限制

FLV包含的视频编码必须是H.264，音频编码必须是AAC或MP3。IE11和Edge浏览器不支持MP3音频编码，所以FLV采用的编码最好是H.264+AAC，让音视频服务兼容不是问题。

对于录制和广播，它取决于本机HTML5视频标签和媒体源扩展

对于直播，它取决于录制和广播所需的播放技术，也取决于传输FLV的HTTP FLV或WebSocket协议之一。HTTP FLV需要通过流IO拉数据，流IO支持取或流

flv.min.js的文件大小是164Kb，g之后是35.5Kb，和g之后的flash播放器差不多。

目前iOS和Android4.4.4下的浏览器都不支持，因为依赖Media Source Extensions，这意味着目前不能在移动终端上使用flv.js。

flv.js依赖的浏览器特性兼容列表

HTML5视频

媒体源扩展

WebSocket

FLV:取还是流

flv.js原则

FLV。js只做了一件事，在获得FLV格式的音视频数据后，通过原生JS解码flv数据，然后通过Media Source ExtensionsAPI馈入原生HTML5 Video标签。

为什么FLV.js绕过去，从服务器上获取FLV，解码转换，然后馈入Video标签？原因如下：

兼容当前直播方案:目前大部分直播方案的音视频服务都使用FLV容器格式传输音视频数据。

与MP4格式相比，FLV容器格式更简单、更快、解析更方便。

flv.js兼容方案

目前flv.js的兼容性不是很好，所以在产品中使用时要考虑不支持flv.js的浏览器。兼容性方案如下:

电脑端

先用HTTP-FLV，因为延迟小，性能好。1080P很流畅。

如果不支持flv.js，请使用Flash player播放RTMP流。Flash兼容性很好，但是性能差很多浏览器默认禁用。

如果不想用Flash兼容也可以用HLS，但是只有Safari在PC端支持HLS

移动终端

先用HTTP-FLV，因为延迟小，支持HTTP-FLV的设备运行flv.js就够了。

如果不支持flv.js，使用HLS，但是HLS延迟很大。

如果HLS不支持，就不能直播，因为移动终端不支持Flash。

flv.js实战

说了这么多介绍和原理，我就教你怎么用flv.js搭建一个完整的直播系统，我搭建了一个演示给大家体验。

建立音频和视频服务

锚被推送到音频和视频服务，并且音频和视频服务被转发到所有连接的客户端。为了让你快速构建一个服务，我推荐用go语言实现的Live go，因为它可以在任何操作系统上运行。

下载livego，注意选择自己的操作系统和位数。

解压，执行livego，服务就会启动。它启动锚推送的RTMP服务和回放的http-flv服务。

实现播放页面

使用react flv.js组件reflv在react系统中快速实现。首先安装npm i reflv，然后编写代码:

让上面的代码在浏览器中运行。这是因为你还没看过直播，因为没有主播推流。

可以使用OBS推送流量，注意配置OBS:

也可以使用ffmpeg推送流，推送流命令ffmpeg-f avfoundation-I " 0 "-vcodech 264-acodec AAC-f flvrtmp://localhost/live/test

flv.js延迟优化

根据上面的教程，直播延时约为3秒，优化后可以达到1秒。在教你如何优化之前，先介绍一下直播操作流程:

主播终端采集一段时间的原始音视频数据后，由于原始音视频数据庞大，需要先压缩数据:

H264视频编码压缩数据

通过PCM音频编码压缩音频AAC数据

压缩后，压缩的数据被封装成FLV容器格式，以形成一个FLV标签

FLV TAG通过RTMP协议推送到音视频服务器，音视频服务器解析来自RTMP协议的FLV TAG。

音视频服务器通过HTTP协议和与浏览器建立的长链接流将FLV标签传输给浏览器。

flv.js获取flv标签，分析压缩的音频和视频数据，并将其馈送到视频进行播放。

一旦我们知道了流程，我们就知道在哪里进行优化:

主播终端采集时，采集一段时间的音视频原始数据，专业名称为GOP。缩短采集时间可以优化延时，但缺点是视频压缩率不高，传输效率低。

关闭音视频服务器的I帧缓存可以优化延时，但缺点是用户看到直播第一屏的时间变长。

减少音视频服务器的缓冲区可以优化延迟，但缺点是音视频服务器的处理效率降低。

减少浏览器端flv.js的缓冲区可以优化延迟，但缺点是浏览器端处理效率降低。

浏览器打开flv.js的Worker，运行flv.js的多进程可以提高解析速度，优化延迟。flv.js的配置代码是:

下面是优化后的完整代码

随时关注更多前端干货文章！

▼

微信:IMWebTech