·超級碼麗·的爛筆頭 更于：2022-12-07
一堆文字理論.... 且記錄一下，直奔主題看最后示例。
WebRTC
Web實時通信技術，全稱(Web Real-Time Communication)。實時通訊功能通過標準API與WEB應用程序交互，使用瀏覽器與操作系統(tǒng)通訊。
一些名詞
SIP：會話啟動協(xié)議。
NAT：網(wǎng)絡地址轉換。
RTP：實時傳輸協(xié)議。
SDP：會話描述協(xié)議。
打洞：穿透NAT。
新特點
對等連接：瀏覽器與瀏覽器之間的交互。
信令服務器：在瀏覽器和對等連接另一端之間提供信令通道。信令可通過HTTP或WebSocket傳送到Web服務器，或傳送到只負責處理信令的Web服務器。
WebRTC系統(tǒng)包含元素
建立WebRTC會話關鍵步驟
- 獲取本地媒體。getUserMedia()，此方法可獲取單個本地MediaStream，獲取多個媒體流可使用MediaStream API組合到所需流中，注意，需要獲取用戶授權后方可訪問用戶麥克風或攝像頭。
- 在瀏覽器和對等端（其它瀏覽器或終端）之間建立連接。核心：RTCPeerConnection。
- 把媒體和數(shù)據(jù)關聯(lián)到改連接。
- 交換會話描述。
- 關閉連接。在對等連接中，任何一端的瀏覽器都可以關閉連接，通過RTCPeerConnection對象調用close()。如果某一端的瀏覽器斷開Internet連接或發(fā)生奔潰，媒體或數(shù)據(jù)通道中發(fā)送的持久連接（keep-alive） 請求將失效，另一端瀏覽器將重新嘗試打洞，打洞失敗則關閉會話。會話結束，瀏覽器刪除訪問設備的授權許可，新的會話需要重新獲得許可。
約束機制
約束機制可看作是一種復雜的默認設置系統(tǒng)，它允許開發(fā)人員對程序細節(jié)進行規(guī)定，同時讓瀏覽器決定該范圍之外的事務。比如，應用程序知道什么樣的分辨率最適合自己，但是瀏覽器也可快速更改編碼器參數(shù)來應對不同程度的網(wǎng)絡堵塞。
MDN文檔：constraints 參數(shù)是一個包含了video 和 audio兩個成員的MediaStreamConstraints 對象，用于說明請求的媒體類型。
獲取本地音視頻流示例
示例簡單地調用了mediaDevices.getUserMedia()獲取媒體流（獲得對攝像頭和麥克風的授權后），將流分配給video。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
width: 320px;
height: 240px;
border: 1px solid #000;
}
div {
display: inline-block;
}
</style>
</head>
<body>
<script>
window.onload = function () {
getMedia();
}
function getMedia() {
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then((stream) => {
gotUserMedia(stream);
}).catch((err) => {
didntGetUserMedia(err);
})
}
function gotUserMedia(stream) {
const myVideo = document.getElementById('myVideo');
myVideo.srcObject = stream;
myVideo.onloadedmetadata = function () {
myVideo.play();
}
}
function didntGetUserMedia () {
console.error('couldn't get video:', err);
}
</script>
<div id="setup">
<p>WebRTC Book Demo (local media only)</p>
</div>
<br/>
<div style="width: 30%;vertical-align:top;">
<div>
<video id="myVideo" autoplay controls muted></video>
</div>
</div>
</body>
</html>
獲取流運行結果
