ホーム > プログラミング > ビデオチャットアプリを作る > 08. チャットからの離脱

08. チャットからの離脱



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

解説

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

準備

05. を実施していない場合は、まず、05. を実施します。

サーバー側の処理

変更なし。

ウェブページ

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

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

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

「Leave Chat.」ボタン

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

クライアント側の処理

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

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

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

コネクションの終了処理

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

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

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

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

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

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

動作確認

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

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



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

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

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

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

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

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

チャット前


チャット中


チャット離脱後

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine) : https://my-video-chat.appspot.com/app08/index.html
デモ(Heroku) : https://myvideochat1234.herokuapp.com/app08/index.html

関連ページ

前項目 : 07. シグナリングサーバーによる自動シグナリング

次項目 : 09. STUN Serverへの対応


ご意見、ご感想、ご質問、ご要望等は、「コメントを投稿する」もしくは「ホーム > コンタクト」よりお願いいたします。
内容の誤り、誤字脱字、リンクミスなどの問題点を発見された場合には「コメントを投稿する」もしくは「ホーム > コンタクト」より連絡していただけると幸いです。


Copyright (c) 2005-2018 Nobuki HIRAMINE All rights reserved.