為什么這個時候要探索flv.js進行直播？原因是各大瀏覽器廠商默認禁用了Flash，之前常見的Flash直播方案都要求用戶同意使用Flash后才能正常使用直播功能，這是一種致命的用戶體驗。

在介紹flv.js之前，我們將介紹常見的直播協(xié)議，并給出它們的延遲和性能測試數(shù)據(jù)。如果你認真看，可以先了解一些音視頻技術的基本概念。

常見的直播協(xié)議

RTMP:底層基于TCP，瀏覽器端依賴Flash。

HTTP-FLV:基于HTTP流IO，F(xiàn)LV播放依賴瀏覽器支持。

WebSocket-FLV:基于WebSocket傳輸FLV，依靠瀏覽器支持播放FLV。WebSocket是建立在HTTP之上的，在WebSocket連接建立之前必須建立HTTP連接。

HLS: Http直播。蘋果提出了一種基于HTTP的流媒體傳輸協(xié)議。HTML5可以打開直接播放。

RTP:基于UDP，延遲1秒，瀏覽器不支持。

常見直播協(xié)議延遲與性能數(shù)據(jù) 以下數(shù)據(jù)只做對比參考傳輸協(xié)議播放器延遲內(nèi)存CPURTMPFlash1s430M11%HTTP-FLVVideo1s310M4.4%HLSVideo20s205M3%

在支持瀏覽器的協(xié)議中，延遲排序是:

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

績效排名正好相反:

RTMP & gt；FLV；流媒體

也就是說延遲小的性能不好。

可以看出，在瀏覽器中使用HTTP-FLV協(xié)議進行直播是不錯的，性能比RTMP+Flash好，延時可以和RTMP+Flash一樣甚至更好。

flv.js簡介

Flv.js是來自Bilibli的開源項目。它解析FLV文件，并將它們饋送到本機HTML5視頻標簽，以播放音頻和視頻數(shù)據(jù)，這使得瀏覽器無需使用閃存即可播放FLV。

flv.js的優(yōu)點

因為瀏覽器用硬件加速原生視頻標簽，所以性能好，支持高清。

支持同時錄音和直播

擺脫對Flash的依賴

flv.js 限制

FLV包含的視頻編碼必須是H.264，音頻編碼必須是AAC或MP3。IE11和Edge瀏覽器不支持MP3音頻編碼，所以FLV采用的編碼最好是H.264+AAC，讓音視頻服務兼容不是問題。

對于錄制和廣播，它取決于本機HTML5視頻標簽和媒體源擴展

對于直播，它取決于錄制和廣播所需的播放技術，也取決于傳輸FLV的HTTP FLV或WebSocket協(xié)議之一。HTTP FLV需要通過流IO拉數(shù)據(jù)，流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格式的音視頻數(shù)據(jù)后，通過原生JS解碼flv數(shù)據(jù)，然后通過Media Source ExtensionsAPI饋入原生HTML5 Video標簽。

為什么FLV.js繞過去，從服務器上獲取FLV，解碼轉(zhuǎn)換，然后饋入Video標簽？原因如下：

兼容當前直播方案:目前大部分直播方案的音視頻服務都使用FLV容器格式傳輸音視頻數(shù)據(jù)。

與MP4格式相比，F(xiàn)LV容器格式更簡單、更快、解析更方便。

flv.js兼容方案

目前flv.js的兼容性不是很好，所以在產(chǎn)品中使用時要考慮不支持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實戰(zhàn)

說了這么多介紹和原理，我就教你怎么用flv.js搭建一個完整的直播系統(tǒng)，我搭建了一個演示給大家體驗。

建立音頻和視頻服務

錨被推送到音頻和視頻服務，并且音頻和視頻服務被轉(zhuǎn)發(fā)到所有連接的客戶端。為了讓你快速構建一個服務，我推薦用go語言實現(xiàn)的Live go，因為它可以在任何操作系統(tǒng)上運行。

下載livego，注意選擇自己的操作系統(tǒng)和位數(shù)。

解壓，執(zhí)行l(wèi)ivego，服務就會啟動。它啟動錨推送的RTMP服務和回放的http-flv服務。

實現(xiàn)播放頁面

使用react flv.js組件reflv在react系統(tǒng)中快速實現(xiàn)。首先安裝npm i reflv，然后編寫代碼:

讓上面的代碼在瀏覽器中運行。這是因為你還沒看過直播，因為沒有主播推流。

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

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

flv.js延遲優(yōu)化

根據(jù)上面的教程，直播延時約為3秒，優(yōu)化后可以達到1秒。在教你如何優(yōu)化之前，先介紹一下直播操作流程:

主播終端采集一段時間的原始音視頻數(shù)據(jù)后，由于原始音視頻數(shù)據(jù)龐大，需要先壓縮數(shù)據(jù):

H264視頻編碼壓縮數(shù)據(jù)

通過PCM音頻編碼壓縮音頻AAC數(shù)據(jù)

壓縮后，壓縮的數(shù)據(jù)被封裝成FLV容器格式，以形成一個FLV標簽

FLV TAG通過RTMP協(xié)議推送到音視頻服務器，音視頻服務器解析來自RTMP協(xié)議的FLV TAG。

音視頻服務器通過HTTP協(xié)議和與瀏覽器建立的長鏈接流將FLV標簽傳輸給瀏覽器。

flv.js獲取flv標簽，分析壓縮的音頻和視頻數(shù)據(jù)，并將其饋送到視頻進行播放。

一旦我們知道了流程，我們就知道在哪里進行優(yōu)化:

主播終端采集時，采集一段時間的音視頻原始數(shù)據(jù)，專業(yè)名稱為GOP?？s短采集時間可以優(yōu)化延時，但缺點是視頻壓縮率不高，傳輸效率低。

關閉音視頻服務器的I幀緩存可以優(yōu)化延時，但缺點是用戶看到直播第一屏的時間變長。

減少音視頻服務器的緩沖區(qū)可以優(yōu)化延遲，但缺點是音視頻服務器的處理效率降低。

減少瀏覽器端flv.js的緩沖區(qū)可以優(yōu)化延遲，但缺點是瀏覽器端處理效率降低。

瀏覽器打開flv.js的Worker，運行flv.js的多進程可以提高解析速度，優(yōu)化延遲。flv.js的配置代碼是:

下面是優(yōu)化后的完整代碼

隨時關注更多前端干貨文章！

▼

微信:IMWebTech