轉載請注明出處：https://blog.csdn.net/impingo
項目官網：https://pingos.io
項目位址：https://github.com/im-pingo/pingos
目錄
- 什麼是flv.js
-
- flv.js的原理
- 常見直播協定
- 相容性
- 直播伺服器搭建
- 推流
-
- ffmpeg推流
- OBS推流
- flv.js搭建過程
-
- 下載下傳連結
- flv.js Demo示範
-
- Demo位址：[http://player.pingos.io/flv](http://player.pingos.io/flv)
- 播放器主要參數
- QQ交流群：697773082
什麼是flv.js
HTML5 原生僅支援播放 mp4/webm 格式，是不支援 FLV格式的。
flash性能問題是長期以來被全世界人所诟病的，尤其是明年起chrome徹底抛棄flash，越來越多有直播需求的人産生焦慮。這就加速了html5播放器的發展，也使得人們對html5非插件式的播放器更加渴望。而flv.js就是這麼一款可以利用html5的video标簽将http-flv直播流實時播放的一個js版的播放器。
flv.js的原理
flv.js在擷取到FLV格式的音視訊資料後将 FLV 檔案流轉碼複用成 ISO BMFF（MP4 碎片）片段，再通過Media Source Extensions API 傳遞給原生HTML5 Video标簽進行播放。
flv.js 是使用 ECMAScript 6 編寫的，然後通過 Babel Compiler 編譯成 ECMAScript 5，使用 Browserify 打包。
flv.js 從伺服器擷取FLV再解封裝後轉給Video标簽的原因如下：
- 相容目前的直播方案：目前大多數直播方案的音視訊服務都是采用FLV容器格式傳輸音視訊資料。
- flv格式簡單，相比于MP4格式轉封裝簡單、性能上也占優勢，解析起來更快更友善。
常見直播協定
- 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秒，浏覽器不支援。
相容性
理論上隻要是支援Media Source Extensions和ECMAScript 5的浏覽器都是相容flv.js的，浏覽器對MSE的相容情況如下圖，從圖中可以看出，flv.js的相容性還是非常不錯的。
需要指出的是iPhone版的Safari是不支援MSE的，是以在iPhone上隻有hls是最理想的選擇，而慶幸的是PC版和android版的浏覽器大多都是支援MSE的，也就是說可以利用http-flv直播實作延時較低的效果。
如果你對相容性要求非常高的話，HLS會是非常好的選擇，而并非所有浏覽器版本都支援HLS播放，但是你可以利用另外一個JS播放器項目（video.js）實作全平台的hls直播。後續我會寫一篇專門講解video.js的部落格讨論這個方案。這裡附上一張各個浏覽器對HLS的支援情況：
是以，你可以将flv.js和video.js配合使用，針對不同平台實作最優的方案。
直播伺服器搭建
關于直播伺服器搭建的流程，我在以前的部落格裡寫了很多，感興趣的可以參考分布式直播系統（二）【搭建單點rtmp\http-flv\hls流媒體伺服器】
當然也可以使用我的一鍵部署腳本安裝：
https://github.com/im-pingo/pingos
# 快速安裝
git clone https://github.com/im-pingo/pingos.git
cd pingos
./release.sh -i
# 啟動服務
cd /usr/local/pingos/
./sbin/nginx
推流
ffmpeg推流
ffmpeg -re -i 檔案.mp4 -vcodec copy -acodec copy -f flv rtmp://ip位址/live/01
OBS推流
Open Broadcaster Software（簡稱OBS）是一款直播流媒體内容制作軟體。同時程式和其源代碼都是免費的。
支援 OS X、Windows、Linux作業系統。适用于多種直播場景。滿足大部分直播行為的操作需求（釋出桌面、釋出攝像頭、麥克風、揚聲器等等）。
flv.js搭建過程
下載下傳連結
為了友善使用，我已經将flv.js編譯打包好了，直接下載下傳解壓到你的網站目錄引用即可。
-
可以使用百度雲盤下載下傳
連結: https://pan.baidu.com/s/1ihTo15nsgfLqXKa0vyFt-w
提取碼: gd55
- 也可以從github下載下傳
git clone https://github.com/im-pingo/h5player.git
将h5player複制到你的網站目錄，h5player/flv目錄下有個index.html檔案，這裡是js播放器接口的調用示例，你可以直接利用這個頁面示範。
flv.js Demo示範
Demo位址：http://player.pingos.io/flv
我已經搭建了一個完整的示範界面，你可以快速體驗一把。
- 輸入http-flv的直播位址
- 點選load按鈕即可播放。
使用flv.js快速搭建html5網頁直播什麼是flv.js相容性直播伺服器搭建推流flv.js搭建過程QQ交流群：697773082
播放器主要參數
| 參數 | 描述 |
|---|---|
| enableStashBuffer | 是否開啟播放器端緩存 |
| stashInitialSize | 播放器端緩存 |
| isLive | 是否為直播流 |
| hasAudio | 是否播放聲音 |
| hasVideo | 是否播放畫面 |
QQ交流群：697773082
QQ交流群：697773082