04. マニュアルシグナリング（「AnswerSDPの作成」まで構築）

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

解説

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

OfferSDPの作成の結果、Offer側のブラウザの「Offer側のOfferSDP用のテキストエリア」に張り付けられたＯｆｆｅｒSDPを、Answer側のブラウザの「Answer側のOfferSDP用のテキストエリア」に手動で、コピー＆ペースとします。
Answer側のブラウザの「Set OfferSDP and Create AnswerSDP.」ボタンを押します。
ボタンを押すと以下の処理が行われます。
new RTCPeerConnection() により、RTCPeerConnectionオブジェクトを作成します。（前項で対応済み）
作成されたRTCPeerConnectionオブジェクトについて、イベントハンドラを構築します。（前項で対応済み）
作成されたRTCPeerConnectionオブジェクトについて、メディアストリームを追加します。（前項で対応済み）
OfferSDPを、テキストエリアから取得します。
OfferSDPを、setRemoteDescription()関数を用いて、リモートSDPとして設定します。
作成されたRTCPeerConnectionオブジェクトについて、createAnswer()関数を呼び出します。
createAnswer()関数の結果得られるSDPを、setLocalDescription()関数を用いて、ローカルSDPとして設定します。
ICE candidate の収集が始まります。（ICE candidate : Interactive Connectivity Establishment candidate: 双方向の接続の確立の候補）
ICE candidate の収集が完了すると、「ICE gathering state change」イベントが発生し、「iceGatheringState」は「complete」になります。
ICE candidate の収集の完了後、「収集したICE candidateを保持するSDP」をブラウザ画面の「Answer側のAnswerSDP用のテキストエリア」に貼り付けます。

準備

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

サーバー側の処理

変更なし。

ウェブページ

変更なし。

クライアント側の処理

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

「マニュアルによるシグナリング」の「AnswerSDPの作成」までの処理を追加します。

「Set OfferSDP and Create AnswerSDP.」ボタンを押すと呼ばれる関数

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

OfferSDPを、テキストエリアから取得します。
「RTCPeerConnectionオブジェクトの作成関数」によってRTCPeerConnectionオブジェクトを作成します。
作成したRTCPeerConnectionオブジェクトをグローバル変数に設定します。
「OfferSDPの設定とAnswerSDPの作成関数」を呼び出します。（作成したRTCPeerConnectionオブジェクトと取得したOfferSDPを引数として渡します）

// 「Set OfferSDP and Create AnswerSDP.」ボタンを押すと呼ばれる関数 function onclickButton_SetOfferSDPandCreateAnswerSDP() { console.log( "UI Event : 'Set OfferSDP and Create AnswerSDP.' button clicked." ); if( g_rtcPeerConnection ) { // 既にコネクションオブジェクトあり alert( "Connection object already exists." ); return; } // OfferSDPを、テキストエリアから取得 let strOfferSDP = g_elementTextareaAnswerSideOfferSDP.value; if( !strOfferSDP ) { // OfferSDPが空 alert( "OfferSDP is empty. Please enter the OfferSDP." ); return; } // RTCPeerConnectionオブジェクトの作成 console.log( "Call : createPeerConnection()" ); let rtcPeerConnection = createPeerConnection( g_elementVideoLocal.srcObject ); g_rtcPeerConnection = rtcPeerConnection; // グローバル変数に設定 // OfferSDPの設定とAnswerSDPの作成 let sessionDescription = new RTCSessionDescription( { type: "offer", sdp: strOfferSDP, } ); console.log( "Call : setOfferSDP_and_createAnswerSDP()" ); setOfferSDP_and_createAnswerSDP( rtcPeerConnection, sessionDescription ); }

ICE gathering state change イベントが発生したときのイベントハンドラ

「RTCPeerConnection関連の関数」コード部の「RTCPeerConnectionオブジェクトのイベントハンドラの構築」の「ICE gathering state change イベントが発生したときのイベントハンドラ」の処理を変更します。

「iceGatheringState」が"complete"になったときの処理について、SDPのタイプによって、処理を分けます。
SDPのタイプが「offer」のときは、「収集したICE candidateを保持するSDP」をブラウザ画面の「Offer側のOfferSDP用のテキストエリア」に貼り付けます。
SDPのタイプが「answer」のときは、「収集したICE candidateを保持するSDP」をブラウザ画面の「Answer側のAnswerSDP用のテキストエリア」に貼り付けます。

// ICE gathering state change イベントが発生したときのイベントハンドラ // - このイベントは、ICE gathering stateが変化したときに発生する。 // 言い換えれば、ICEエージェントがアクティブに候補者を収集しているかどうかが変化したときに発生する。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicegatheringstatechange rtcPeerConnection.onicegatheringstatechange = () => { console.log( "Event : ICE gathering state change" ); console.log( "- ICE gathering state : ", rtcPeerConnection.iceGatheringState ); if( "complete" === rtcPeerConnection.iceGatheringState ) { // Vanilla ICEの場合は、ICE candidateを含んだOfferSDP/AnswerSDPを相手に送る // Trickle ICEの場合は、何もしない if( "offer" === rtcPeerConnection.localDescription.type ) { // Offer側のOfferSDP用のテキストエリアに貼付 console.log( "- Set OfferSDP in textarea" ); g_elementTextareaOfferSideOfferSDP.value = rtcPeerConnection.localDescription.sdp; g_elementTextareaOfferSideOfferSDP.focus(); g_elementTextareaOfferSideOfferSDP.select(); } else if( "answer" === rtcPeerConnection.localDescription.type ) { // Answer側のAnswerSDP用のテキストエリアに貼付 console.log( "- Set AnswerSDP in textarea" ); g_elementTextareaAnswerSideAnswerSDP.value = rtcPeerConnection.localDescription.sdp; g_elementTextareaAnswerSideAnswerSDP.focus(); g_elementTextareaAnswerSideAnswerSDP.select(); } else { console.error( "Unexpected : Unknown localDescription.type. type = ", rtcPeerConnection.localDescription.type ); } } };

OfferSDPの設定とAnswerSDPの作成関数

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

RTCPeerConnectionオブジェクトについて、OfferSDPを、setRemoteDescription()関数を用いて、リモートSDPとして設定します。
createAnswer()関数を呼び出します。
createAnswer()関数の結果得られるSDPを、setLocalDescription()関数を用いて、ローカルSDPとして設定します。
（ICE candidate の収集が始まります。）

// OfferSDPの設定とAnswerSDPの作成 function setOfferSDP_and_createAnswerSDP( rtcPeerConnection, sessionDescription ) { console.log( "Call : rtcPeerConnection.setRemoteDescription()" ); rtcPeerConnection.setRemoteDescription( sessionDescription ) .then( () => { // AnswerSDPの作成 console.log( "Call : rtcPeerConnection.createAnswer()" ); return rtcPeerConnection.createAnswer(); } ) .then( ( sessionDescription ) => { // 作成されたAnswerSDPををLocalDescriptionに設定 console.log( "Call : rtcPeerConnection.setLocalDescription()" ); return rtcPeerConnection.setLocalDescription( sessionDescription ); } ) .then( () => { // Vanilla ICEの場合は、まだSDPを相手に送らない // Trickle ICEの場合は、初期SDPを相手に送る } ) .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」が表示されます。

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

「オファー側」

「アンサー側」