[發(fā)明專利]一種基于瀏覽器的跨平臺(tái)視頻直播的系統(tǒng)及方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201710980780.4
• 申請(qǐng)日: 2017-10-20
• 公開（公告）號(hào): CN107888932A
• 公開（公告）日: 2018-04-06
• 發(fā)明（設(shè)計(jì)）人: 羅濤
• 申請(qǐng)（專利權(quán)）人: 深圳思麥杰科技有限公司
• 主分類號(hào): H04N21/2187
• 分類號(hào): H04N21/2187;H04N21/61;H04N21/643;H04N21/845;H04L29/06;H04L29/08
• 代理公司: 暫無(wú)信息
• 代理人: 暫無(wú)信息

1.一種基于瀏覽器的跨平臺(tái)視頻直播的系統(tǒng)，其特征在于，包括視頻原始碼流解復(fù)用模塊、視頻段混合模塊、轉(zhuǎn)換控制模塊、播放控制模塊、媒體源擴(kuò)展控制模塊、IO模塊，其中播放控制模塊是用戶操作的接口，為用戶提供H264視頻碼流和Acc音頻碼流的直播、暫停、繼續(xù)、停止、抓圖等功能，并且負(fù)責(zé)協(xié)調(diào)轉(zhuǎn)換控制模塊和媒體源擴(kuò)展控制模塊之間的數(shù)據(jù)流和控制流；媒體源擴(kuò)展控制模塊負(fù)責(zé)和瀏覽器的API打交道，通過創(chuàng)建MeidaSource、sourceBuffer等對(duì)象、以及建立和videoElement的關(guān)聯(lián)從而實(shí)現(xiàn)視頻的渲染控制，同時(shí)，可以接收來自播放控制模塊的控制命令和流媒體數(shù)據(jù)，并且當(dāng)瀏覽器對(duì)象狀態(tài)改變時(shí)，通知上層的播放控制模塊來控制流媒體數(shù)據(jù)源的啟停；轉(zhuǎn)換控制模塊負(fù)責(zé)接收來自下層的流媒體數(shù)據(jù)，根據(jù)流媒體數(shù)據(jù)類型，將流媒體數(shù)據(jù)包裝成不同的事件，上報(bào)到上層播放控制模塊，并根據(jù)接收到的播放控制模塊命令，控制IO模塊的啟動(dòng)和關(guān)閉，實(shí)現(xiàn)流媒體數(shù)據(jù)源的打開、暫停、繼續(xù)和關(guān)閉；IO模塊:負(fù)責(zé)和流媒體服務(wù)器建立連接，并從流媒體服務(wù)器接收和發(fā)送流媒體數(shù)據(jù)協(xié)議包；IO模塊的啟停是受轉(zhuǎn)換控制模塊控制的；視頻原始碼流解復(fù)用模塊:負(fù)責(zé)從視頻原始碼流的數(shù)據(jù)包中分離出一個(gè)個(gè)單獨(dú)的視頻網(wǎng)絡(luò)抽象層單元，并根據(jù)視頻網(wǎng)絡(luò)抽象層單元解析出視頻元信息對(duì)象和視頻幀數(shù)據(jù)對(duì)象；視頻段混合模塊：負(fù)責(zé)將視頻元信息對(duì)象根據(jù)ISO-BMFF協(xié)議格式包裝成符合fmp4格式的視頻元信息初始化段對(duì)象，再將視頻幀數(shù)據(jù)對(duì)象根據(jù)ISO-BMFF協(xié)議格式包裝成符合fmp4格式的視頻幀數(shù)據(jù)媒體段對(duì)象。

2.一種基于瀏覽器的跨平臺(tái)視頻直播的方法，其特征在于，包括如下步驟：

1)播放控制模塊根據(jù)啟動(dòng)參數(shù)啟動(dòng)視頻直播，啟動(dòng)參數(shù)包括流媒體服務(wù)器地址、前端視頻采集設(shè)備ID，前端視頻采集設(shè)備的通道號(hào)(根據(jù)情況可選)，前端視頻采集設(shè)備的視頻清晰度(分為高、中、低三個(gè)等級(jí))；

2)播放控制模塊接收到視頻直播命令后，首先觸發(fā)媒體源擴(kuò)展控制模塊初始化，媒體源擴(kuò)展控制模塊初始化過程包括：創(chuàng)建瀏覽器MediaSource對(duì)象，并將瀏覽器的videoElement對(duì)象src屬性指向剛創(chuàng)建的MediaSource對(duì)象，然后為MediaSource對(duì)象綁定事件響應(yīng)函數(shù)；

3)媒體源擴(kuò)展控制模塊完成初始化后，MediaSource對(duì)象的‘sourceopen’事件被觸發(fā)，在對(duì)應(yīng)的事件響應(yīng)函數(shù)中，向播放控制模塊發(fā)送‘SOURCEOPEN’事件，通知播放控制模塊媒體源擴(kuò)展模塊處于已經(jīng)打開狀態(tài)，可以接收流媒體數(shù)據(jù)；

4)播放控制模塊收到媒體源擴(kuò)展模塊的‘SOURCEOPEN’事件后，創(chuàng)建轉(zhuǎn)換控制模塊對(duì)象，并為轉(zhuǎn)換控制模塊綁定事件響應(yīng)函數(shù)，為從轉(zhuǎn)換控制模塊接收流媒體數(shù)據(jù)做準(zhǔn)備，轉(zhuǎn)換控制模塊對(duì)象創(chuàng)建完成后，執(zhí)行轉(zhuǎn)換控制模塊的啟動(dòng)接口；

