什么是WebRTC
webRtc(web real-time Communication) 恨锚，旨在建立一個瀏覽器間實時通信的平臺
- 谷歌開源
- 跨平臺（android损姜，IOS摧阅，windows，Linux）
- 實時傳輸（提供強大的音視頻引擎）
RTC涉及的流程及內容
采集->編碼->傳輸->解碼->渲染
采集:捕獲攝像頭绷蹲、麥克風設備數(shù)據(jù)（yuv棒卷，pcm）
編碼：將yuv顾孽、pcm格式數(shù)據(jù)編碼（h264、vp8比规、opus若厚、aac）
傳輸：將編碼后的楨數(shù)據(jù)打包傳輸，應對弱網(wǎng)環(huán)境（QOS）蜒什，RTP/RTCP協(xié)議傳輸數(shù)據(jù)
解碼：將編碼后的數(shù)據(jù)解碼成yuv/pcm數(shù)據(jù)
渲染：將解碼后的數(shù)據(jù)展示到渲染窗口
WebRTC架構
架構說明：
your web app:是你的應用程序通過Web Api方式實現(xiàn)的音視頻程序测秸。
Web Api: 在C++的API層封裝了一次WebAPI 的WEBRTC接口給上層應用調用。
WEBRTC C++ API:暴露C++封裝的WEBRTC真實實現(xiàn)吃谣。
Session Manager:會話層乞封，用于接收會話信息和結束會話信息做裙。
Voice Engine:音頻引擎編解碼岗憋。
Video Engine:視頻引擎編解碼
Transport：數(shù)據(jù)傳輸引擎。
WebRTC通信流程圖
描述：
1.客戶端A要與客戶端B通信锚贱，需要連接信令服務仔戈。
2.客戶端A要與客戶端B通信，需要連接STUN/TURN服務器做NAT轉發(fā)IP轉換拧廊。
3.客戶端A要與客戶端B通信监徘，需要通過信令服務將兩者NAT轉發(fā)IP做交換。
4.兩者媒體協(xié)商成功吧碾，就可以音視頻通信凰盔。
WebRTC API 枚舉音視頻設備
//功能說明：枚舉音視頻設備
//返回說明：描述設備的MediaDeviceInfo數(shù)組
var promise= navigator.mediaDevices.enumerateDevices();
//示例文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices
//注意事項：
// 1.如果需要獲取音視頻枚舉必須給瀏覽器設備允許獲取音頻或視頻設備信息。
// 2.如果項目發(fā)布到互聯(lián)網(wǎng)中需要使用HTTPS協(xié)議
WebRTC API 采集音視頻設備數(shù)據(jù)
//功能說明：采集音視頻設備數(shù)據(jù)
//參數(shù)說明：paramters
var promise = navigator.mediaDevices.getUserMedia(constaints);
//示例文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
//注意事項：獲取音視頻數(shù)據(jù)需要用<video></video><audio></audio>標簽播放
WebRTC API 采集桌面窗口數(shù)據(jù)
//功能說明：采集桌面數(shù)據(jù)
//參數(shù)說明：paramters
var promise= navigator.mediaDevices.getDisplayMedia(constaints);
//示例文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia
WebRTC API 適配
WebRTC標準推出之前倦春，各大瀏覽器廠商使用自己對WebRTC規(guī)范支持API不一致
-
例如：
- 谷歌：webkitGetUserMedia
- 火狐：mozGetUserMedia
-
如果用戶自行編寫適配不同瀏覽器的應用層程序户敬，如下所示
- var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
兼容不同瀏覽器API的適配程序
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
MediaStream
播放音視頻返回的是MediaStream對象，MediaStream用于表示媒體內容睁本，它包含了一系列音視頻軌道（MediaStream API）
構造方式：getUserMedia / getDisplayMedia / new MediaStream();
主要方法：
MediaStream.addTrack();
MediaStream.getTrack() / MediaStream.getAudioTracks() / MediaStream.getVideoTracks()
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream
MediaStreamTrack
MediaStreamTrack表示一個具體的音視頻軌道尿庐，例如音頻軌道，適配軌道
重要數(shù)據(jù)：
MediaStreamTrack.id
MediaStreamTrack.kind
MediaStreamTrack.label
重要方法：
MediaStreamTrack.getConstraints() 獲取軌道約束
MediaStreamTrack.getSettings() 獲取軌道當前設置屬性
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStreamTrack
RTCPeerConnection
概念：RTCPeerConnection 用于表示一個與遠程的對等連接
構造方式：var pc = new RTCPeerConnection([configuration])
媒體協(xié)商的主要方式：
AddTrack:將音視頻軌道添加到RTCPeerConnection,這些軌道將發(fā)送到對端
createOffer / createAnswer: 生成offer /answer SDP信息
setLocalDescription/setRemoteDescription :將SDP描述信息設置RTCPeerConnection 的本地/遠程描述信息
...其他方法后續(xù)補充
https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection
媒體協(xié)商
問題：什么是媒體協(xié)商呢堰，為什么要進行媒體協(xié)商抄瑟？媒體協(xié)商包含了哪些信息？
Amy和Bob要進行音視頻通話
Amy采集攝像頭/麥克風數(shù)據(jù)枉疼，進行編碼皮假，打包，然后通過網(wǎng)絡輸出Bob
Bob接收媒體包數(shù)據(jù)后需要組楨骂维，解碼钞翔，渲染
雙方需要協(xié)商使用的編解碼器，編解碼器的具體參數(shù)席舍，通過包含了哪些媒體信息布轿，媒體怎么區(qū)分等
https://blog.csdn.net/Chiang2018/article/details/122741850
媒體協(xié)商流程
媒體協(xié)商SDP協(xié)議格式
https://blog.csdn.net/weixin_38102771/article/details/121259974?spm=1001.2014.3001.5501
WebRTC 網(wǎng)絡穿越
思考：兩個WebRTC客戶端怎么實現(xiàn)端到端通訊？
場景1:客戶端A和客戶端B都處于公網(wǎng)
場景2:客戶端A和客戶端B有一方處于公網(wǎng)，另外一方處于內外（NAT之后）
-
場景3:客戶端A和客戶端B處于內外
- A：同一內部網(wǎng)絡
- B：不同內部網(wǎng)絡
NAT（NETWORK Address Translator）
什么是NAT?
網(wǎng)絡地址轉換汰扭，負責將內外地址轉換公網(wǎng)地址的互相轉換
為什么需要NAT稠肘？
IPV4地址不夠
網(wǎng)絡安全考慮
NAT類型
P2P穿越
WebRTC打動地址
https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/
STUN協(xié)議說明
https://blog.csdn.net/weixin_38102771/article/details/124069029?spm=1001.2014.3001.5502
TURN協(xié)議說明
https://blog.csdn.net/weixin_38102771/article/details/124530900?spm=1001.2014.3001.5502
使用coturn搭建STUN/TURN服務器
sudo apt-get update
sudo apt-get install coturn
#修改/etc/turnserver.conf文件的配置，如下
listening-port=3478
external-ip=公網(wǎng)服務器外網(wǎng)ip
lt-cred-mech
user=username1:password1
realm=mycompany.org
#啟動
turnserver-c /etc/turnserver.conf
https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/
RTC協(xié)議
https://blog.csdn.net/weixin_38102771/article/details/121917634
ICE
ICE:交互式連接建立（Interactive Connectivity Establishment）
1.收集候選地址
2.交互候選項
3.STUN 連接檢查
4.選定地址并啟動媒體
5.KeepAlive
收集候選地址既收集本端或許可用于接收媒體以建立起對等連接的IP地址和端口
候選地址分類：
1.主機候選者（host）：網(wǎng)卡的實際地址
2.服務器反射候選者（srflx）：STUN服務器恢復STUN binding success response 中的反射地址萝毛，最后外層NAT的地址
3.中續(xù)候選者（relay）:請求turn服務器的中續(xù)地址
4.對端反射候選者（prflx）：從對端發(fā)送的STUN binding request中獲取傳輸?shù)刂废钜酰径藷o法收集到該類型候選地址。
RTCPeerConnection收集并交換候選者
RTCPeerConnection收集并交換候選者
事件: icecandidate
發(fā)生時機: RTCPeerConnection調用setLocalDescription之后
處理方式: rtcPeerConnection.onicecandidate =(event)=>{
if(event.candidate){
//將本地候選者發(fā)送給對端
}else {
//表示在本地協(xié)商中沒有更多的候選者了
}
https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/icecandidate_event
RTCPeerConnection收集并交換候選者
接收到對端候選者后的處理方式addlcecandidate
語法: addlceCandidate(candidate)
參數(shù): candidate 類型是RTCIceCandidatelnit环揽，包含 candidate, sdpMid, sdpMLinelndex, usernameFragment 成
https://developer.mozillaorg/en-US/docs/Web/API/RTCIceCandidate/RTCIceCandidate
RTCPeerConnection ontrack
事件:ontrack
發(fā)生時機:收到對端的媒體軌道
處理方式:將MediaStreamTrack添加到MediaStream庵佣，將MediaStream賦值給<video>展示出對端的媒體畫面
var remoteMs =new MediaStream();
rtcPeerConnection.ontrack =(event)=> (
remoteMs.addTrack(event.track);
videoElement.srcObiect =remotes
}
RTCPeerConnection構造參數(shù)說明明
構造方式:
var pc= new RTCPeerConnection([configuration]);
interface RTCConfiguration {
bundlePolicy?:RTCBundlePolicy;
certificates?:RTCCertificatell;
iceCandidatePoolSize?:number;
iceServers?:RTCIceServerl];
iceTransportPolicy?:RTCIceTransportPolicy;rtcpMuxPolicy?:RTCRtcpMuxPolicy;
https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection
信令服務器
筆記來源
https://www.bilibili.com/video/BV1Zz4y137Un?p=20&vd_source=d754ed76ce303daef624fa3764425cd2
