前端Web瀏覽器基於H5如何實時播放RTSP、RTMP、HTTP-FLV、HLS視頻畫面
先看上邊這張圖。由於離2020年12月各瀏覽器禁用Flash的日子越來越近，又正恰巧要做新錄播項目，所以有了以下內容。
還記得去年也是這個時候，大約是四五六月份，甲方來了個需求想把車間的監控系統接入到我們自己的數字化管控平臺。很榮幸，經理把這個任務交給我了。當時採用的協議方案是RTSP —> RTMP，服務端用的是Nginx+nginx-rtmp-module，系統windows，前端使用videoJS配合Flash拉流。當然不是說這種方案不好，而是用戶體驗度確實有點差。雖然我們也做了Flash是否開啓的檢測（如果用戶沒允許Flash運行會有提示圖讓用戶主動去點擊允許運行），但對於普通用戶或電腦盲的用戶來說體驗度還是差點。因爲他不知道去哪找開啓，或者說他不願去找，甚至還會發一些牢騷 **#**@*。當然現在已經離開公司了，具體後來使用情況也就不清楚了。
那麼如何拋棄Flash前端播放插件，直接讓用戶一進入頁面就能輕鬆播放流媒體服務器傳過來的流呢？方案還是有的，就是RTMP —> HTTP-FLV。關於HTTP-FLV不做過多描述，簡單意思就是將RTMP 轉爲HTTP-FLV，瀏覽器拉的是HTTP類型的流，不再是RTMP。轉的這個過程不需要你做，流媒體服務器端會直接幫你做好。
- RTMP流長這樣：rtmp://127.0.0.1:1935/live/livestream
- HTTP-FLV流長這樣：http://127.0.0.1:8080/live/livestream.flv
先說前端拉流，RTMP流之前播放時使用的是videoJS+Flash，現在HTTP-FLV流播放使用Flv.js（當然如果你有更好播放HTTP-FLV流的JS也可不用這個）再說後端推流，目前來說支持轉封裝HTTP-FLV流的'常用'服務器有兩款，一款是nginx-http-flv-module，一款是SRS。關於各自介紹度娘很多。那麼總結一下就是 OBS/FFmpeg(RTMP) —> nginx-http-flv-module/SRS(HTTP-FLV) —> Flv.js，如下圖：
可以看出，對於推流端來說基本沒有什麼變化，推上來的仍是RTMP，但對於用戶端來說選擇性就很多了，可直接採用H5觀看。