技術(shù)實(shí)操：如何建立HTML5直播？
2021-12-01 22:57:12

做視頻直播的朋友都知道，目前網(wǎng)頁比較主流的視頻直播協(xié)議是HLS協(xié)議和RTMP協(xié)議，移動(dòng)端由于需要比較高的傳輸需求，所以以HLS傳輸為主，而PC端則更加注重視頻的實(shí)時(shí)傳輸，因此以RTMP為主。

對(duì)于HTML5直播來說，直播流程大體分為三個(gè)部分：

• • 
    
• 視頻采集：這個(gè)部分分為也分為PC端和手機(jī)端，包括電腦上的音視頻輸入設(shè)備，比如攝像頭錄像、手機(jī)的攝像頭麥克風(fēng)等，由于移動(dòng)直播隊(duì)伍的壯大，目前主要的采集還是以移動(dòng)端手機(jī)視頻為主。
• 直播流視頻服務(wù)端：也就是我們講的視頻流媒體服務(wù)器，采集視頻錄制端傳輸?shù)囊曨l流(H264/ACC編碼)，通過流媒體服務(wù)器進(jìn)行轉(zhuǎn)碼，并輸出RTMP/HLS格式視頻流至視頻播放端。
• 視頻播放端：一般在電腦端我們TSINGSEE青犀視頻用的比較多的是VLC播放器，此外還有我們自行研發(fā)的EasyPlayer播放器，手機(jī)播放器包括native播放器，還有就是H5的video標(biāo)簽等，目前還是以手機(jī)端的native播放器為主。
  • 
    

對(duì)于H5視頻錄制，可以使用強(qiáng)大的WebRTC技術(shù)。Webrtc我們之前也介紹過，是一個(gè)支持網(wǎng)頁瀏覽器進(jìn)行實(shí)時(shí)語音對(duì)話或視頻對(duì)話的技術(shù)，缺點(diǎn)是只在PC的Chrome上支持較好，移動(dòng)端支持不太理想。目前TSINGSEE青犀視頻各大視頻服務(wù)平臺(tái)都支持了WebRTC視頻流的播放，大家可以了解一下。

使用WebRTC錄制視頻基本流程：

① 調(diào)用window.navigator.webkitGetUserMedia()獲取用戶的PC攝像頭視頻數(shù)據(jù)。

② 將獲取到視頻流數(shù)據(jù)轉(zhuǎn)換成 window.webkitRTCPeerConnection (一種視頻流數(shù)據(jù)格式)。

③ 利用WebScoket將視頻流數(shù)據(jù)傳輸?shù)椒?wù)端。

H5播放視頻也有需要我們進(jìn)一步突破的地方，首先就是播放HLS視頻時(shí)的卡頓問題，server端可以做好分片策略，將ts文件放在CDN上，前端可盡量做到DNS緩存，此外，為了能夠更好實(shí)現(xiàn)實(shí)時(shí)互動(dòng)，也可以采用RTMP協(xié)議，通過video.js播放，比如TSINGSEE青犀視頻EasyPlayer.JS播放器。