ピア接続のスタートガイド

ピア接続は WebRTC 仕様の一部です異なるコンピュータ上の 2 つのアプリケーションを接続し、内部 IP アドレスを使用して通信できますピア間の通信は、動画、音声、または任意のバイナリデータ（RTCDataChannel API をサポートするクライアントの場合）。イン 2 つのピアの接続方法を確認するには、両方のクライアントが ICE を提供する必要がありますサーバー構成。STUN または TURN サーバーのいずれかの役割。役割は次のとおりです。 ICE 候補を各クライアントに提示してから、リモートクライアントに転送される使用します。ICE 候補のこの転送は、一般にシグナリングと呼ばれます。

シグナリング

WebRTC 仕様には、ICE（インターネット）と通信するための API が含まれています。接続の確立など）が使用されますが、シグナリングコンポーネントはできます。2 つのピアが接続方法を共有するにはシグナリングが必要です。通常、これは通常の HTTP ベースのウェブ API（つまり REST サービスやその他の RPC メカニズムなど）で、ウェブアプリケーションが必要な情報を取得します。

次のコードスニペットは、この架空のシグナリングサービスを使用して、非同期でメッセージを送受信できます。これは残りのコンテナで使用されます使用することもできます。

// 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 オファーを作成する必要があります。または、 Google が発信側ピアか受信側ピアかによって、レスポンスが通知されます。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（Relay NAT を使用した走査）は、以下を組み込んだより高度なソリューションです。 STUN プロトコルとほとんどの商用 WebRTC ベースのサービスでは、TURN サーバーを使用しています。ピア間の接続を確立しますWebRTC API は STUN とおよび直接変換され、より完全な「インターネット」という用語で接続の確立。WebRTC 接続を作成するとき、通常は ICE サーバーのコンフィグレーションで 1 つまたは複数の ICE サーバーを RTCPeerConnection オブジェクト。

トリクル ICE

RTCPeerConnection オブジェクトが作成されると、基盤となるフレームワークは接続確立の候補を収集するための ICE サーバーを候補）。RTCPeerConnection シグナルのイベント「icegatheringstatechange」 ICE の収集の状態（new、gathering、complete）を確認します。

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 候補を受け取ったら、ピアに状態を通知します。接続は最終的に接続状態になりますこれを検出するために、 connectionstatechange をリッスンする RTCPeerConnection へのリスナー。できます。

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

RTCPeerConnection API ドキュメント