天天看點

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

今天我們再來讨論一些CreateOffer這個函數,那實際在此之前我們已經使用了CreateOffer,并且将我們的媒體協商Candidate收集以及連通性檢測還有就是在同一個頁面中進行端對端的傳輸做了一個驗證,那麼我們今天再讨論這個CreateOffer主要是來看看這個CreateOffer還包括了哪些參數,在此之前的實驗中并沒有對這些參數做詳細的介紹,首先是createOffer的基本格式

基本格式

aPromise = myPeerConnection.createOffer([options]);

這個格式此前我們已經看到過了,他也是一個Promise的格式,前面是你的連接配接後面是調用的createOffer,在後面是它的options,這個options是可選的,就是我們可以添加也可以不添加,這裡主要就是看options它裡面的内容。

在這個Options裡面一共有四項,其中關鍵的需要重點說明的有兩項 。一個是iceRestart另一個是voiceActivityDetection.

Options可選

iceRestart:該選擇會重新開機ICE,重新進行Candidate收集。

voiceActivityDetection:是否開啟靜音檢測,預設開啟。

那首先我們來看一下iceRestart,那它是什麼作用呢?那其實就是重新啟動ICE,那在重新開機啟動ICE之後就會重新啟動Candidate收集,那收集完了之後在進行連通性檢測。那它有什麼好處呢?那可以想象一種場景就是當我們使用手機的時候從4G換成wifi,或者從wifi換成4G的時候,實際它的鍊路已經發生了變化,就是說我們的IP位址和出口都發生了變化。那這個時候我們應該進行重新的選擇;第二種情況就是說我們的傳輸網絡是動态變化的,就是你資料量的多少,有沒有其他人和你搶占帶寬都是有關的,那麼當我們最開始選擇的這條線路呢,是比較高效的,連通性比較好,但是過了一端時間由于某種原因它産生擁塞了,那這時候如果有路的話我們有必要重新選擇一條路,還有一種就是比如說我們在伺服器端增加了新的中繼節點 ,就是TURN服務,那麼我們又增加了三個TURN服務,那麼将這些TURN服務增加到連接配接的配置服務中去,那這個時候也應該重新啟動ICE讓它選路。

基于以上的這些原因,這個iceRestart是非常好的一個方案,就是可以自動的去幫我們去選擇新的有效的資料傳輸的線路,這是一個非常好的機制,當我們設定它為true的時候,當有這些變化的時候就可以觸發重新選路,那麼第二個呢,就是靜音檢測那基因檢測的好處,這有必要給大家說一下,就是當我們不說話的時候,有一些背景噪音實際是可以被忽略掉,那麼當檢測到這個沒有人聲隻是一些背景噪音的時候,我們可以選擇不傳輸這些背景噪音,那麼在另外一端呢,當我們打開了進行檢測之後呢,當沒有音頻資料過來的時候,它會自己去建立那個靜默包,整個兒這個音頻呢,他是一個連續的,在沒有聲音的時候第一個可以減少帶寬,那麼第二個呢,把一些沒必要的背景音就省得去摻雜了整個兒的這個直播系統中。當然,一路的這個音頻,其實占用的帶寬量并不大,但是如果你是多路的話,那其實還是有一些這個客觀的,這是兩個需要特别說明的兩個option,

但除了這個兩個option之後呢,還有兩個這個option一個是用于接收音頻,一個是用于接受視訊。

接收遠端音頻

接收遠端視訊

靜音檢測

ICE restart

這裡去接收音頻和視訊沒有必要特别的去講解,那麼靜音呢必須在我們後面真正一對一時時直播系統之後,才能通過這個網絡抓包工具,然後看到它的效果,那麼我們這堂課重點來看ICE restart。我們通過一個實戰來看看ICE restar的他是怎麼生效的。那這裡呢,就涉及到一個重點,其實這個ICE restart的最終的結果反映在哪兒呢?就反映在SDP,反映到我們的媒體協商上,在媒體協商的時候,當我們在進行交換SDP的時候,通訊的雙方當發現這個ICE uflag大家還記得嗎?我們在講解這個SDP的時候,講解了ICE ufrog 和 ICE password,那這兩個參數是幹什麼呢?就是用于驗證這個連通性的,Candidate的連通性的,當他們發生變化的時候,我們就要重新進行這個檢測。那麼在檢測過程中,如果我們整個鍊路都通了,又發現一條新的路,那這個時候呢,他就會把老的那個資料切到這個新的路,在新的路沒有建成之前,老的路還是依然在傳輸資料的,這點大家特别的清楚。那是以說呢,就是說,我們怎麼能知道這個ICE restar的有沒有真正的起效果,那麼我們的觀察點就在于将我們協商後的這個SDP然後看一看他的這個ICE-uflag和ICE password有沒有發生變化?如果沒有的話,說明ICE沒有啟動,如果發生變化了,說明ICE啟動了,一會兒我就能看到這個效果,那現在我們就來具體實操一下。

