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

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

解説

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

1. ビデオチャットを行うために２つのブラウザを立ち上げます。
2. ビデオまたはマイクまたはその両方をOnにします（理由は後述）。
3. 片方のブラウザの「Create OfferSDP.」ボタンを押します。
4. ボタンを押すと以下の処理が行われます。
5. new RTCPeerConnection() により、RTCPeerConnectionオブジェクトを作成します。
6. 作成されたRTCPeerConnectionオブジェクトについて、イベントハンドラを構築します。
7. 作成されたRTCPeerConnectionオブジェクトについて、メディアストリームを追加します。
8. 作成されたRTCPeerConnectionオブジェクトについて、createOffer()関数を呼び出します。
9. createOffer()関数の結果得られるSDPを、setLocalDescription()関数を用いて、ローカルSDPとして設定します。
10. ICE candidate の収集が始まります。（ICE candidate : Interactive Connectivity Establishment candidate: 双方向の接続の確立の候補）
11. ICE candidate の収集が完了すると、「ICE gathering state change」イベントが発生し、「iceGatheringState」は「complete」になります。
12. ICE candidate の収集の完了後、「収集したICE candidateを保持するSDP」をブラウザ画面の「Offer側のOfferSDP用のテキストエリア」に貼り付けます。

準備

「02. カメラとマイクの開始と停止」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

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

「マニュアルによるシグナリング」用のHTML要素を追加します。

