15. ユーザー名の入力と表示

ユーザー名を入力する参加画面を追加します。チャット画面に「自身のユーザー名」と「チャット相手のユーザー名」を表示するようにします。

解説

前項までは、チャットプログラムのウェブページに２人がアクセスしているときに、片方がオファーを送ると、チャットが始まりました。
チャットプログラムのウェブページに１人しかアクセスしていないときに、その１人がオファーを送ると、返って来ないアンサーを待ち続けてしまうという問題がありました。
この問題の解決として、「チャットに参加します。誰かいませんか、いたらオファーを私に送ってください。いなければいいです」という仕組みを取り入れます。
チャットプログラムのウェブページに最初にアクセスした人は、「参加します」という通知をシグナリングサーバーを経由して自分以外に送ります。しかし、自分以外誰もいないため、何も起こりません。
チャットプログラムのウェブページに２番目にアクセスした人も、「参加します」という通知をシグナリングサーバーを経由して自分以外に送ります。最初にアクセスした人は、「参加します」の通知を受けて、「オファー」を作成し、２番目にアクセスした人にオファーを送り、シグナリングが開始し、シグナリングの結果チャットが始まります。

準備

「14. オファーされる側のみビデオ（マイク）をOnにした場合の問題への対応」を実施していない場合は、実施します。

サーバー側の処理

「server.js」ファイルを編集します。

「signalingデータ受信時の処理」を変更します。「送信元以外の全員に送信」していた処理を「指定の相手に送信」に変更します。
「ビデオチャット参加時の処理」を追加します。"join"を送信元以外の全員に送信します。

「server.js」の内容を以下のようにします。
"use strict"; // 厳格モードとする（・・・略・・・） // 接続時の処理（・・・略・・・） io.on( "connection", ( socket ) => { （・・・略・・・） // signalingデータ受信時の処理 // ・クライアント側のsignalingデータ送信「socket.emit( "signaling", objData );」に対する処理 socket.on( "signaling", ( objData ) => { console.log( "signaling : ", socket.id ); console.log( "- type : ", objData.type ); // 指定の相手に送信 if( "to" in objData ) { console.log( "- to : ", objData.to ); // 送信元SocketIDを送信データに付与し、指定の相手に送信 objData.from = socket.id; socket.to( objData.to ).emit( "signaling", objData ); } else { console.error( "Unexpected : Unknown destination" ); } } ); // ビデオチャット参加時の処理 socket.on( "join", ( objData ) => { console.log( "join : ", socket.id ); // 「join」を送信元以外の全員に送信 // 送信元SocketIDを送信データに付与し、送信元以外の全員に送信 socket.broadcast.emit( "signaling", { from: socket.id, type: "join" } ); } ); } ); （・・・略・・・）

ウェブページ

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

「div_join_screen」というid名の<div>要素として、ユーザー名入力テキストボックスのある「参加画面」を追加します。
既存の「チャット画面」を「div_chat_screen」というid名の<div>要素に格納し、初期表示設定を非表示にします。
「ローカル映像表示用の要素」と「リモート映像表示用の要素」の上に「ユーザー名」の表示のためのテキストボックスを追加します。「div_userinfo」というid名の<div>要素に格納します。
「Send OfferSDP.」ボタンをコメントアウトします。「Send OfferSDP.」ボタンHTML要素部を「」で囲みます。
「参加画面」がブラウザの表示領域の端まで覆うように、いくつかのHTML要素のstyleを設定します。