登入終端伺服器

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

切換到工作目錄下

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

在這裡我們有一個基礎了,也就是testCreateOffer,這裡有兩個檔案一個是index.html一個是js,首先我們看一下index.html

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer
實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

非常的簡單,這裡隻是有一個button,當我們點選這個button的時候,他就調用一下新的createOffer,就是在原來的連接配接上調用這個createOffer,那如果說我們沒有設定restart,那每次建立createOffer,它擷取的這個ICE-uflag它的值是不變的,但是如果我們設定了ICE restart,那它的值就會發生變化,那這是index.html;

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

我們再看js

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

我們在js上做一些功能的增加,在這裡首先是當使用者點選createoffer的時候會觸發一個時間,也就是test,那麼在test裡面對這個PC做了一個驗證,就是我們這個連接配接,這時候我們去getStream,那從這個音視訊裝置中擷取視訊裝置,這裡我們将音頻關了

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer
實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

那麼這個時候就會調用getMediaStream,

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

那在這個函數裡會将擷取到的所有的音頻和視訊track,添加到pc中去,那麼這時候這個pc裡就有了視訊的track,那有了這個之後我們再建立Offer的時候,那實際就有了新的媒體描述資訊就是video,如果有音頻就是audio,現在我們就實作媒體協商這部分,首先是pc.createOffer(),那麼在這個createOffer裡寫一些這個options,現在我們第一步先讓這個restart先為false,

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

設定offerToReceiveAudio為0,因為我們現在不支援音頻,我們沒有擷取音頻的資料,offerToReceiveVideo是1,因為我們有視訊的這媒體 ,在設定一個iceRestart: false,這樣我們就将參數設好了,設定好之後我們就可以擷取這個Offer,

緊接着我們就來實作這個getOffer方法,建立Offer成功之後他會穿進一個desc參數,當我們拿到這個desc之後通過console.log将這個desc列印一下,這就是我們建立的SDP,

緊接着我們去設定pc.setLocalDescription(desc);建立完成之後如果是真實的,我們會通過信令将這個desc傳過去,傳到對方實際上就是pc2了,pc2收到之後它要調用setRemoteDescription(desc);那當這個pc2收到這個pc1的描述之後呢,它設定了遠端的,緊接着它要回答一個應答,是以pc2要調用createAnswer,createAnswer的時候實際是不用傳任何的option的,如果成功了就擷取這個answer就好了,如果失敗就處理這個錯誤,

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

那是以還是要實作getAnswer,getAnswer也同樣的會有一個desc參數傳進來,當我們收到這個desc的時候我們将這個SDP列印出來,這個時候首先是pc2調用setLocalDescription,這個時應該發信令給遠端,這時候pc收到之後它要設定setRemoteDescription,那麼這樣整個協商過程就完了

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

 也就是我每次點選createOffer的時候都觸發每次協商的重建,每次重建的時候它都會把這個Offer和answer的資訊列印出來,這就是我們整個的過程,現在我們先來驗證一把。

打開浏覽器

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

打開調試工具,我們發現這個資訊就出來了 

我們搜一下這個ice-ufrag,第一個是NEOJ,第二個是xYXa,

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

現在我們将iceRestart設定為true,為了更加友善,我們在console裡面加上标記,這樣 更容易差別

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer
實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

現在我們點選兩次createOffer,我看下console,這時候我們搜offer就好了

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

因為有兩個Offer,第一次執行的時候我們看ice-ufrag:80oi,

實作1V1音視訊實時互動直播系統 十二、第五節 再論CreateOffer

第二層ice-ufrag:u84D