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

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

對于HTML5直播來說，直播流程大體分為三個部分：

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

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

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

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

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

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

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