Android端WebRtc 應(yīng)用

關(guān)于WebRTC在android端的應(yīng)用,從剛開始查什么是WebRTC? WebRTC又是干什么的?又該怎么用?一路查資料、GitHub上找demo,中途也是遇到很多的問題,最核心的莫過于

1.客戶端連接服務(wù)端

2.兩個(gè)客戶端間如何通訊的(純文本聊天、音視頻對(duì)講)

3.STUN 服務(wù)原理又是什么

以下我將根據(jù)個(gè)人理解,膚淺的表述下我的見解,如有錯(cuò)誤,還請(qǐng)指正!



WebRTC簡介:

WebRTC名稱源自網(wǎng)頁實(shí)時(shí)通信(Web Real-Time Communication)的縮寫,是一個(gè)支持網(wǎng)頁瀏覽器進(jìn)行實(shí)時(shí)語音對(duì)話或視頻對(duì)話的技術(shù),是谷歌2010年以6820萬美元收購Global IP Solutions公司而獲得的一項(xiàng)技術(shù)。Google于2011年6月3日開源的即時(shí)通訊項(xiàng)目,旨在使其成為客戶端視頻通話的標(biāo)準(zhǔn)。其實(shí)在Google將WebRTC開源之前,微軟和蘋果各自的通訊產(chǎn)品已占用很大市場(chǎng)份額(如Skype),Google`也是為了快速擴(kuò)大市場(chǎng),所以將他給開源。在行業(yè)內(nèi)得到了廣泛的支持和應(yīng)用,成為下一代視頻通話的標(biāo)準(zhǔn)。更多介紹可以自行去官網(wǎng)上看。

WebRTC被譽(yù)為是web長期開源開發(fā)的一個(gè)新啟元,是近年來Web開發(fā)的最重要?jiǎng)?chuàng)新。WebRTC允許Web開發(fā)者在其web應(yīng)用中添加視頻聊天或者點(diǎn)對(duì)點(diǎn)數(shù)據(jù)傳輸,不需要復(fù)雜的代碼或者昂貴的配置。目前支持Chrome、Firefox和Opera,后續(xù)會(huì)支持更多的瀏覽器,它有能力達(dá)到數(shù)十億的設(shè)備。

資源:

服務(wù)端兼Web客戶端:? ProjectRTC ? (https://github.com/pchab/ProjectRTC)

Android 客戶端:AndroidRTC (https://github.com/pchab/AndroidRTC)



ProjectRTC是充當(dāng)本地服務(wù)端+Web客戶端的功能??? AndroidRTC 是RTC Android客戶端

至于兩個(gè)項(xiàng)目的配置及啟動(dòng)過程,我只簡單介紹,因?yàn)橐彩菂⒖紕e人,點(diǎn)我看原創(chuàng)者

首先是基于AndroidStudio 的 AndroidRTC 從GitHub直接git到AS項(xiàng)目中,將webrtc-client這個(gè)module的build.gradle中的

compile ('com.github.nkzawa:socket.io-client:0.4.1')

改為

compile ('com.github.nkzawa:socket.io-client:0.4.1'){// //webSocket相關(guān)

? ? excludegroup:'org.json',module:'json'

? ? }

完整如下:

dependencies {

??????????? compile ('com.github.nkzawa:socket.io-client:0.4.1'){ // //webSocket相關(guān)

?????????????????????? exclude group: 'org.json', module: 'json'

??????????????????????? }

??????????? compile 'io.pristine:libjingle:9127@aar' // //webRTC官方aar包

}

修改app module 下string.xml下host? port 為你自己電腦ip, 端口號(hào)為3000

<resources>

???????? <string name="app_name">AndroidRTC</string>

???????? <string name="host">192.168.1.31</string> // 自己的ip

???????? <string name="port">3000</string>

???????? <string name="action_settings">Options</string>

</resources>



接下來是本地服務(wù)端的建立:

ProjectRTC啟動(dòng)需要安裝node.js,一路next 就行,

選擇ProjectRTC要下載目錄,右鍵(此處默認(rèn) git 工具都已經(jīng)安裝過了)


git

git clone https://github.com/pchab/ProjectRTC.git

-cd ProjectRTC/

-npm install

-npm start


npm

npm install 因?yàn)槲乙呀?jīng)執(zhí)行過了,直接start :如上所示, 說明本地服務(wù)端已經(jīng)跑起來了,在瀏覽器(谷歌或火狐)中打開localhost:3000,網(wǎng)上一大把的都說是這樣的:

人家的結(jié)果



但我的出來的確是:

我的結(jié)果



看了下ProjectRTC里面的app.js ,結(jié)論就是WebClient沒連接上本地的服務(wù),同理這也是為什么Android app 啟動(dòng)后除了申請(qǐng)下權(quán)限,然后就是開啟前置Camera 后就沒反應(yīng)了,原因就是 stun:stun.l.google.com:19302 這個(gè)服務(wù)國內(nèi)連不上的(此時(shí)翻墻后在試一遍,答案就和人家的結(jié)果一樣 通了!別問怎么翻墻?自行百度)

但翻墻不是根本啊,怎么不翻墻利用起來現(xiàn)有的demo資源呢?既然這個(gè)STUN服務(wù)不能用,那就換個(gè)能用的唄,請(qǐng)往下看

位于ProjectRTC\public\javascripts\rtcClient.js 打開修改如下:

peerConnectionConfig: {

iceServers: [

// {"url": "stun:23.21.150.121"},

// {"url": "stun:stun.l.google.com:19302"}

{"url": "stun:stun.rixtelecom.se"},

{"url": "stun:stun.schlund.de"}

]

},



同樣 AndroidRTC? WebRtcClient.class中WebRtcClient構(gòu)造方法里面初始化的iceServer.add修改:

iceServers.add(new PeerConnection.IceServer("stun:stun.rixtelecom.se"));

iceServers.add(new PeerConnection.IceServer("stun:stun.schlund.de"));



重新啟動(dòng)ProjectRTC服務(wù),android重新編譯運(yùn)行即可(局域網(wǎng)內(nèi)),此時(shí)webClient?? androidClient 都連接后 在webclient? call? androidclient? 這是這個(gè)開源項(xiàng)目最明了的功能,

接下來我個(gè)人總結(jié)的AndroidClient端的流程

第一步啟動(dòng)App后先初始化PeerConnectionParameters,通過WebRtcClient類根據(jù)傳入的初始化連接參數(shù),在WebClient核心類(所有核心操作其實(shí)都在這里完成)里建立連接,構(gòu)造方法中 1?? 2 相當(dāng)重要(如下圖示),并將連接成功結(jié)果在RtcActivity的OnCallReady中進(jìn)行回調(diào),客戶端拿到本次連接的id,然后檢查是否有其他Client 對(duì)我發(fā)起call動(dòng)作,有的話在RtcActivity中【answer】方法發(fā)送帶有對(duì)方id的init信令(過程下面有描述),同時(shí)對(duì)本地初始化渲染工作(setCamera方法)等待信令交互完成。若連接失敗,則在RtcActivity的OnCallReady是沒有回調(diào)信息,客戶端黑屏狀態(tài)。

1.是判斷是否連接上WebRTC服務(wù)的關(guān)鍵 若連接上Server 它將會(huì)把本次建立連接的ID通過回調(diào)給客戶端,若連接失敗則是沒有回調(diào)信息的,即? RtcActivity 中實(shí)現(xiàn)的onCallReady回調(diào) 是判斷當(dāng)前客戶端是否連接上服務(wù)的關(guān)鍵。

2.客戶端與服務(wù)端建立連接后,客戶端與其他客戶端間建立信令交互數(shù)據(jù)回調(diào)(發(fā)生在兩個(gè)客戶端都與服務(wù)端建立連接后一個(gè)發(fā)起call,但兩個(gè)客戶端間信令交互完成前),此處引用該作者描述,但有不同點(diǎn)



https://blog.csdn.net/youmingyu/article/details/53192714

建立連接通道時(shí)我們需要在WebRTC兩個(gè)客戶端之間進(jìn)行一些信令交換,我們以A作為發(fā)起端,B作為響應(yīng)端(A call B,假設(shè)服務(wù)器和A、B已經(jīng)連接好,并且只提供轉(zhuǎn)發(fā)功能,PeerConnection對(duì)象為pc ):

? ? A向B發(fā)出一個(gè)“init”請(qǐng)求(這一步是必須的,因?yàn)锳 Client 發(fā)起的是一個(gè)帶有對(duì)方id的init 信令,怎么獲取B_Client的id下面介紹)。

? ? B收到后“init”請(qǐng)求后,調(diào)用pc.createOffer()方法創(chuàng)建一個(gè)包含SDP描述符(包含媒體信息,如分辨率、編解碼能力等)的offer信令。

? ? offer信令創(chuàng)建成功后會(huì)調(diào)用SdpObserver監(jiān)聽中的onCreateSuccess()響應(yīng)函數(shù),在這里B會(huì)通過pc.setLocalDescription將offer信令(SDP描述符)賦給自己的PC對(duì)象,同時(shí)將offer信令發(fā)送給A 。

? ? A收到B的offer信令后,利用pc.setRemoteDescription()方法將B的SDP描述賦給A的PC對(duì)象。

? ? A在onCreateSuccess()監(jiān)聽響應(yīng)函數(shù)中調(diào)用pc.setLocalDescription將answer信令(SDP描述符)賦給自己的PC對(duì)象,同時(shí)將answer信令發(fā)送給B 。

? ? B收到A的answer信令后,利用pc.setRemoteDescription()方法將A的SDP描述賦給B的PC對(duì)象。

這樣,A、B之間就完成里了信令交換。

WebRtcClient構(gòu)造方法里的初始化



如何獲取其他客戶端 id的問題

分析PrijectRTC提供的WebClient可以獲取到連接服務(wù)的所有對(duì)象的集合(WebClient有個(gè)Refresh按鈕刷新列表),代碼位于ProjectRTC\public\javascripts\app.js 第56行

WebClient refresh Methond



說明服務(wù)端提供一個(gè)后綴為“/streams.json"的get方式來獲取當(dāng)前連接的所有對(duì)象,即AndroidClient通過“http://192.168.1.31:3000/streams.json” (自己服務(wù)端ip && 局域網(wǎng))get獲取? 結(jié)果如下:

[{"name":"客戶端二號(hào)","id":"OCRisXtYf1eCznzEAAAB"},{"name":"android_test","id":"zMV3ND2s0rB5DEh9AAAC"},{"name":"Guest","id":"8R546Px5uEYlOtgbAAAM"}]


Client list



AndroidClient? 呼叫其他AndroidClient或WebClient:

有了以上這些存貨了,那AndroidClient? call 其他AndroidClient或WebClinet 就輕松多了,還是借助AndroidRTC這個(gè)項(xiàng)目 只是做一些修改,實(shí)現(xiàn)功能為:app啟動(dòng)后獲取相關(guān)權(quán)限,自動(dòng)去連接WebRTC服務(wù)、初始化數(shù)據(jù),失敗則提示,成功的話獲取并顯示當(dāng)前在線Client列表,通過點(diǎn)擊不同客戶端名字(發(fā)起call),實(shí)現(xiàn)雙邊視頻對(duì)話連接:核心方法是點(diǎn)擊某個(gè)Client的方法,源碼也有提供

client.sendMessage(callId, "init", null);? //callid? 被呼叫的 Client id ?

startCam();??? // 開啟本地視頻預(yù)覽

WebRtcClient 基本不需要做修改。

參考鏈接:

https://blog.csdn.net/Charon_Chui/article/details/80510945

http://www.itdecent.cn/p/0943038b51de

https://blog.csdn.net/youmingyu/article/details/53192714

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容