Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。
このページは Cloud Translation API によって翻訳されました。
Switch to English

ピア接続の開始

ピア接続は、ピアツーピアプロトコルを使用して通信するために、異なるコンピューター上の2つのアプリケーションを接続することを扱うWebRTC仕様の一部です。ピア間の通信は、ビデオ、オーディオ、または任意のバイナリデータ( RTCDataChannel APIをサポートするクライアント用)にすることがRTCDataChannelます。 2つのピアがどのように接続できるかを検出するには、両方のクライアントがICEサーバー構成を提供する必要があります。これはSTUNまたはTURN-serverのいずれかであり、それらの役割は、各クライアントにICE候補を提供し、その後リモートピアに転送することです。このICE候補の転送は、一般にシグナリングと呼ばれます。

シグナリング

WebRTC仕様には、ICE(Internet Connectivity Establishment)サーバーと通信するためのAPIが含まれていますが、シグナリングコンポーネントはその一部ではありません。 2つのピアが接続方法を共有するには、シグナリングが必要です。通常、これは通常の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});
    }
});
 

2つのピアがローカルセッションとリモートセッションの両方の説明を設定すると、リモートピアの機能がわかります。これは、ピア間の接続の準備ができていることを意味するものではありません。これが機能するには、各ピアでICE候補を収集し、(シグナリングチャネルを介して)他のピアに転送する必要があります。

ICE候補

2つのピアがWebRTCを使用して通信する前に、接続情報を交換する必要があります。ネットワークの状態はいくつかの要因に応じて変化する可能性があるため、通常、ピアへの接続候補を見つけるために外部サービスが使用されます。このサービスはICEと呼ばれ、STUNまたはTURNサーバーのいずれかを使用しています。 STUNはNATのセッショントラバーサルユーティリティの略で、通常、ほとんどのWebRTCアプリケーションで間接的に使用されます。

TURN(リレーNATを使用したトラバーサル)は、STUNプロトコルを組み込んだより高度なソリューションであり、ほとんどの商用WebRTCベースのサービスは、ピア間の接続を確立するためにTURNサーバーを使用します。 WebRTC APIはSTUNとTURNの両方を直接サポートし、より完全な用語であるInternet Connectivity Establishmentの下で収集されます。 WebRTC接続を作成する場合、通常、 RTCPeerConnectionオブジェクトの構成で1つまたは複数のICEサーバーを提供します。

トリクルICE

RTCPeerConnectionオブジェクトが作成されると、基盤となるフレームワークは提供されたICEサーバーを使用して、接続確立の候補(ICE候補)を収集します。 icegatheringstatechangeのイベントicegatheringstatechangeは、ICE収集の状態( newgatheringまたはcomplete )をRTCPeerConnectionます。

ピアがICEの収集が完了するまで待機することは可能ですが、通常、「トリクルアイス」技術を使用して、各ICE候補が検出されたときにリモートピアに送信する方がはるかに効率的です。これにより、ピア接続のセットアップ時間が大幅に短縮され、少ない遅延でビデオ通話を開始できます。

ICE候補を収集するには、 icecandidateイベントのリスナーを追加するだけです。そのリスナーでRTCPeerConnectionIceEventされた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ドキュメント