@[TOC](WebRTC研究 (二) 實(shí)例demo)
1. WebRTC 簡(jiǎn)介
webrtc官網(wǎng)
webrtc對(duì)iOS使用的說(shuō)明
2.WebRTC 獲取視頻流Demo
2.1 WEBRTC結(jié)構(gòu)
2.1.1 完整的WebRTC框架,分為 Server端、Client端兩大部分。
- Server端:
Stun服務(wù)器: 服務(wù)器用于獲取設(shè)備的外部網(wǎng)絡(luò)地址
Turn服務(wù)器: 服務(wù)器是在點(diǎn)對(duì)點(diǎn)失敗后用于通信中繼
信令服務(wù)器: 負(fù)責(zé)端到端的連接。兩端在連接之初,需要交換信令,如sdp、candidate等,都是通過(guò)信令服務(wù)器 進(jìn)行轉(zhuǎn)發(fā)交換的。 - Client有四大應(yīng)用端:
AndroidiOSPC Broswer
2.1.2 介紹下WebRTC三個(gè)主要API,以及實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)連接的流程。
-
MediaStream:通過(guò)MediaStream的API能夠通過(guò)設(shè)備的攝像頭及話筒獲得視頻、音頻的同步流 -
RTCPeerConnection:RTCPeerConnection是WebRTC用于構(gòu)建點(diǎn)對(duì)點(diǎn)之間穩(wěn)定、高效的流傳輸?shù)慕M件 -
RTCDataChannel:RTCDataChannel使得瀏覽器之間(點(diǎn)對(duì)點(diǎn))建立一個(gè)高吞吐量、低延時(shí)的信道,用于傳輸任意數(shù)據(jù)。
其中RTCPeerConnection是我們WebRTC的核心組件。
WEBRTC的建立連接流程圖
webrtc流程圖.png
2.1.3 整個(gè)webrtc連接的流程說(shuō)明
其主要流程如上圖所示, 具體流程說(shuō)明如下:
- 客戶端通過(guò)socket, 和服務(wù)器建立起TCP長(zhǎng)鏈接, 這里我用了
CocoaAsyncSocket第三方框架進(jìn)行socket連接https://github.com/robbiehanson/CocoaAsyncSocket - 客戶端通過(guò)信令服務(wù)器, 進(jìn)行offer SDP 握手
SDP(Session Description Protocol):描述建立音視頻連接的一些屬性,如音頻的編碼格式、視頻的編碼格式、是否接收/發(fā)送音視頻等等
SDP是通過(guò)webrtc框架里面的PeerConnection所創(chuàng)建, 詳細(xì)創(chuàng)建請(qǐng)參考我的demo.
3.客戶端通過(guò)信令服務(wù)器, 進(jìn)行Candidate 握手
Candidate:主要包含了相關(guān)方的IP信息,包括自身局域網(wǎng)的ip、公網(wǎng)ip、turn服務(wù)器ip、stun服務(wù)器ip等
Candidate是通過(guò)webrtc框架里面的PeerConnection所創(chuàng)建, 詳細(xì)創(chuàng)建請(qǐng)參考我的demo.
- 客戶端在SDP 和Candidate握手成功后, 就建立起一個(gè)P2P端對(duì)端的鏈接, 視頻流就能直接傳輸, 不需要經(jīng)過(guò)服務(wù)器啦.
2.1.4 SDP握手流程和Candidate握手流程類似, 但有點(diǎn)繁瑣, 下面就SDP握手流程簡(jiǎn)要說(shuō)明:
SDP握手流程.png
2.1.5 用一個(gè)demo演示能很好的幫助大家對(duì)整套webrtc音視頻通信的梳理:
綜合分析了國(guó)內(nèi)外相對(duì)比較好的幾個(gè)demo, 吸取了各自的優(yōu)點(diǎn), 現(xiàn)給大家分享. (*國(guó)內(nèi)的很多demo代碼質(zhì)量相對(duì)較差而且很多都運(yùn)行不起來(lái), 多數(shù)用OC開(kāi)發(fā), 國(guó)外的相對(duì)較好)