谷歌致力于推进种族平等的黑人社区。 怎么看。
此页面由 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文档