「public/index.html」の内容を以下のようにします。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Video Chat</title> <style type="text/css"> input:read-only, textarea:read-only { background-color: #CCC; } html { height: 100%; } #div_join_screen { width: 100%; height: 100%; display: flex; align-items: center; z-index: 10; background-color: #888; } </style> </head> <body style="display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0;"> <h1 style="margin: 8px">My Video Chat</h1> <div style="flex: 1;"> <div id="div_join_screen">  <form action="" onsubmit="onsubmitButton_Join(); return false;" style="text-align: center; width: 100%;"> User name ( Nick name )<br /> <input type="text" id="input_username" placeholder="Enter User name" autofocus><br /><br /> <input type="submit" value="Join" /> </form> </div> <div id="div_chat_screen" style="margin: 8px; display: none;"> <input type="checkbox" id="checkbox_camera" onclick="onclickCheckbox_CameraMicrophone()">Camera <input type="checkbox" id="checkbox_microphone" onclick="onclickCheckbox_CameraMicrophone()">Microphone <br /> <div id="div_userinfo" style="display: flex; flex-wrap: wrap"> <div border="1px solid black"><input type="text" id="text_username" readonly="readonly"><br /><video id="video_local" width="320" height="240" style="border: 1px solid black;" autoplay></video></div> <div border="1px solid black"><input type="text" id="text_remote_username" readonly="readonly"><br /><video id="video_remote" width="320" height="240" style="border: 1px solid black;" autoplay></video><audio id="audio_remote" autoplay></audio></div> </div>  <form action="" onsubmit="onsubmitButton_SendMessage(); return false;"> <input type="text" id="text_message_for_send" size="40" /><input type="submit" value="Send message" /> </form> <textarea id="textarea_message_received" rows="10" cols="60" readonly="readonly"></textarea>  <br /> <button onclick="onclickButton_LeaveChat()">Leave Chat.</button> </div> </div>  <script src="/socket.io/socket.io.js"></script> <script src="./client.js"></script> </body> </html>

クライアント側の処理

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

グローバル変数

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

「参加画面」に関するDIV要素
「チャット画面」に関するDIV要素
「ユーザー名を入力」するためのテキストボックス
「ローカルのユーザー名を表示」するためのテキストボックス
「リモートのユーザー名を表示」するためのテキストボックス

// ↓↓↓グローバル変数↓↓↓ const g_elementDivJoinScreen = document.getElementById( "div_join_screen" ); const g_elementDivChatScreen = document.getElementById( "div_chat_screen" ); const g_elementInputUserName = document.getElementById( "input_username" ); const g_elementCheckboxCamera = document.getElementById( "checkbox_camera" ); const g_elementCheckboxMicrophone = document.getElementById( "checkbox_microphone" ); const g_elementTextUserName = document.getElementById( "text_username" ); const g_elementTextRemoteUserName = document.getElementById( "text_remote_username" ); const g_elementVideoLocal = document.getElementById( "video_local" ); const g_elementVideoRemote = document.getElementById( "video_remote" ); const g_elementAudioRemote = document.getElementById( "audio_remote" ); const g_elementTextMessageForSend = document.getElementById( "text_message_for_send" ); const g_elementTextareaMessageReceived = document.getElementById( "textarea_message_received" ); let g_rtcPeerConnection = null; // クライアントからサーバーへの接続要求 const g_socket = io.connect(); // ↑↑↑グローバル変数↑↑↑

「Join」ボタンを押すと呼ばれる関数の追加

「UIから呼ばれる関数」コード部に、「Join」ボタンを押すと呼ばれる関数を追加します。また、「「Send OfferSDP.」ボタンを押すと呼ばれる関数」をコメントアウトします。

「Join」ボタンを押すと呼ばれる関数は、以下を行います。

参加画面で入力した「自身のユーザー名」を、「ローカルのユーザー名を表示」するためのテキストボックスへ設定します。
サーバーに「join」を送信します。
画面をチャット画面に切り替えます。

// 「Join」ボタンを押すと呼ばれる関数 function onsubmitButton_Join() { console.log( "UI Event : 'Join' button clicked." ); // ユーザー名 let strInputUserName = g_elementInputUserName.value; console.log( "- User name :", strInputUserName ); if( !strInputUserName ) { return; } g_elementTextUserName.value = strInputUserName; // サーバーに"join"を送信 console.log( "- Send 'Join' to server" ); g_socket.emit( "join", {} ); // 画面の切り替え g_elementDivJoinScreen.style.display = "none"; // 参加画面の非表示 g_elementDivChatScreen.style.display = "block"; // チャット画面の表示 } （・・・略・・・） /* ---ここからコメントアウト // 「Send OfferSDP.」ボタンを押すと呼ばれる関数 function onclickButton_SendOfferSDP() { （・・・略・・・） } ---ここまでコメントアウト */

サーバーからのメッセージ受信に対する処理

サーバーに"join"を送信しすると、サーバーは"join"を送信元以外の全員に送信します。"join" を受信したクライアントは、OfferSDPの作成と送信の処理を行います。

送信元のSocketIDを取得する処理を追加します。

自身がまだ参加していないときは、"signaling"イベントを無視するようにします。

「Socket.IO関連の関数」コード部の「サーバーからのメッセージ受信に対する処理」に、"join" を受信したときの処理を追加します。
"join" を受信したときには、以下を行います。

「「Send OfferSDP.」ボタンを押すと呼ばれる関数」と同様の処理によりOfferSDPを作成します。
「RTCPeerConnectionオブジェクトの作成」関数の引数にSocketIDの追加します。

"offer" を受信したとき処理を変更します。

「RTCPeerConnectionオブジェクトの作成」関数の引数にSocketIDを追加します。
リモートユーザー名を「リモートのユーザー名を表示」するためのテキストボックスへ設定します。

"anser" を受信したとき処理を変更します。

リモートユーザー名を「リモートのユーザー名を表示」するためのテキストボックスへ設定します。

// サーバーからのメッセージ受信に対する処理 // ・サーバー側のメッセージ拡散時の「io.broadcast.emit( "signaling", objData );」に対する処理 g_socket.on( "signaling", ( objData ) => { （・・・略・・・） // 送信元のSocketID let strRemoteSocketID = objData.from; console.log( "- from : ", objData.from ); if( !g_elementTextUserName.value ) { // 自身がまだ参加していないときは、"signaling"イベントを無視。 console.log( "Ignore 'signaling' event because I haven't join yet." ); return; } if( "join" === objData.type ) { // onclickButton_CreateOfferSDP()、onclickButton_SendOfferSDP()と同様の処理 if( g_rtcPeerConnection ) { // 既にコネクションオブジェクトあり alert( "Connection object already exists." ); return; } // RTCPeerConnectionオブジェクトの作成 console.log( "Call : createPeerConnection()" ); let rtcPeerConnection = createPeerConnection( g_elementVideoLocal.srcObject, strRemoteSocketID ); g_rtcPeerConnection = rtcPeerConnection; // グローバル変数に設定 // DataChannelの作成 let datachannel = rtcPeerConnection.createDataChannel( "datachannel" ); // DataChannelオブジェクトをRTCPeerConnectionオブジェクトのメンバーに追加。 rtcPeerConnection.datachannel = datachannel; // DataChannelオブジェクトのイベントハンドラの構築 console.log( "Call : setupDataChannelEventHandler()" ); setupDataChannelEventHandler( rtcPeerConnection ); // OfferSDPの作成 console.log( "Call : createOfferSDP()" ); createOfferSDP( rtcPeerConnection ); } else if( "offer" === objData.type ) { （・・・略・・・） // RTCPeerConnectionオブジェクトの作成 console.log( "Call : createPeerConnection()" ); let rtcPeerConnection = createPeerConnection( g_elementVideoLocal.srcObject, strRemoteSocketID ); g_rtcPeerConnection = rtcPeerConnection; // グローバル変数に設定 // OfferSDPの設定とAnswerSDPの作成 console.log( "Call : setOfferSDP_and_createAnswerSDP()" ); setOfferSDP_and_createAnswerSDP( rtcPeerConnection, objData.data ); // 受信したSDPオブジェクトを渡す。 // リモートユーザー名の設定 g_elementTextRemoteUserName.value = objData.username; } else if( "answer" === objData.type ) { （・・・略・・・） // リモートユーザー名の設定 g_elementTextRemoteUserName.value = objData.username; } else if( "candidate" === objData.type ) { （・・・略・・・） } else { console.error( "Unexpected : Socket Event : signaling" ); } } );

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

「RTCPeerConnection関連の関数」コード部の「RTCPeerConnectionオブジェクトの作成」の関数の処理を変更します。

関数の引数に、チャット相手のSocketIDを追加します。
チャット相手のSocketIDを、作成したRTCPeerConnectionのメンバーに追加します。

// RTCPeerConnectionオブジェクトの作成 function createPeerConnection( stream, strRemoteSocketID ) { （・・・略・・・） // チャット相手のSocketIDをRTCPeerConnectionオブジェクトのメンバーに追加。 rtcPeerConnection.strRemoteSocketID = strRemoteSocketID; （・・・略・・・） }

g_socket.emit()

「RTCPeerConnection関連の関数」コード部の３か所のg_socket.emit() の送信データに「チャット相手のSocketID」を追加します。

「RTCPeerConnectionオブジェクトのイベントハンドラの構築関数」の「ICE candidate イベントが発生したときのイベントハンドラ」のg_socket.emit() の送信データに「チャット相手のSocketID」を追加します。
「OfferSDPの作成」関数のg_socket.emit() の送信データに「チャット相手のSocketID」を追加します。
「OfferSDPの設定とAnswerSDPの作成」関数のg_socket.emit() の送信データに「チャット相手のSocketID」を追加します。

加えて、「OfferSDPの作成」関数と「OfferSDPの設定とAnswerSDPの作成」関数のg_socket.emit() の送信データに「自身のユーザー名」を追加します。

// RTCPeerConnectionオブジェクトのイベントハンドラの構築 function setupRTCPeerConnectionEventHandler( rtcPeerConnection ) { （・・・略・・・） // ICE candidate イベントが発生したときのイベントハンドラ（・・・略・・・） rtcPeerConnection.onicecandidate = ( event ) => { （・・・略・・・） if( !isDataChannelOpen( rtcPeerConnection ) ) { // 通信前 // ICE candidateをサーバーを経由して相手に送信 console.log( "- Send ICE candidate to server" ); g_socket.emit( "signaling", { to: rtcPeerConnection.strRemoteSocketID, type: "candidate", data: event.candidate } ); } （・・・略・・・） }; （・・・略・・・） } （・・・略・・・） // OfferSDPの作成 function createOfferSDP( rtcPeerConnection ) { （・・・略・・・） if( !isDataChannelOpen( rtcPeerConnection ) ) { // 通信前 // 初期OfferSDPをサーバーを経由して相手に送信 console.log( "- Send OfferSDP to server" ); g_socket.emit( "signaling", { to: rtcPeerConnection.strRemoteSocketID, type: "offer", data: rtcPeerConnection.localDescription, username: g_elementTextUserName.value } ); } （・・・略・・・） } // OfferSDPの設定とAnswerSDPの作成 function setOfferSDP_and_createAnswerSDP( rtcPeerConnection, sessionDescription ) { （・・・略・・・） if( !isDataChannelOpen( rtcPeerConnection ) ) { // チャット前 // 初期AnswerSDPをサーバーを経由して相手に送信 console.log( "- Send AnswerSDP to server" ); g_socket.emit( "signaling", { to: rtcPeerConnection.strRemoteSocketID, type: "answer", data: rtcPeerConnection.localDescription, username: g_elementTextUserName.value } ); } （・・・略・・・） }

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

「UIから呼ばれる関数」コード部の「「Leave Chat.」ボタンを押すと呼ばれる関数」の処理を変更します。

「ローカルのユーザー名を表示」するためのテキストボックスをクリアします。
参加画面に切り替えます。

// 「Leave Chat.」ボタンを押すと呼ばれる関数 function onclickButton_LeaveChat() { console.log( "UI Event : 'Leave Chat.' button clicked." ); if( g_rtcPeerConnection ) { if( isDataChannelOpen( g_rtcPeerConnection ) ) { // チャット中 // チャット離脱の通知をDataChannelを通して相手に直接送信 console.log( "- Send 'leave' through DataChannel" ); g_rtcPeerConnection.datachannel.send( JSON.stringify( { type: "leave", data: "" } ) ); } console.log( "Call : endPeerConnection()" ); endPeerConnection( g_rtcPeerConnection ); } // ユーザー名のクリア g_elementTextUserName.value = ""; // 画面の切り替え g_elementDivChatScreen.style.display = "none"; // チャット画面の非表示 g_elementDivJoinScreen.style.display = "flex"; // 参加画面の表示 }

動作確認

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

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

ユーザー名を入力する参加画面が表示されます。

ユーザー名を入力し「Join」ボタンをクリックすると、チャット画面が表示されます。
チャット相手がいる場合はチャットが開始します（チャット相手の名前が表示されます）。

ダウンロード

サンプルプログラム

デモ

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