「head」部の<title>My Video Chat</title>の下に、「読み取り専用のエリアの背景を灰色にするスタイル設定」のコードを追加します。
<style type="text/css"> input:read-only, textarea:read-only { background-color: #CCC; } </style>

「body」部の下部の「クライアント側の処理のファイル（client.js）を読み込むコード」の上に、以下のコードを追加します。

• 交換する情報を表示するためのテキストエリア
• 交換する情報を貼り付けるためのテキストエリア

<table border="1"> <tbody> <tr> <td></td> <td>Offer side</td> <td>Answer side</td> </tr> <tr> <td>OfferSDP</td> <td> <button onclick="onclickButton_CreateOfferSDP()">Create OfferSDP.</button> <br> <textarea id="textarea_offerside_offsersdp" rows="10" cols="40" readonly="readonly"></textarea> </td> <td> <br> <textarea id="textarea_answerside_offsersdp" rows="10" cols="40"></textarea> </td> </tr> <tr> <td>AnswerSDP</td> <td> <br> <textarea id="textarea_offerside_answersdp" rows="10" cols="40"></textarea><br> <button onclick="onclickButton_SetAnswerSDPthenChatStarts()">Set AnswerSDP. Then the chat starts.</button> </td> <td> <button onclick="onclickButton_SetOfferSDPandCreateAnswerSDP()">Set OfferSDP and Create AnswerSDP.</button> <br> <textarea id="textarea_answerside_answersdp" rows="10" cols="40" readonly="readonly"></textarea><br> </td> </tr> </tbody> </table>

クライアント側の処理

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

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

グローバル変数

「グローバル変数」コード部に、以下のグローバル変数の定義を追加します。

• 交換する情報を表示するためのテキストエリア
• 交換する情報を貼り付けるためのテキストエリア
• RTCPeerConnectionオブジェクト

const g_elementTextareaOfferSideOfferSDP = document.getElementById( "textarea_offerside_offsersdp" ); const g_elementTextareaAnswerSideOfferSDP = document.getElementById( "textarea_answerside_offsersdp" ); const g_elementTextareaOfferSideAnswerSDP = document.getElementById( "textarea_offerside_answersdp" ); const g_elementTextareaAnswerSideAnswerSDP = document.getElementById( "textarea_answerside_answersdp" ); let g_rtcPeerConnection = null;

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

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

• 「RTCPeerConnectionオブジェクトの作成関数」によってRTCPeerConnectionオブジェクトを作成します。
• 作成したRTCPeerConnectionオブジェクトをグローバル変数に設定します。
• 「OfferSDPの作成関数」を呼び出します。（作成したRTCPeerConnectionオブジェクトを引数として渡します）

// 「Create OfferSDP.」ボタンを押すと呼ばれる関数 function onclickButton_CreateOfferSDP() { console.log( "UI Event : 'Create Offer SDP.' button clicked." ); if( g_rtcPeerConnection ) { // 既にコネクションオブジェクトあり alert( "Connection object already exists." ); return; } // RTCPeerConnectionオブジェクトの作成 console.log( "Call : createPeerConnection()" ); let rtcPeerConnection = createPeerConnection( g_elementVideoLocal.srcObject ); g_rtcPeerConnection = rtcPeerConnection; // グローバル変数に設定 // OfferSDPの作成 createOfferSDP( rtcPeerConnection ); }

RTCPeerConnectionオブジェクトの作成関数

「RTCPeerConnection関連の関数」コード部に、「RTCPeerConnectionオブジェクトの作成」関数の定義を追加します。

• new RCTPeerConection() によって、RTCPeerConnectionオブジェクトを生成します。
• 「RTCPeerConnectionオブジェクトのイベントハンドラの構築関数」を呼び出します。
• RTCPeerConnectionオブジェクトのaddTrack()関数によって、RTCPeerConnectionオブジェクトにローカルのメディアストリームを追加します。

// RTCPeerConnectionオブジェクトの作成 function createPeerConnection( stream ) { // RTCPeerConnectionオブジェクトの生成 let config = { "iceServers": [] }; let rtcPeerConnection = new RTCPeerConnection( config ); // RTCPeerConnectionオブジェクトのイベントハンドラの構築 setupRTCPeerConnectionEventHandler( rtcPeerConnection ); // RTCPeerConnectionオブジェクトのストリームにローカルのメディアストリームを追加 if( stream ) { // - 古くは、RTCPeerConnection.addStream(stream) を使用していたが、廃止予定となった。 // 現在は、RTCPeerConnection.addTrack(track, stream) を使用する。 stream.getTracks().forEach( ( track ) => { rtcPeerConnection.addTrack( track, stream ); } ); } else { console.log( "No local stream." ); } return rtcPeerConnection; }

RTCPeerConnectionオブジェクトのイベントハンドラの構築関数

「RTCPeerConnection関連の関数」コード部に、「RTCPeerConnectionオブジェクトのイベントハンドラの構築」関数の定義を追加します。

• RTCPeerConnectionオブジェクトに関する一通りのイベントについてイベントハンドラを構築します。（参考：RTCPeerConnection - Web APIs | MDN）
• ICE gathering state changeイベントハンドラについては、「iceGatheringState」が「complete」になったときの処理として、「収集したICE candidateを保持するSDP」をブラウザ画面の「Offer側のOfferSDP用のテキストエリア」に貼り付ける処理を記述します。

// RTCPeerConnectionオブジェクトのイベントハンドラの構築 function setupRTCPeerConnectionEventHandler( rtcPeerConnection ) { // Negotiation needed イベントが発生したときのイベントハンドラ // - このイベントは、セッションネゴシエーションを必要とする変更が発生したときに発生する。 // 一部のセッション変更はアンサーとしてネゴシエートできないため、このネゴシエーションはオファー側として実行されなければならない。 // 最も一般的には、negotiationneededイベントは、RTCPeerConnectionに送信トラックが追加された後に発生する。 // ネゴシエーションがすでに進行しているときに、ネゴシエーションを必要とする方法でセッションが変更された場合、 // ネゴシエーションが完了するまで、negotiationneededイベントは発生せず、ネゴシエーションがまだ必要な場合にのみ発生する。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onnegotiationneeded rtcPeerConnection.onnegotiationneeded = () => { console.log( "Event : Negotiation needed" ); }; // ICE candidate イベントが発生したときのイベントハンドラ // - これは、ローカルのICEエージェントがシグナリング・サーバを介して // 他のピアにメッセージを配信する必要があるときはいつでも発生する。 // これにより、ブラウザ自身がシグナリングに使用されている技術についての詳細を知る必要がなく、 // ICE エージェントがリモートピアとのネゴシエーションを実行できるようになる。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicecandidate rtcPeerConnection.onicecandidate = ( event ) => { console.log( "Event : ICE candidate" ); if( event.candidate ) { // ICE candidateがある console.log( "- ICE candidate : ", event.candidate ); // Vanilla ICEの場合は、何もしない // Trickle ICEの場合は、ICE candidateを相手に送る } else { // ICE candiateがない = ICE candidate の収集終了。 console.log( "- ICE candidate : empty" ); } }; // ICE candidate error イベントが発生したときのイベントハンドラ // - このイベントは、ICE候補の収集処理中にエラーが発生した場合に発生する。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicecandidateerror rtcPeerConnection.onicecandidateerror = ( event ) => { console.error( "Event : ICE candidate error. error code : ", event.errorCode ); }; // 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の場合は、何もしない // Offer側のOfferSDP用のテキストエリアに貼付 console.log( "- Set OfferSDP in textarea" ); g_elementTextareaOfferSideOfferSDP.value = rtcPeerConnection.localDescription.sdp; g_elementTextareaOfferSideOfferSDP.focus(); g_elementTextareaOfferSideOfferSDP.select(); } }; // ICE connection state change イベントが発生したときのイベントハンドラ // - このイベントは、ネゴシエーションプロセス中にICE connection stateが変化するたびに発生する。 // - 接続が成功すると、通常、状態は「new」から始まり、「checking」を経て、「connected」、最後に「completed」と遷移します。 // ただし、特定の状況下では、「connected」がスキップされ、「checking」から「completed」に直接移行する場合があります。 // これは、最後にチェックされた候補のみが成功した場合に発生する可能性があり、成功したネゴシエーションが完了する前に、 // 収集信号と候補終了信号の両方が発生します。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event rtcPeerConnection.oniceconnectionstatechange = () => { console.log( "Event : ICE connection state change" ); console.log( "- ICE connection state : ", rtcPeerConnection.iceConnectionState ); // "disconnected" : コンポーネントがまだ接続されていることを確認するために、RTCPeerConnectionオブジェクトの少なくとも // 1つのコンポーネントに対して失敗したことを確認します。これは、"failed "よりも厳しいテストではなく、 // 断続的に発生し、信頼性の低いネットワークや一時的な切断中に自然に解決することがあります。問題が // 解決すると、接続は "接続済み "の状態に戻ることがあります。 // "failed" : ICE candidateは、すべての候補のペアを互いにチェックしたが、接続のすべてのコンポーネントに // 互換性のあるものを見つけることができなかった。しかし、ICEエージェントがいくつかの // コンポーネントに対して互換性のある接続を見つけた可能性がある。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/iceConnectionState }; // Signaling state change イベントが発生したときのイベントハンドラ // - このイベントは、ピア接続のsignalStateが変化したときに送信される。 // これは、setLocalDescription（）またはsetRemoteDescription（）の呼び出しが原因で発生する可能性がある。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onsignalingstatechange rtcPeerConnection.onsignalingstatechange = () => { console.log( "Event : Signaling state change" ); console.log( "- Signaling state : ", rtcPeerConnection.signalingState ); }; // Connection state change イベントが発生したときのイベントハンドラ // - このイベントは、ピア接続の状態が変化したときに送信される。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onconnectionstatechange rtcPeerConnection.onconnectionstatechange = () => { console.log( "Event : Connection state change" ); console.log( "- Connection state : ", rtcPeerConnection.connectionState ); // "disconnected" : 接続のためのICEトランスポートの少なくとも1つが「disconnected」状態であり、 // 他のトランスポートのどれも「failed」、「connecting」、「checking」の状態ではない。 // "failed" : 接続の1つ以上のICEトランスポートが「失敗」状態になっている。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState }; // Track イベントが発生したときのイベントハンドラ // - このイベントは、新しい着信MediaStreamTrackが作成され、 // コネクション上のレシーバーセットに追加されたRTCRtpReceiverオブジェクトに関連付けられたときに送信される。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack // - 古くは、rtcPeerConnection.onaddstream に設定していたが、廃止された。 // 現在は、rtcPeerConnection.ontrack に設定する。 rtcPeerConnection.ontrack = ( event ) => { console.log( "Event : Track" ); console.log( "- stream", event.streams[0] ); console.log( "- track", event.track ); }; }

OfferSDPの作成関数

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

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

// OfferSDPの作成 function createOfferSDP( rtcPeerConnection ) { // OfferSDPの作成 console.log( "Call : rtcPeerConnection.createOffer()" ); rtcPeerConnection.createOffer() .then( ( sessionDescription ) => { // 作成されたOfferSDPをを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」が表示されます。

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

ダウンロード

サンプルプログラム

デモ

デモ（Google App Engine） : https://my-video-chat.appspot.com/app03/index.html
デモ（Heroku） : https://myvideochat1234.herokuapp.com/app03/index.html

関連ページ

前項目 : 02. カメラとマイクの開始と停止

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