網頁視頻流媒體播放器EasyPlayer.JS開發web H5網頁播放H.265視頻支持FLV與HLS直播與點播


開發背景

在2019年之前,一直的理解就是H.265是無法在網頁上進行解碼播放的,直到我看到了金山雲、阿里雲的技術在LVS流媒體社區推送的關於wasm(WebAssembly)解碼播放H.265視頻的技術文章,才了解到互聯網大廠果然是走在技術的最前沿,於是,我們經過反復的討論和調研,再結合我們早期做原生的EasyPlayer的經驗,開始有了對H.265 Web網頁播放器研發的想法;

從2020年初有研發支持H.265編碼格式的視頻想法,到疫情期間的實現,再到現在對重連、丟包、花屏方面的優化,一直都是在一個不斷迭代和適應的過程;

在我們以前的播放器開發中,EasyPlayer幾乎是全部協議、全部兼容的,包括對國內CDN聯盟的RTMP協議的支持,這對於EasyDarwin團隊來說是駕輕就熟的,那么,如果能夠將這些原有的技術復用和嫁接過來,對於我們自身來說,研發就變得簡單了很多,恰好,wasm技術就是這樣一種底層原生技術+前端技術的結合。

升級過程

我們在之前聊到過關於EasyPlayer.js的wasm播放支持《歷時半年,終於研發完成了Web網頁對H.265(HEVC)直播和點播的支持,WebAssembly(wasm)》,當時,秉着先完成后完善,先有后優的想法,通過前端的快速結合,將支持H.264的mse播放器和支持H.265的wasm播放器,通過后端返回編碼格式的方式,選擇加載播放器資源,進行的播放,沒有達到我們Easy的一貫要求,那么,有經過了兩個多月的不斷優化和各個產品的現場實戰,目前,EasyPlayer.js對H.265/H.264的播放支持已經達到了一個非常好的兼容和體驗;

那么,為了達到H5的Web播放器也能達到原生播放的效果,我們進行了許多的優化:

延時優化

延時的消耗主要是在解碼效率和緩沖區的設計,我們通過將原有EasyPlayer在原生播放中的緩沖區經驗和選擇性丟幀經驗移植到了wasm播放器,達到了一個非常好的長時間低延時播放的效果;

優化重連

重連是播放器非常重要的一個功能,尤其是在安防領域,由於網絡異常或者其他因素,會導致連接的短暫斷開,那么及時的重連是一個優秀播放器非常必要的。

優化丟包

以EasyGBS的RTP直播為例,國標GB28181協議在公網傳輸的過程中,很多時候丟包是非常嚴重的,那么要達到一個非常好的播放體驗,播放器對於丟包的適應是非常重要的一個功能點。

優化卡頓

同樣,RTP丟包不但會造成丟包,而且還會因為前端設備或者傳輸的過程,導致時間戳的異常,會對播放過程產生各種卡頓、跳躍的異常,那么這種情況下,對於視頻的平滑直播是非常有必要的,播放器需要根據整個播放的過程,對時間戳進行容錯,達到無感知的平滑播放。

研發后續

WebSocket支持H.265

由於HTTP 2.0以下的協議版本Web支持的同時並發數還有一定的限制,所以,下一步EasyPlayer.js將擴展對WebSocket流的支持。

支持更多的音頻格式

PCMA、PCMU等安防音頻格式的支持,對於安防行業是非常必要的。

支持更多前端繪制的功能

支持更多的前端繪制,包括區域繪制,人臉/行為框圖,物體標注等等。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM