webrtc一對一通話

---

目錄

一對一通話原理

RTCPeerConnection

實現(xiàn)WebRTC音視頻通話思路

部署到公網(wǎng)

---

1. 一對一通話原理

對于WebRTC應(yīng)用開發(fā)人員而言，主要是關(guān)注RTCPeerConnection類，主要分為以下四塊

信令設(shè)計；

媒體協(xié)商；

加入Stream/Track；

網(wǎng)絡(luò)協(xié)商

1. 信令協(xié)議設(shè)計

采用json封裝格式

join：加入房間

resp--join：當(dāng)join房間后發(fā)現(xiàn)房間已經(jīng)存在另一個人時則返回另一個人的uid；如果只有自己則不返回

leave：離開房間，服務(wù)器收到leave信令則檢查同一房間是否有其他人，如果有其他人則通知他有人離開

new--peer：服務(wù)器通知客戶端有新人加入，收到new-peer則發(fā)起連接請求

peer--leave：服務(wù)器通知客戶端有人離開

offer：轉(zhuǎn)發(fā)offer sdp

answer：轉(zhuǎn)發(fā)answer sdp

candidate：轉(zhuǎn)發(fā)candidate sdp

join：加入房間

var jsonMsg = {'cmd': 'join','roomId': roomId,'uid': localUserId, };

resp--join：當(dāng)join房間后發(fā)現(xiàn)房間已經(jīng)存在另一個人時則返回另一個人的uid；如果只有自己則不返回

jsonMsg = {'cmd': 'resp‐join','remoteUid': remoteUid };

leave：離開房間，服務(wù)器收到leave信令則檢查同一房間是否有其他人，如果有其他人則通知他有人離開

var jsonMsg = {'cmd': 'leave','roomId': roomId,'uid': localUserId, };

new--peer：服務(wù)器通知客戶端有新人加入，收到new-peer則發(fā)起連接請求

var jsonMsg = {'cmd': 'new‐peer','remoteUid': uid };

peer--leave：服務(wù)器通知客戶端有人離開

var jsonMsg = {'cmd': 'peer‐leave','remoteUid': uid };

offer：轉(zhuǎn)發(fā)offer sdp

var jsonMsg = {'cmd': 'offer','roomId': roomId,'uid': localUserId,'remoteUid':remoteUserId,'msg': JSON.stringify(sessionDescription) };

answer：轉(zhuǎn)發(fā)answer sdp

var jsonMsg = {'cmd': 'answer','roomId': roomId,'uid': localUserId,'remoteUid':remoteUserId,'msg': JSON.stringify(sessionDescription) };

candidate：轉(zhuǎn)發(fā)candidate sdp

var jsonMsg = {'cmd': 'candidate','roomId': roomId,'uid': localUserId,'remoteUid':remoteUserId,'msg': JSON.stringify(candidateJson) };

2 媒體協(xié)商

1. createOffer

基本格式

aPromise = myPeerConnection.createOffer([options])?

[options]

var options = {offerToReceiveAudio: true, // 告訴另一端，你是否想接收音頻，默認trueofferToReceiveVideo: true, // 告訴另一端，你是否想接收視頻，默認trueiceRestart: false, // 是否在活躍狀態(tài)重啟ICE網(wǎng)絡(luò)協(xié)商 };

iceRestart：只有在處于活躍的時候，iceRestart=false才有作用。

測試：https://webrtc.github.io/samples/src/content/peerconnection/restart-ice/

2. createAnswer

基本格式

aPromise = RTCPeerConnection .createAnswer（[ options ]）? 目前createAnswer的options是無效的。

3. setLocalDescription

基本格式

aPromise = RTCPeerConnection .setLocalDescription（sessionDescription）;

4. setRemoteDescription

基本格式

aPromise = pc.setRemoteDescription（sessionDescription）;

3. 加入Stream/Track

1. addTrack

基本格式

rtpSender = rtcPeerConnection .addTrack（track，stream …）;

track：添加到RTCPeerConnection中的媒體軌（音頻track/視頻track）

stream：getUserMedia中拿到的流，指定track所在的stream

4. 網(wǎng)絡(luò)協(xié)商

1. addIceCandidate

基本格式：

aPromise = pc.addIceCandidate（候選人）;

candidate

屬性說明

candidate	候選者描述信息
sdpMid	與候選者相關(guān)的媒體流的識別標(biāo)簽
sdpMLineIndex	在SDP中 m=的索引值
usernameFragment	包括了遠端的唯一標(biāo)識

var candidateJson = {'label': event.candidate.sdpMLineIndex,'id': event.candidate.sdpMid,'candidate': event.candidate.candidate};

注意Android和Web端的不同。

---

2. RTCPeerConnection

1. 構(gòu)造函數(shù)：

語法：

pc = new RTCPeerConnection（[ configuration ]）;

2. configuration可選

bundlePolicy 一般用max-bundle

banlanced：音頻與視頻軌使用各自的傳輸通道 max-compat：每個軌使用自己的傳輸通道 max-bundle：都綁定到同一個傳輸通道

iceTransportPolicy 一般用all

指定ICE的傳輸策略 relay：只使用中繼候選者 all：可以使用任何類型的候選者

iceServers

其由RTCIceServer組成，每個RTCIceServer都是一個ICE代理的服務(wù)器

屬性含義

credential	憑據(jù)，只有TURN服務(wù)使用
credentialType	憑據(jù)類型，可以password或oauth
urls	用于連接服中的ur數(shù)組
username	用戶名，只有TURN服務(wù)使用

rtcpMuxPolicy 一般用require

rtcp的復(fù)用策略，該選項在收集ICE候選者時使用

選項說明

negotiate	收集RTCP與RTP復(fù)用的ICE候選者，如果RTCP能復(fù)用就與RTP復(fù)用，如果不能復(fù)用，就將他們單獨使用
require	只能收集RTCP與RTP復(fù)用的ICE候選者，如果RTCP不能復(fù)用，則失敗

3. 重要事件

onicecandidate：收到候選者時觸發(fā)的事件

ontrack：獲取遠端流

onconnectionstatechange PeerConnection的連接狀態(tài)，參考：https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState

pc.onconnectionstatechange = function(event) {switch(pc.connectionState) {case "connected":// The connection has become fully connectedbreak;case "disconnected":case "failed":// One or more transports has terminated unexpectedly or in an errorbreak;case "closed":// The connection has been closedbreak;} }

oniceconnectionstatechange ice連接事件 具體參考：https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/iceConnectionState

3. 實現(xiàn)WebRTC音視頻通話

開發(fā)步驟

客戶端顯示界面

打開攝像頭并顯示到頁面

websocket連接

join、new-peer、resp-join信令實現(xiàn)

leave、peer-leave信令實現(xiàn)

offer、answer、candidate信令實現(xiàn)

綜合調(diào)試和完善

1. 客戶端顯示界面

步驟：創(chuàng)建html頁面

主要是input、button、video控件的布局。

2. 打開攝像頭并顯示到頁面

3. websocket連接

4. join、new-peer、resp-join信令實現(xiàn)

思路：

點擊加入按鈕；

響應(yīng)加入按鈕事件；

將join發(fā)送給服務(wù)器；

服務(wù)器根據(jù)當(dāng)前房間的人數(shù)做處理，如果房間已經(jīng)有人則通知房間里面的人有新人加入（new-peer），并通知自己房間里面是什么人（respjoin）

5. leave、peer-leave信令實現(xiàn)

思路：

點擊離開按鈕；

響應(yīng)離開按鈕事件；

將leave發(fā)送給服務(wù)器；

服務(wù)器處理leave，將發(fā)送者刪除并通知房間(peer-leave)的其他人；

房間的其他人在客戶端響應(yīng)peer-leave事件

6. offer、answer、candidate信令實現(xiàn)

思路：

收到new-peer （handleRemoteNewPeer處理），作為發(fā)起者創(chuàng)建RTCPeerConnection，綁定事件響應(yīng)函數(shù)，加入本地流；

創(chuàng)建offer sdp，設(shè)置本地sdp，并將offer sdp發(fā)送到服務(wù)器；

服務(wù)器收到offer sdp 轉(zhuǎn)發(fā)給指定的remoteClient；

接收者收到offer，也創(chuàng)建RTCPeerConnection，綁定事件響應(yīng)函數(shù)，加入本地流；

接收者設(shè)置遠程sdp，并創(chuàng)建answer sdp，然后設(shè)置本地sdp并將answer sdp發(fā)送到服務(wù)器；

服務(wù)器收到answer sdp 轉(zhuǎn)發(fā)給指定的remoteClient；

發(fā)起者收到answer sdp，則設(shè)置遠程sdp；

發(fā)起者和接收者都收到ontrack回調(diào)事件，獲取到對方碼流的對象句柄；

發(fā)起者和接收者都開始請求打洞，通過onIceCandidate獲取到打洞信息（candidate）并發(fā)送給對方

如果P2P能成功則進行P2P通話，如果P2P不成功則進行中繼轉(zhuǎn)發(fā)通話。

7. 綜合調(diào)試和完善

思路：

點擊離開時，要將RTCPeerConnection關(guān)閉（close）；

點擊離開時，要將本地攝像頭和麥克風(fēng)關(guān)閉；

檢測到客戶端退出時，服務(wù)器再次檢測該客戶端是否已經(jīng)退出房間。

RTCPeerConnection時傳入ICE server的參數(shù)，以便當(dāng)在公網(wǎng)環(huán)境下可以進行正常通話。

啟動coturn，安裝：ubantu安裝coturn穿透服務(wù)器

# nohup是重定向命令，輸出都將附加到當(dāng)前目錄的 nohup.out 文件中； 命令后加 & ,后臺執(zhí)行起來后按 ctr+c,不會停止 sudo nohup turnserver ‐L 0.0.0.0 ‐a ‐u test:test ‐v ‐f ‐r nort.gov & # 前臺啟動 sudo turnserver ‐L 0.0.0.0 ‐a ‐u test:test ‐v ‐f ‐r nort.gov #然后查看相應(yīng)的端口號3478是否存在進程 sudo lsof ‐i:3478

設(shè)置configuration，先設(shè)置為relay中繼模式，只有relay中繼模式可用的時候，才能部署到公網(wǎng)去（部署到公網(wǎng)后也先測試relay）。

var defaultConfiguration = {bundlePolicy: "max-bundle",rtcpMuxPolicy: "require",iceTransportPolicy:"relay",//relay 或者 all// 修改ice數(shù)組測試效果，需要進行封裝iceServers: [{"urls": ["turn:8.141.75.248:3478?transport=udp","turn:8.141.75.248:3478?transport=tcp" // 可以插入多個進行備選],"username": "test","credential": "test"},{"urls": ["stun:8.141.75.248:3478"]}]};pc = new RTCPeerConnection(defaultConfiguration);

relay中繼網(wǎng)絡(luò)狀況，命令：sudo sar -n DEV 1

局域網(wǎng)P2P

總結(jié)

以上是生活随笔為你收集整理的webrtc一对一通话的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。