前言
WebRTC是一個(gè)開(kāi)源項(xiàng)目泳赋，旨在使得瀏覽器能為實(shí)時(shí)通信（RTC）提供簡(jiǎn)單的JavaScript接口。說(shuō)的簡(jiǎn)單明了一點(diǎn)就是讓瀏覽器提供JS的即時(shí)通信接口卸耘。這個(gè)接口所創(chuàng)立的信道并不是像WebSocket一樣祠饺，打通一個(gè)瀏覽器與WebSocket服務(wù)器之間的通信，而是通過(guò)一系列的信令叽掘，建立一個(gè)瀏覽器與瀏覽器之間（peer-to-peer）的信道楣铁，這個(gè)信道可以發(fā)送任何數(shù)據(jù)，而不需要經(jīng)過(guò)服務(wù)器更扁。并且WebRTC通過(guò)實(shí)現(xiàn)MediaStream盖腕，通過(guò)瀏覽器調(diào)用設(shè)備的攝像頭、話筒浓镜，使得瀏覽器之間可以傳遞音頻和視頻
WebRTC使得實(shí)時(shí)通信變成一種標(biāo)準(zhǔn)功能溃列，任何Web應(yīng)用都無(wú)需借助第三方插件和專有軟件，而是通過(guò)簡(jiǎn)單地JavaScript API即可完成竖哩。
在WebRTC中哭廉，有三個(gè)主要的知識(shí)點(diǎn)，理解了這三個(gè)知識(shí)點(diǎn)相叁，也就理解了WebRTC的底層實(shí)現(xiàn)原理遵绰。這三個(gè)知識(shí)點(diǎn)分別是：
MediaStream：獲取音頻和視頻流
RTCPeerConnection：音頻和視頻數(shù)據(jù)通信
RTCDataChannel：任意應(yīng)用數(shù)據(jù)通信
MediaStream
html
<!DOCTYPE html>
<html>
<head>
<title>Realtime communication with WebRTC</title>
</head>
<body>
<h1>Realtime communication with WebRTC</h1>
<video autoplay playsinline></video>
<script src="js/main.js"></script>
</body>
</html>
main.js
const mediaStreamConstraints = {
video: true,
};
// Video element where stream will be placed.
const localVideo = document.querySelector('video');
// Local stream that will be reproduced on the video.
let localStream;
// Handles success by adding the MediaStream to the video element.
function gotLocalMediaStream(mediaStream) {
localStream = mediaStream;
localVideo.srcObject = mediaStream;
}
// Handles error by logging a message to the console with the error message.
function handleLocalMediaStreamError(error) {
console.log('navigator.getUserMedia error: ', error);
}
// Initializes media stream.
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
.then(gotLocalMediaStream).catch(handleLocalMediaStreamError);
上面這段代碼，就是獲取了本地的攝像頭增淹，拿到權(quán)限后把他添加到video中椿访。
localStream放在了全局，為了可以在命令行中調(diào)試方便虑润，可方便的查看輸出成玫，生產(chǎn)環(huán)境的代碼不要這樣寫(xiě)。
在JS中拳喻，我們通過(guò)getUserMedia函數(shù)來(lái)處理音頻和視頻哭当，該函數(shù)接收三個(gè)參數(shù)，分別是音視頻的約束冗澈，成功的回調(diào)以及失敗的回調(diào)钦勘。
其中第一個(gè)參數(shù)約束，默認(rèn)是關(guān)掉音頻audio的亚亲，所以指定視頻就將只打開(kāi)視頻彻采。
也可像下面一樣指定詳細(xì)信息
const mediaStreamConstraints = {
video: {
width: {
min: 1280
},
height: {
min: 720
}
}
}
MediaTrackConstraints specification 列舉出了所有的約束腐缤，雖然不是每個(gè)瀏覽器都支持全部這些選項(xiàng)。
在底層，瀏覽器通過(guò)音頻和視頻引擎對(duì)捕獲的原始音頻和視頻流加以處理特笋，除了對(duì)畫(huà)質(zhì)和音質(zhì)增強(qiáng)之外剃浇，還得保證音頻和視頻的同步。
由于音頻和視頻是用來(lái)傳輸?shù)牧晕铮虼顺ザ桑l(fā)送方還要適應(yīng)不斷變化的帶寬和客戶端之間的網(wǎng)絡(luò)延遲調(diào)整輸出的比特率。
對(duì)于接收方來(lái)說(shuō)霸奕，則必須實(shí)時(shí)解碼音頻和視頻流溜宽，并適應(yīng)網(wǎng)絡(luò)抖動(dòng)和時(shí)延。其工作原理如下圖所示：
如上成功回調(diào)的stream對(duì)象中攜帶者一個(gè)或多個(gè)同步的Track质帅，如果你同時(shí)在約束中設(shè)置了音頻和視頻為true适揉，則在stream中會(huì)攜帶有音頻Track和視頻Track，每個(gè)Track在時(shí)間上是同步的煤惩。
stream的輸出可以被發(fā)送到一或多個(gè)目的地：本地的音頻或視頻元素嫉嘀、后期處理的JavaScript代理，或者遠(yuǎn)程另一端魄揉。如下圖所示：
