直播發(fā)展如火如荼，為了滿足火熱的移動(dòng)Web端直播需求，一系列基于HTML5的網(wǎng)絡(luò)直播方案迅速的發(fā)展了起來(lái)。其實(shí)只要實(shí)現(xiàn)了直播的各個(gè)技術(shù)難點(diǎn)，通過(guò)HTML5進(jìn)行視頻直播并非難事。
常見(jiàn)的可用于HTML5的直播技術(shù)共有3種協(xié)議：HLS、WebSocket與WebRTC。本文將對(duì)基于這3種協(xié)議的HTML5網(wǎng)絡(luò)直播方案實(shí)現(xiàn)做下基礎(chǔ)的介紹。
一. HLS
優(yōu)點(diǎn)：CDN支持比較好。
缺點(diǎn)：延時(shí)較高，無(wú)法進(jìn)行互動(dòng)直播。
HLS是一個(gè)由蘋果公司提出的基于HTTP的流媒體網(wǎng)絡(luò)傳輸協(xié)議，是蘋果公司QuickTime X和iPhone軟件系統(tǒng)的一部分。它的工作原理是把整個(gè)流分成一個(gè)個(gè)小的基于HTTP的文件，每次只下載一些。當(dāng)媒體流正在播放時(shí)，客戶端可以選擇從許多不同的備用源中以不同的速率下載同樣的資源，允許流媒體會(huì)話適應(yīng)不同的數(shù)據(jù)速率。在開(kāi)始一個(gè)流媒體會(huì)話時(shí)，客戶端會(huì)下載一個(gè)包含元數(shù)據(jù)的extended M3U (m3u8)playlist文件，用于尋找可用的媒體流。
用HLS協(xié)議實(shí)現(xiàn)直播的延時(shí)比較高，是因?yàn)槊恳恍《蔚囊曨l文件都需要延遲時(shí)間比如文件列表里面包含5個(gè)TS文件，每個(gè)TS文件包含5秒視頻，那么整體的延遲就是25秒。
當(dāng)然也可以縮短列表的長(zhǎng)度和單個(gè)TS文件的大小來(lái)降低延遲，甚至可以縮減列表長(zhǎng)度為1，TS視頻時(shí)長(zhǎng)為1s。但是這樣設(shè)置無(wú)疑會(huì)增加請(qǐng)求次數(shù)，服務(wù)器壓力自然也會(huì)增大，而且當(dāng)網(wǎng)速慢時(shí)這樣的設(shè)置會(huì)造成更多的緩沖。蘋果官方推薦的TS時(shí)長(zhǎng)是10s，這樣就會(huì)大約有30s的延遲。
二. WebSocket+MSE
優(yōu)點(diǎn)：實(shí)時(shí)性比較好，可以用于互動(dòng)直播，前端可操作性更大。
缺點(diǎn)：技術(shù)較新，一些舊瀏覽器不支持。
1. WebSocket
通常的Web應(yīng)用都是圍繞著HTTP的請(qǐng)求/響應(yīng)模式而構(gòu)建的。所有的HTTP通信都是通過(guò)客戶端來(lái)控制的，都是由客戶端向服務(wù)器發(fā)出一個(gè)請(qǐng)求，服務(wù)器接收和處理完畢后再返回結(jié)果給客戶端，客戶端再將數(shù)據(jù)展現(xiàn)出來(lái)。這種模式不能滿足實(shí)時(shí)應(yīng)用的需求，于是出現(xiàn)了SSE，Comet等“服務(wù)器推”的長(zhǎng)連接技術(shù)。
WebSocket是直接基于TCP連接之上的通信協(xié)議，可以在單個(gè)TCP連接上進(jìn)行全雙工的通信。WebSocket是獨(dú)立的創(chuàng)建在TCP上的協(xié)議，HTTP協(xié)議中的那些概念都不復(fù)存在，和HTTP的唯一關(guān)聯(lián)是使用HTTP協(xié)議的101狀態(tài)碼進(jìn)行協(xié)議切換，使用的TCP端口是80，可以用于繞過(guò)大多數(shù)防火墻的限制。
2. MSE
MSE是一個(gè)主流瀏覽器支持的新的Web API。MSE是一個(gè)W3C標(biāo)準(zhǔn)，允許Java動(dòng)態(tài)的構(gòu)建和 的媒體流。它定義了對(duì)象，允許Java傳輸媒體流片段到一個(gè)HTMLMediaElement。
通過(guò)使用MSE，你可以動(dòng)態(tài)地修改媒體流而不需要任何的插件。這讓前端Java可以做更多的事情，我們可以在Java進(jìn)行轉(zhuǎn)封裝，處理，甚至轉(zhuǎn)碼。
三. WebRTC
優(yōu)點(diǎn)：實(shí)時(shí)性好，延時(shí)低，基于UDP協(xié)議。
缺點(diǎn)：缺少成熟的開(kāi)源中轉(zhuǎn)服務(wù)器方案。
WebRTC，網(wǎng)頁(yè)即時(shí)通信，是一個(gè)支持網(wǎng)頁(yè)瀏覽器進(jìn)行實(shí)時(shí)語(yǔ)音對(duì)話或視頻對(duì)話的API。它于2011年6月1日開(kāi)源并在Google、Mozilla、Opera支持下被納入萬(wàn)維網(wǎng)聯(lián)盟的W3C推薦標(biāo)準(zhǔn)。
WebRTC 涉及到很多復(fù)雜技術(shù)，不過(guò)好在大多數(shù)復(fù)雜工作可以抽象成為下面三個(gè) API：
MediaStream：獲取音頻和視頻流；
RTCPeerConnection：用來(lái)建立和維護(hù)端到端連接，提供高效的音視頻流傳輸；
RTCDataChannel：用于支持端到端的任意應(yīng)用數(shù)據(jù)交換。
這里的MediaStream對(duì)應(yīng)的是JS里的navigator.getUserMedia() 方法，它負(fù)責(zé)從底層平臺(tái)獲取音視頻流。音視頻流經(jīng)過(guò)WebRTC音視頻引擎的自動(dòng)優(yōu)化、編碼和解碼，可以直接讀取或者傳輸?shù)礁鞣N目的地。比如，我們可以用getUserMedia獲取視頻流，再把每一幀都轉(zhuǎn)成ASCII字符播放。MediaStream這個(gè)API設(shè)計(jì)得很簡(jiǎn)單，使用起來(lái)也很方便。
以上就是三種基于HTML5的網(wǎng)絡(luò)直播方案中的常用協(xié)議，實(shí)現(xiàn)難度依次遞增，當(dāng)然，用戶體驗(yàn)也依次遞增。
聯(lián)系客服
