·超級(jí)碼麗·的爛筆頭 更于：2022-12-07
一堆文字理論.... 且記錄一下，直奔主題看最后示例。
WebRTC
Web實(shí)時(shí)通信技術(shù)，全稱(Web Real-Time Communication)。實(shí)時(shí)通訊功能通過標(biāo)準(zhǔn)API與WEB應(yīng)用程序交互，使用瀏覽器與操作系統(tǒng)通訊。
一些名詞
SIP：會(huì)話啟動(dòng)協(xié)議。
NAT：網(wǎng)絡(luò)地址轉(zhuǎn)換。
RTP：實(shí)時(shí)傳輸協(xié)議。
SDP：會(huì)話描述協(xié)議。
打洞：穿透NAT。
新特點(diǎn)
對(duì)等連接：瀏覽器與瀏覽器之間的交互。
信令服務(wù)器：在瀏覽器和對(duì)等連接另一端之間提供信令通道。信令可通過HTTP或WebSocket傳送到Web服務(wù)器，或傳送到只負(fù)責(zé)處理信令的Web服務(wù)器。
建立WebRTC會(huì)話關(guān)鍵步驟
- 獲取本地媒體。getUserMedia()，此方法可獲取單個(gè)本地MediaStream，獲取多個(gè)媒體流可使用MediaStream API組合到所需流中，注意，需要獲取用戶授權(quán)后方可訪問用戶麥克風(fēng)或攝像頭。
- 在瀏覽器和對(duì)等端（其它瀏覽器或終端）之間建立連接。核心：RTCPeerConnection。
- 把媒體和數(shù)據(jù)關(guān)聯(lián)到改連接。
- 交換會(huì)話描述。
- 關(guān)閉連接。在對(duì)等連接中，任何一端的瀏覽器都可以關(guān)閉連接，通過RTCPeerConnection對(duì)象調(diào)用close()。如果某一端的瀏覽器斷開Internet連接或發(fā)生奔潰，媒體或數(shù)據(jù)通道中發(fā)送的持久連接（keep-alive） 請(qǐng)求將失效，另一端瀏覽器將重新嘗試打洞，打洞失敗則關(guān)閉會(huì)話。會(huì)話結(jié)束，瀏覽器刪除訪問設(shè)備的授權(quán)許可，新的會(huì)話需要重新獲得許可。
約束機(jī)制
約束機(jī)制可看作是一種復(fù)雜的默認(rèn)設(shè)置系統(tǒng)，它允許開發(fā)人員對(duì)程序細(xì)節(jié)進(jìn)行規(guī)定，同時(shí)讓瀏覽器決定該范圍之外的事務(wù)。比如，應(yīng)用程序知道什么樣的分辨率最適合自己，但是瀏覽器也可快速更改編碼器參數(shù)來應(yīng)對(duì)不同程度的網(wǎng)絡(luò)堵塞。
MDN文檔：constraints 參數(shù)是一個(gè)包含了video 和 audio兩個(gè)成員的MediaStreamConstraints 對(duì)象，用于說明請(qǐng)求的媒體類型。
獲取本地音視頻流示例
示例簡單地調(diào)用了mediaDevices.getUserMedia()獲取媒體流（獲得對(duì)攝像頭和麥克風(fēng)的授權(quán)后），將流分配給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>
