使用flv.js快速搭建html5網(wǎng)頁直播
時間：2023-07-23 04:15:01 | 來源：網(wǎng)站運營
時間：2023-07-23 04:15:01 來源：網(wǎng)站運營
使用flv.js快速搭建html5網(wǎng)頁直播：
轉(zhuǎn)載請注明出處：https://blog.csdn.net/impingo 項目官網(wǎng)：https://pingos.io 項目地址：https://github.com/im-pingo/pingos什么是flv.js
HTML5 原生僅支持播放 mp4/webm 格式，是不支持 FLV格式的。 flash性能問題是長期以來被全世界人所詬病的，尤其是明年起chrome徹底拋棄flash，越來越多有直播需求的人產(chǎn)生焦慮。這就加速了html5播放器的發(fā)展，也使得人們對html5非插件式的播放器更加渴望。而flv.js就是這么一款可以利用html5的video標簽將http-flv直播流實時播放的一個js版的播放器。
flv.js的原理
flv.js在獲取到FLV格式的音視頻數(shù)據(jù)后將 FLV 文件流轉(zhuǎn)碼復用成 ISO BMFF（MP4 碎片）片段，再通過Media Source Extensions API 傳遞給原生HTML5 Video標簽進行播放。
flv.js 是使用 ECMAScript 6 編寫的，然后通過 Babel Compiler 編譯成 ECMAScript 5，使用 Browserify 打包。
flv.js 從服務器獲取FLV再解封裝后轉(zhuǎn)給Video標簽的原因如下：
- 兼容目前的直播方案：目前大多數(shù)直播方案的音視頻服務都是采用FLV容器格式傳輸音視頻數(shù)據(jù)。
- flv格式簡單，相比于MP4格式轉(zhuǎn)封裝簡單、性能上也占優(yōu)勢，解析起來更快更方便。
常見直播協(xié)議
- RTMP: 底層基于TCP，在瀏覽器端依賴Flash。
- HTTP-FLV: 基于HTTP流式IO傳輸FLV，依賴瀏覽器支持播放FLV。
- WebSocket-FLV: 基于WebSocket傳輸FLV，依賴瀏覽器支持播放FLV。WebSocket建立在HTTP之上，建立WebSocket連接前還要先建立HTTP連接。
- HLS: Http Live Streaming，蘋果提出基于HTTP的流媒體傳輸協(xié)議。HTML5可以直接打開播放。
- RTP: 基于UDP，延遲1秒，瀏覽器不支持。
兼容性
理論上只要是支持Media Source Extensions和ECMAScript 5的瀏覽器都是兼容flv.js的，瀏覽器對MSE的兼容情況如下圖，從圖中可以看出，flv.js的兼容性還是非常不錯的。 需要指出的是iPhone版的Safari是不支持MSE的，所以在iPhone上只有hls是最理想的選擇，而慶幸的是PC版和android版的瀏覽器大多都是支持MSE的，也就是說可以利用http-flv直播實現(xiàn)延時較低的效果。
如果你對兼容性要求非常高的話，HLS會是非常好的選擇，而并非所有瀏覽器版本都支持HLS播放，但是你可以利用另外一個JS播放器項目（video.js）實現(xiàn)全平臺的hls直播。后續(xù)我會寫一篇專門講解video.js的博客討論這個方案。這里附上一張各個瀏覽器對HLS的支持情況： 所以，你可以將flv.js和video.js配合使用，針對不同平臺實現(xiàn)最優(yōu)的方案。直播服務器搭建
關于直播服務器搭建的流程，我在以前的博客里寫了很多，感興趣的可以參考分布式直播系統(tǒng)（二）【搭建單點rtmp/http-flv/hls流媒體服務器】
當然也可以使用我的一鍵部署腳本安裝：
https://github.com/im-pingo/pingos# 快速安裝git clone https://github.com/im-pingo/pingos.gitcd pingos./release.sh -i# 啟動服務cd /usr/local/pingos/./sbin/nginx推流
ffmpeg推流
ffmpeg -re -i 文件.mp4 -vcodec copy -acodec copy -f flv rtmp://ip地址/live/01OBS推流
Open Broadcaster Software（簡稱OBS）是一款直播流媒體內(nèi)容制作軟件。同時程序和其源代碼都是免費的。
支持 OS X、Windows、Linux操作系統(tǒng)。適用于多種直播場景。滿足大部分直播行為的操作需求（發(fā)布桌面、發(fā)布攝像頭、麥克風、揚聲器等等）。
flv.js搭建過程
下載鏈接
為了方便使用，我已經(jīng)將flv.js編譯打包好了，直接下載解壓到你的網(wǎng)站目錄引用即可。 1.
可以使用百度云盤下載 鏈接:
https://pan.baidu.com/s/1ihTo15nsgfLqXKa0vyFt-w 提取碼: gd55
- 也可以從github下載
git clone https://github.com/im-pingo/h5player.git將h5player復制到你的網(wǎng)站目錄，h5player/flv目錄下有個index.html文件，這里是js播放器接口的調(diào)用示例，你可以直接利用這個頁面演示。
flv.js Demo演示
Demo地址：http://player.pingos.io/flv
我已經(jīng)搭建了一個完整的演示界面，你可以快速體驗一把。 1. 輸入http-flv的直播地址 2. 點擊load按鈕即可播放。
播放器主要參數(shù)
| 參數(shù) | 描述 | |:--------:| :-------------:| | enableStashBuffer | 是否開啟播放器端緩存 | | stashInitialSize | 播放器端緩存 | | isLive | 是否為直播流 | | hasAudio | 是否播放聲音 | | hasVideo | 是否播放畫面 |
QQ交流群：697773082
QQ交流群：697773082
在線咨詢
