08. チャットからの離脱

前項までで、P2P通信を開始し、リモート映像の表示、音声の再生ができるようになりました。
本項では、「チャットからの離脱」の機能を追加します。

解説

「チャットからの離脱」のために必要な処理は以下です。

RTCPeerConnectionオブジェクトを閉じます。

準備

「07. シグナリングサーバーによる自動シグナリング」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

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

前項でコメントアウトした「マニュアルシグナリング」のコードの削除

前項でコメントアウトした「マニュアルシグナリング」のコードを削除します。（「マニュアルシグナリング」用のHTML要素を削除します。（「」で囲んだtable部を削除します。）

「Leave Chat.」ボタン

「body」部の下部の「Socket.IO モジュールを読み込むコード（<script src="/socket.io/socket.io.js"></script>）」の直前に、以下に関するコードを追加します。

「Leave Chat.」ボタン

<br /> <button onclick="onclickButton_LeaveChat()">Leave Chat.</button>

クライアント側の処理

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

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

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

「コネクションの終了処理」の関数を呼び出します。

// 「Leave Chat.」ボタンを押すと呼ばれる関数 function onclickButton_LeaveChat() { console.log( "UI Event : 'Leave Chat.' button clicked." ); if( g_rtcPeerConnection ) { console.log( "Call : endPeerConnection()" ); endPeerConnection( g_rtcPeerConnection ); } }

コネクションの終了処理

「RTCPeerConnection関連の関数」コード部に、「コネクションの終了処理」の関数の定義を追加します。

リモート映像表示用の要素に設定されたメディアストリームをクリアします。
リモート音声再生用の要素に設定されたメディアストリームをクリアします。
RTCPeerConnectionに関するグローバル変数をクリアします。
RTCPeerConnectionオブジェクトを閉じます。

// コネクションの終了処理 function endPeerConnection( rtcPeerConnection ) { // リモート映像の停止 console.log( "Call : setStreamToElement( Video_Remote, null )" ); setStreamToElement( g_elementVideoRemote, null ); // リモート音声の停止 console.log( "Call : setStreamToElement( Audio_Remote, null )" ); setStreamToElement( g_elementAudioRemote, null ); // グローバル変数のクリア g_rtcPeerConnection = null; // ピアコネクションの終了 rtcPeerConnection.close(); }

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

ビデオチャットを離脱される側は、「Connection state」が「failed」になったときを相手が離脱したとみなします。

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

「connectionState」が「failed」になったとき、「コネクションの終了処理」の関数を呼び出します。

// 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 if( "failed" === rtcPeerConnection.connectionState ) { // 「ビデオチャット相手との通信が切断」が「しばらく」続き、通信が復帰しないとき、Connection state「failed」となる。 // - 「ビデオチャット相手との通信が切断」になると「すぐに」Connection state「failed」となるわけではない。 // - 相手のチャット離脱後、速やかにコネクション終了処理を行うためには、離脱側からチャット離脱メッセージを送信し、受信側でコネクション終了処理を行うようにする。 console.log( "Call : endPeerConnection()" ); endPeerConnection( rtcPeerConnection ); } };

前項でコメントアウトした「マニュアルシグナリング」のコードの削除

前項でコメントアウトした「マニュアルシグナリング」のコードを削除します。

「マニュアルシグナリング」用のHTML要素のグローバル変数を削除します。（textareaに関する4つのグローバル変数を削除します。）
「マニュアルシグナリング」用の「UIから呼ばれる関数」を削除します。（「Create OfferSDP.」ボタンを押すと呼ばれる関数、「Set OfferSDP and Create AnswerSDP.」ボタンを押すと呼ばれる関数、「Set AnswerSDP. Then the chat starts.」ボタンを押すと呼ばれる関数の３つの関数を削除します。）
「コネクションの終了処理」のtextareaのクリアの処理を削除します。
「RTCPeerConnection関連の関数」コード部の「RTCPeerConnectionオブジェクトのイベントハンドラの構築」の「ICE gathering state change イベントが発生したときのイベントハンドラ」の「complete」時の処理の、生成されたSDPをテキストエリアに貼り付ける処理を削除します。

動作確認

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

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

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

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

② 「オファー側」で、「Send OfferSDP」ボタンを押すと、ビデオチャットが開始します。リモートの映像が表示される、もしくは、リモートの音声が再生される、もしくはその両方が行われます。

③ 「オファー側」もしくは「アンサー側」で、「Leave Chat.」ボタンを押すと、ビデオチャットが終了します。※２

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

※２：チャットを離脱される側は、「Connection state」が「failed」になったときを相手が離脱したとみなしています。離脱する側が「コネクションの終了処理」を行ってから、離脱される側の「Connection state」が「failed」になるのには少し時間を要します。離脱する側が「Leave Chat.」ボタンを押しても、離脱される側ではすぐにはコネクション終了処理が行われません。『離脱する側が「Leave Chat」ボタンを押しても、離脱される側ではすぐにはコネクション終了処理が行われない』問題は、第13項の「チャット離脱の相手への通知」にて解決します。

チャット前

チャット中

チャット離脱後