05. マニュアルシグナリング（「接続完了」処理まで構築）

WebRTCでは、P2P通信を始める前に、お互いの情報を交換するシグナリングと呼ばれる処理を行います。
シグナリングの手続きを理解するために、「03. 」～「06. 」にかけて、お互いの情報の交換を手動で行う「マニュアルによるシグナリング」の処理を構築します。
「マニュアルによるシグナリング」では、交換する情報をブラウザ画面に表示し、手動のコピー＆ペーストによって情報をWebRTCに設定します。
本項では、「マニュアルによるシグナリング」の「接続完了」までを構築します。

解説

「マニュアルによるシグナリング」の「AnswerSDPの作成」から「接続完了」までの手続きの流れは以下です。

AnswerSDPの作成の結果、Answer側のブラウザの「Answer側のAnswerSDP用のテキストエリア」に張り付けられたAnswerSDPを、Offer側のブラウザの「Offer側のAnswerSDP用のテキストエリア」に手動で、コピー＆ペースとします。
Offer側のブラウザの「Set AnswerSDP. Then the chat starts.」ボタンを押します。
ボタンを押すと以下の処理が行われます。
AnswerSDPを、テキストエリアから取得します。
AnswerSDPを、setRemoteDescription()関数を用いて、リモートSDPとして設定します。
接続が完了し、P2P通信が始まります。

準備

「04. マニュアルシグナリング（「AnswerSDPの作成」まで構築）」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

「public/client.js」ファイルを編集します。

「マニュアルによるシグナリング」の「接続完了」までの処理を追加します。

「Set AnswerSDP. Then the chat starts.」ボタンを押すと呼ばれる関数

「UIから呼ばれる関数」コード部に、「「Set AnswerSDP. Then the chat starts.」ボタンを押すと呼ばれる関数」の定義を追加します。

AnswerSDPを、テキストエリアから取得します。
「AnswerSDPの設定関数」を呼び出します（RTCPeerConnectionオブジェクトと取得したAnswerSDPを引数として渡します）

// 「Set AnswerSDP. Then the chat starts.」ボタンを押すと呼ばれる関数 function onclickButton_SetAnswerSDPthenChatStarts() { console.log( "UI Event : 'Set AnswerSDP. Then the chat starts.' button clicked." ); if( !g_rtcPeerConnection ) { // コネクションオブジェクトがない alert( "Connection object does not exist." ); return; } // AnswerSDPを、テキストエリアから取得 let strAnswerSDP = g_elementTextareaOfferSideAnswerSDP.value; if( !strAnswerSDP ) { // AnswerSDPが空 alert( "AnswerSDP is empty. Please enter the AnswerSDP." ); return; } // AnswerSDPの設定 let sessionDescription = new RTCSessionDescription( { type: "answer", sdp: strAnswerSDP, } ); console.log( "Call : setAnswerSDP()" ); setAnswerSDP( g_rtcPeerConnection, sessionDescription ); }

AnswerSDPの設定関数

「RTCPeerConnection関連の関数」コード部に、「AnswerSDPの設定」関数の定義を追加します。

RTCPeerConnectionオブジェクトについて、setRemoteDescription()関数を用いて、リモートSDPとして設定します。
（接続が完了し、P2P通信が始まります。）

// AnswerSDPの設定 function setAnswerSDP( rtcPeerConnection, sessionDescription ) { console.log( "Call : rtcPeerConnection.setRemoteDescription()" ); rtcPeerConnection.setRemoteDescription( sessionDescription ) .catch( ( error ) => { console.error( "Error : ", error ); } ); }

動作確認

node でサーバーを起動します。

ブラウザを２つ立ち上げ、それぞれのブラウザで「localhost:1337」にアクセスします。

２つ立ち上げた一方を「オファー側」、もう一方を「アンサー側」とします。

① 「オファー側」「アンサー側」の両方で、「Camera」もしくは「Microphone」もしくは両方のチェックボックスをOnにし、カメラもしくはマイクもしくは両方を有効にします。※１

② 「オファー側」で、「Offer side」の「OfferSDP」のセルにある「Create OfferSDP」ボタンを押します。
③ 「オファー側」で、「Offer side」の「OfferSDP」のセルのテキストエリアに、生成された「OfferSDP」が表示されます。
④ 「オファー側」の「Offer side」の「OfferSDP」のセルのテキストエリアに表示された「OfferSDP」をコピーします。

⑤ 「アンサー側」で、「Answer side」の「OfferSDP」のセルのテキストエリアに、コピーした「OfferSDP」を、ペーストします。
⑥ 「アンサー側」で、「Answer side」の「AnswerSDP」のセルにある「Set OfferSDP and Create AnswerSDP」ボタンを押します。
⑦ 「アンサー側」の「Answer side」の「AnswerSDP」のセルのテキストエリアに、生成された「AnswerSDP」が表示されます。
⑧ 「アンサー側」の「Answer side」の「AnswerSDP」のセルのテキストエリアに表示された「AnswerSDP」をコピーします。

⑨ 「オファー側」で、「Offer side」の「AnswerSDP」のセルのテキストエリアに、コピーした「AnswerSDP」を、ペーストします。
⑩ 「オファー側」で、「Offer side」の「AnswerSDP」のセルにある「Set AnswerSDP. Then the chat starts.」ボタンを押します。
⑪ 「オファー側」および「アンサー側」のChromeの「デベロッパーツール」の「Console」画面を表示すると、「- Connection state : connected」と表示されます。※２

※１：カメラもマイクも有効にしなかった場合は、通信するデータがないので、「Create OfferSDP」ボタンを押しても、「OfferSDP」が生成されず、「OfferSDP」が表示されません。『カメラもマイクも有効にしなかった場合、「OfferSDP」が生成されない』問題は、第11項の「独自データの送受信」にて解決します。「独自データの送受信」の対応によって通信するデータとして独自データがあるので、カメラ/マイクが有効かによらず、「OfferSDP」が生成されるようになります。

※２：Chromeの「デベロッパーツール」は、Chromeの「右上のメニュー > その他のツール > デベロッパーツール」もしくは「Ctrl + Shift + I」で表示されます。

「オファー側」

「アンサー側」

「オファー側」
「接続完了」時のChromeの「デベロッパーツール」の「Console」画面

「Console」画面に表示されるログ内容は、「オファー側」と「アンサー側」とで異なりますが、「接続完了」時のログ内容については、「オファー側」と「アンサー側」とで同様のログ内容が表示されます。