谷歌致力於推進種族平等的黑人社區。 怎麼看。
本頁面由 Cloud Translation API 翻譯而成。
Switch to English

開始使用對等連接

對等連接是的WebRTC規格,與連接在不同的計算機兩個應用程序交易,以使用對等協議進行通信的部分。對等體之間的通信可以是視頻,音頻或任意的二進制數據(用於客戶端的支撐RTCDataChannel API)。為了探索如何在兩個實體進行連接,兩個客戶端需要提供一個ICE Server配置。這可以是一個STUN或TURN服務器,它們的作用是提供ICE候選到每個客戶端然後將其轉移到遠端對等體。這種轉移ICE候選人通常被稱為信號。

發信號

所述的WebRTC規範中包含的API用於與ICE(因特網連接建立)Server通信,但信令組件是不是它的一部分。信令需要以兩個同行分享他們應該如何連接。通常,這是通過一個普通的基於HTTP的Web API解決(即,REST服務或其他RPC機制),其中的Web應用程序可以在對等連接之前轉發必要的信息開始。

後續的代碼片段顯示了這個虛構的信令服務如何被用來發送和異步接收消息。這將是在本指南所必需的其餘實施例,其中使用的。

 // Set up an asynchronous communication channel that will be
// used during the peer connection setup
const signalingChannel = new SignalingChannel(remoteClientId);
signalingChannel.addEventListener('message', message => {
    // New message from remote client received
});

// Send an asynchronous message to the remote client
signalingChannel.send('Hello!');
 

信令可以在許多不同的方式來實現,而的WebRTC規範不喜歡的任何具體的解決辦法。

發起對等連接

每個對等連接通過處理RTCPeerConnection對象。這個類的構造函數使用單個RTCConfiguration對象作為參數。該對象定義的對等連接的設置方式,並應包含有關ICE服務器使用的信息。

一旦RTCPeerConnection創建我們需要創建一個SDP要約或答案,取決於我們是否在調用對等或接收方。一旦創建了SDP供給或應答,它必須通過不同的信道被發送到遠端對等體。傳遞SDP反對遠端對等體被稱為信令和未覆蓋的的WebRTC規範。

為了啟動從主叫方的對等連接的設置,我們創建了一個RTCPeerConnection對象,然後調用createOffer()來創建一個RTCSessionDescription對象。這個會話描述,使用設定為本地描述setLocalDescription()和然後在我們的信令信道到接收側發送的。我們還建立了一個偵聽器,以我們的信令信道時,從接收方接收的答案,我們的要約會話描述的。

 async function makeCall() {
    const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]}
    const peerConnection = new RTCPeerConnection(configuration);
    signalingChannel.addEventListener('message', async message => {
        if (message.answer) {
            const remoteDesc = new RTCSessionDescription(message.answer);
            await peerConnection.setRemoteDescription(remoteDesc);
        }
    });
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    signalingChannel.send({'offer': offer});
}
 

在接收端,我們等待進入的報價,我們創造我們之前RTCPeerConnection實例。一旦做到這一點,我們使用設置接收報價setRemoteDescription()接下來,我們調用createAnswer()創建應答接收到的報價。這個答案是使用設置為本地描述setLocalDescription()然後在我們的信令服務器發送到主叫方。

 const peerConnection = new RTCPeerConnection(configuration);
signalingChannel.addEventListener('message', async message => {
    if (message.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        signalingChannel.send({'answer': answer});
    }
});
 

一旦這兩個同齡人同時設置了本地和遠程會話描述他們知道遠端的能力。這並不意味著雙方之間的連接已準備就緒。對於這項工作,我們需要收集在每個對等體和轉移(通過信令信道)的ICE候選到其他對等體。

ICE候選人

前兩個實體進行communitcate使用的WebRTC,他們需要交換連接信息。由於網絡條件可以變化dependning上許多因素,外部服務通常用於發現的可能的候選者,用於連接到一個對等體。這種服務被稱為ICE,並使用一個STUN或TURN服務器。 STUN代表會話穿越應用程序的NAT,通常在大多數的WebRTC應用中間接。

TURN(遍歷使用中繼NAT)是更先進的解決方案,集成了STUN協議和大多數基於商業的WebRTC服務使用TURN服務器建立節點之間的連接。該API的WebRTC支持STUN和直接接入,而且是更完整的長期互聯網連接建立下聚集。當創建的WebRTC連接,我們通常在用於配置提供了一個或多個ICE服務器RTCPeerConnection對象。

涓流冰

一旦RTCPeerConnection對象被創建,底層框架使用提供ICE的服務器來收集用於連接建立(ICE候選)的候選者。事件icegatheringstatechangeRTCPeerConnection信號處於什麼狀態ICE聚會是( newgatheringcomplete )。

雖然它是可能的同行要等到ICE採集完成後,它通常是更有效地使用了“涓流冰”技術,因為它被發現的每個ICE候選發送到遠程對等。這將顯著減少設置時間等連接,並允許視頻通話開始使用更少的延遲。

為了收集ICE考生,只需添加一個偵聽器icecandidate事件。在RTCPeerConnectionIceEvent發射對聽眾將包含candidate ,表示應當被發送到遠端對等體(見信令)一個新的候選屬性。

 // Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener('icecandidate', event => {
    if (event.candidate) {
        signalingChannel.send({'new-ice-candidate': event.candidate});
    }
});

// Listen for remote ICE candidates and add them to the local RTCPeerConnection
signalingChannel.addEventListener('message', async message => {
    if (message.iceCandidate) {
        try {
            await peerConnection.addIceCandidate(message.iceCandidate);
        } catch (e) {
            console.error('Error adding received ice candidate', e);
        }
    }
});
 

連接已建立

一旦接收ICE候選人,我們應該期待我們的對等連接的狀態最終會更改為連接狀態。為了檢測這一點,我們添加一個偵聽我們RTCPeerConnection我們聽connectionstatechange事件。

 // Listen for connectionstatechange on the local RTCPeerConnection
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        // Peers connected!
    }
});
 

RTCPeerConnection API文檔