5)轉(zhuǎn)換控制模塊的啟動(dòng)接口被執(zhí)行時(shí)，首先分別創(chuàng)建視頻原始碼流解復(fù)用模塊對(duì)象、視頻段混合模塊對(duì)象和IO模塊對(duì)象；并為四個(gè)對(duì)象建立數(shù)據(jù)傳輸管道，即IO模塊對(duì)象處理完成的數(shù)據(jù)發(fā)送到視頻原始碼流解復(fù)用模塊對(duì)象處理，由視頻原始碼流解復(fù)用模塊對(duì)象處理完成后再發(fā)送到視頻段混合模塊對(duì)象中處理，視頻段混合模塊對(duì)象處理完成后，再將處理后的數(shù)據(jù)發(fā)送到轉(zhuǎn)換控制模塊中處理，這樣就形成了數(shù)據(jù)處理的管道，具體參考圖1；上述工作完成之后，觸發(fā)IO模塊對(duì)象的打開視頻直播接口；

6)IO模塊的打開視頻直播接口被執(zhí)行時(shí)，首先創(chuàng)建websocket對(duì)象，作為播放器和流媒體服務(wù)器之間的的通訊通道，websocket通道連接建立后，IO模塊對(duì)象通過websocket通道將視頻直播的請(qǐng)求發(fā)送到流媒體服務(wù)器，并等待流媒體服務(wù)器的反饋數(shù)據(jù)；當(dāng)IO模塊接收到流媒體服務(wù)器發(fā)送的包含視頻數(shù)據(jù)的傳輸協(xié)議包后，通過視頻原始碼流解復(fù)用模塊提供的接口，將協(xié)議包發(fā)送給視頻原始碼流解復(fù)用模塊進(jìn)行協(xié)議包分析和處理；

7)視頻原始碼流解復(fù)用模塊將原始視頻碼流從傳輸協(xié)議包中分離出來；服務(wù)器發(fā)送過來的原始視頻碼流的格式是，每秒發(fā)送一條包含IDR NALU的關(guān)鍵視頻幀，后面緊跟著若干條包含NDR NALU的非關(guān)鍵視頻幀，每一幀數(shù)據(jù)都由一個(gè)獨(dú)立的傳輸協(xié)議包發(fā)送；因此視頻數(shù)據(jù)包中的要么是一條完整的IDR幀，要么是一條完整的NDR幀；

8)視頻原始碼流解復(fù)用模塊根據(jù)原始視頻碼流中的屬性判斷接收到的視頻幀是否是關(guān)鍵幀，如果是關(guān)鍵幀，則將關(guān)鍵幀分解成單獨(dú)的視頻參數(shù)集網(wǎng)絡(luò)抽象層單元(SPS nalu),圖像參數(shù)集網(wǎng)絡(luò)抽象層單元(PPS nalu),補(bǔ)充增強(qiáng)信息單元(SEI nalu),以及IDR(即時(shí)解碼刷新)NALU，再判斷是否已經(jīng)完成了視頻流元信息的初始化；如果未初始化視頻流元信息，則根據(jù)SPS，PPS，SEI解析出視頻流元信息；并將視頻流元信息發(fā)送到視頻段混合模塊；如果已經(jīng)完成了視頻流元信息的初始化，則從IDR NALU中解析出視頻采樣幀對(duì)象，并將視頻采樣幀對(duì)象發(fā)送到視頻段混合模塊中處理；

9)如果視頻幀不是關(guān)鍵幀，則從非關(guān)鍵幀中分解出NDR(非即時(shí)解碼刷新)NALU，并且從NDR NALU中解析出視頻采樣幀對(duì)象，并將視頻采樣幀對(duì)象發(fā)送到視頻段混合模塊中處理；

10)視頻段混合模塊如果接收到的是視頻流元信息，則根據(jù)視頻流元信息里面的參數(shù)生成ISO BIMM格式的ftyp(file type)box+moov(movie metadata)box字節(jié)流；并將生成字節(jié)流包裝成initSegment對(duì)象發(fā)送到轉(zhuǎn)換控制模塊處理；

11)視頻段混合模塊如果接收到的是視頻采樣幀對(duì)象，則根據(jù)視頻采樣幀對(duì)象里面的數(shù)據(jù)生成ISO BIMM格式的moof(movie fregment)box+mdat(media data)box；并將生成的字節(jié)流包裝成mediaSegment對(duì)象發(fā)送到轉(zhuǎn)換控制模塊處理；

12)轉(zhuǎn)換控制模塊接收到initSegment對(duì)象后，觸發(fā)已經(jīng)注冊(cè)到播放控制模塊對(duì)象上的的’INIT_SEGMENT’事件，并通過該事件將initSegment對(duì)象發(fā)送到播放控制模塊；

13)轉(zhuǎn)換控制模塊接收到mediaSegment對(duì)象后，觸發(fā)已經(jīng)注冊(cè)到播放控制模塊對(duì)象上的的’MEDIA_SEGMENT’事件，并通過該事件將mediaSegment對(duì)象發(fā)送到播放控制模塊；

14)當(dāng)播放控制模塊收到’INIT_SEGMENT’事件后，在綁定的事件處理函數(shù)中，調(diào)用媒體源擴(kuò)展控制模塊的添加initSegment方法，該方法調(diào)用mediaSource對(duì)象的addSourceBuffer方法；

15)當(dāng)mediaSource完成addSourceBuffer方法后，觸發(fā)updateend事件，這時(shí)，mediaSource可以接收mediaSegment對(duì)象，實(shí)現(xiàn)視頻播放；

16)當(dāng)播放控制模塊收到媒體初始化事件后，調(diào)用媒體源擴(kuò)展控制模塊的添加mediaSegment方法，該方法調(diào)用mediaSource對(duì)象的appendBuffer方法。