一、什么是WebRTC
WebRTC技術(shù)是激烈的開(kāi)放的Web戰(zhàn)爭(zhēng)中一大突破-Brendan Eich, inventor of JavaScript。
簡(jiǎn)單來(lái)說(shuō)，WebRTC 是一個(gè)音視頻處理+及時(shí)通訊的開(kāi)源庫(kù)。在實(shí)時(shí)通信中，音視頻的采集和處理是一個(gè)很復(fù)雜的過(guò)程。比如音視頻流的編解碼、降噪和回聲消除等。由Google發(fā)起開(kāi)源，其中包含視頻音頻采集，編解碼，數(shù)據(jù)傳輸，音視頻展示等功能，我們可以通過(guò)技術(shù)快速地構(gòu)建出一個(gè)音視頻通訊應(yīng)用。雖然其名為WebRTC，但是實(shí)際上它不只是支持Web之間的音視頻通訊，還支持Android以及IOS端，此外由于該項(xiàng)目是開(kāi)源的，我們也可以通過(guò)編譯C++代碼，從而達(dá)到全平臺(tái)的互通。
WebRTC的架構(gòu)圖為：
（圖片來(lái)自網(wǎng)絡(luò)）
我們可以看到模塊化和分層的設(shè)計(jì)，我們文章的目的是演示瀏覽器端對(duì)端的連接流程，焦點(diǎn)是服務(wù)端信令服務(wù)器的實(shí)現(xiàn)方式，但需要提前介紹一些WebRTC的基本概念和連接流程。
二、基礎(chǔ)概念
流和軌
-
Track 軌道，可以理解每一路音頻或視頻，為一個(gè)軌，互不相交，類(lèi)比火車(chē)軌道。
-
MediaStream 媒體流，每個(gè)媒體流中包含若干軌道，可以將音頻軌，視頻軌打包在一起。
三、幾個(gè)關(guān)鍵類(lèi)
-
MediaStream 媒體流類(lèi)，MeidiaStream用于將多個(gè)MediaStreamTrack對(duì)象打包到一起。一個(gè)MediaStream可包含audio track 與video track,并且可以添加或者刪除。
-
RTCPeerConnection 連接類(lèi)，包含非常多重要功能，屏蔽復(fù)雜技術(shù)細(xì)節(jié)，便于應(yīng)用層使用，包括但不限于連接管理，P2P類(lèi)型檢測(cè)，NAT穿透，中轉(zhuǎn)等。
-
RTCDataChannel 非音視頻數(shù)據(jù)傳輸類(lèi)，這個(gè)類(lèi)在我們的例子中沒(méi)有涉及到。可以簡(jiǎn)單理解為將媒體流信息或者數(shù)據(jù)信息塞到連接中，進(jìn)行傳輸。
四、端對(duì)端連接流程
兩個(gè)不同網(wǎng)絡(luò)環(huán)境瀏覽器，要實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)的實(shí)時(shí)音視頻對(duì)話(huà)，需要處理那些問(wèn)題?
媒體協(xié)商
雙方需要知道對(duì)方支持的媒體格式，SDP（Session Description Protocol）是一種會(huì)話(huà)描述協(xié)議，視頻通訊的雙方必須先交換SDP信息，才能進(jìn)一步互相通信。
網(wǎng)絡(luò)協(xié)商
雙方要了解對(duì)方的網(wǎng)絡(luò)情況，嘗試尋求一個(gè)可以互相通訊的鏈路，其中有尋路選擇，如果確實(shí)沒(méi)辦法建立點(diǎn)對(duì)點(diǎn)鏈路，會(huì)使用中繼服務(wù)器來(lái)進(jìn)行轉(zhuǎn)發(fā)。如果是內(nèi)網(wǎng)，或者大部分NAT網(wǎng)絡(luò)環(huán)境下，是可以建立端到端連接。在解決網(wǎng)絡(luò)打通問(wèn)題時(shí)候，有幾個(gè)概念。
-
STUN（Session Traversal Utilities for NAT，NAT會(huì)話(huà)穿越應(yīng)用程序）是一種網(wǎng)絡(luò)協(xié)議，它允許位于NAT后的客戶(hù)端找出自己的公網(wǎng)地址，查出自己位于哪種類(lèi)型的NAT之后以及NAT在公網(wǎng)的端口映射信息。這些信息被用來(lái)在兩端創(chuàng)建UDP連接通信。
-
TURN (Traversal Using Relays around NAT)，如果客戶(hù)端在NAT之后， 那么在一些網(wǎng)絡(luò)情景下，有可能建立點(diǎn)對(duì)點(diǎn)的通訊連接，這時(shí)就需要公網(wǎng)的服務(wù)器作為一個(gè)中繼， 對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)發(fā)。
學(xué)習(xí)過(guò)程中，STUN和TURN服務(wù)器我們可使用coturn開(kāi)源項(xiàng)目來(lái)搭建。
數(shù)據(jù)交換服務(wù)-信令服務(wù)器
WebRTC實(shí)現(xiàn)并沒(méi)有規(guī)定信令服務(wù)器的實(shí)現(xiàn)方式和相關(guān)協(xié)議，這給了業(yè)務(wù)方技術(shù)選型極大的靈活。我們今天就是使用PHP+Swoole協(xié)程實(shí)現(xiàn)一個(gè)簡(jiǎn)單信令服務(wù)器。下面是一個(gè)端到端連接的流程圖，整個(gè)核心流程邏輯都在圖里面。
（圖片來(lái)自網(wǎng)絡(luò)）
五、使用Swoole實(shí)現(xiàn)信令服務(wù)器文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-843485.html
客戶(hù)端代碼模擬???????文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-843485.html
<body><div style="display: block"><button class="btn" onclick="start()">連接</button><button class="btn" onclick="leave()">離開(kāi)</button></div><div><div class="videos"><h1>Local</h1><video id="localVideo" autoplay></video></div><div class="videos"><h1>Remote</h1><video id="remoteVideo" autoplay></video></div></div><script src="assets/js/adapter.js"></script><script type="text/javascript">const ws_config = '<?= $signaling_server ?>';const localVideo = document.getElementById('localVideo');const remoteVideo = document.getElementById('remoteVideo');const configuration = {iceServers: [{urls: '<?= $stun_server ?>'}]};let room_id = getQueryVariable('room_id');if (room_id == '' || room_id == null) {room_id = Math.random().toString(36).slice(-8);location.href = '?room_id=' + room_id;}let subject = 'room-' + room_id;//當(dāng)前主題let answer = 0;let ws = null;let pc, localStream;function getMediaStream(stream) {localVideo.srcObject = localStream;localStream = stream;}function start() {ws = new WebSocket(ws_config);ws.onopen = function (e) {subscribe(subject);if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {console.error('the getUserMedia is not supported!');
到了這里，關(guān)于使用Swoole協(xié)程實(shí)現(xiàn) WebRTC 信令服務(wù)器的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
