07. シグナリングサーバーによる自動シグナリング

WebRTCでは、P2P通信を始める前に、お互いの情報を交換するシグナリングと呼ばれる処理を行います。
前項までで、「マニュアルによるシグナリング」の処理を構築しました。
本項では、「マニュアルによるシグナリング」の処理を、「シグナリングサーバーによる自動シグナリングの処理」に変更します。

解説

「マニュアルによるシグナリング」の処理は、お互いの情報の交換をブラウザ画面のテキストエリアを通して、人のコピペ操作によって行いました。
「シグナリングサーバーによる自動シグナリング」の処理は、お互いの情報の交換をシグナリングサーバーを通して、人の操作なしで行います。

準備

「06. マニュアルシグナリング（「リモートの映像の表示、音声の再生」まで構築）」を実施していない場合は、実施します。

サーバー側の処理

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

「モジュール」部に、Socket.IO モジュールを読み込みます。（const socketIO = require( "socket.io" );）
「オブジェクト」部に、Socket.IO のオブジェクトを定義します。（const io = socketIO( server );）
「接続時の処理」を追加します。
「signalingデータ受信時の処理」を追加します。受信したデータを、送信元以外の全員に送信します。

「server.js」の内容を以下のようにします。
"use strict"; // 厳格モードとする // モジュール const express = require( "express" ); const http = require( "http" ); const socketIO = require( "socket.io" ); // オブジェクト const app = express(); const server = http.Server( app ); const io = socketIO( server ); // 定数 const PORT = process.env.PORT || 1337; // 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、"connection"イベント // 　クライアント側で、"connect"イベントが発生する io.on( "connection", ( socket ) => { console.log( "connection : ", socket.id ); // 切断時の処理 // ・クライアントが切断したら、サーバー側では"disconnect"イベントが発生する socket.on( "disconnect", () => { console.log( "disconnect : ", socket.id ); } ); // signalingデータ受信時の処理 // ・クライアント側のsignalingデータ送信「socket.emit( "signaling", objData );」に対する処理 socket.on( "signaling", ( objData ) => { console.log( "signaling : ", socket.id ); console.log( "- type : ", objData.type ); // 送信元以外の全員に送信 socket.broadcast.emit( "signaling", objData ); } ); } ); // 公開フォルダの指定 app.use( express.static( __dirname + "/public" ) ); // サーバーの起動 server.listen( PORT, () => { console.log( "Server on port %d", PORT ); } );

ウェブページ

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

「マニュアルシグナリング」用のHTML要素をコメントアウトし、「自動シグナリング」用のHTML要素を追加します。

「マニュアルシグナリング」用のHTML要素をコメントアウトします。（table部を「」で囲みます。）
「Send OfferSDP.」ボタンを追加します。（<button onclick="onclickButton_SendOfferSDP()">Send OfferSDP.</button>）
Socket.IO モジュールを読み込むコードを追加します。（<script src="/socket.io/socket.io.js"></script>）

「public/index.html」の内容を以下のようにします。
<!DOCTYPE html> <html> <head> （・・・略・・・） </head> <body> <h1>My Video Chat</h1> （・・・略・・・） <video id="video_remote" width="320" height="240" ; border: 1px solid black;" autoplay></video><audio id="audio_remote" autoplay></audio>  <br /> <button onclick="onclickButton_SendOfferSDP()">Send OfferSDP.</button>  <script src="/socket.io/socket.io.js"></script> <script src="./client.js"></script> </body> </html>

クライアント側の処理

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

「マニュアルシグナリング」のコードのコメントアウト

以下の「マニュアルシグナリング」のコードをコメントアウトします。

「マニュアルシグナリング」用のHTML要素のグローバル変数をコメントアウトします。（textareaに関する4つのグローバル変数を「/*」と「*/」で囲みます。）
「マニュアルシグナリング」用の「UIから呼ばれる関数」をコメントアウトします。（「Create OfferSDP.」ボタンを押すと呼ばれる関数、「Set OfferSDP and Create AnswerSDP.」ボタンを押すと呼ばれる関数、「Set AnswerSDP. Then the chat starts.」ボタンを押すと呼ばれる関数の３つの関数を「/*」と「*/」で囲みます。）
「コネクションの終了処理」のtextareaのクリアの処理をコメントアウトします。

グローバル変数

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

Socket.IO オブジェクト

// クライアントからサーバーへの接続要求 const g_socket = io.connect();

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

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

「Send OfferSDP.」ボタンを押したときの処理は、マニュアルシグナリングにおける「「Create OfferSDP.」ボタンを押すと呼ばれる関数」と同様の処理です。

// 「Send OfferSDP.」ボタンを押すと呼ばれる関数 function onclickButton_SendOfferSDP() { console.log( "UI Event : 'Send OfferSDP.' button clicked." ); // onclickButton_CreateOfferSDP()と同様の処理 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 ); }

Socket.IO関連の関数

「Socket.IO関連の関数」コード部に、「接続時の処理」と「サーバーからのメッセージ受信に対する処理」を追加します。

"offer" を受信したときの処理は、マニュアルシグナリングにおける「「Set OfferSDP and Create AnswerSDP.」ボタンを押すと呼ばれる関数」と同様の処理です。設定するOfferSDPとして、テキストエリアのデータではなく、受信したデータを使用します。
"answer" を受信したときの処理は、マニュアルシグナリングにおける「「Set AnswerSDP. Then the chat starts.」ボタンを押すと呼ばれる関数」と同様の処理です。設定するAnswerSDPとして、テキストエリアのデータではなく、受信したデータを使用します。

// 接続時の処理 // ・サーバーとクライアントの接続が確立すると、 // 　サーバー側で、"connection"イベント // 　クライアント側で、"connect"イベントが発生する g_socket.on( "connect", () => { console.log( "Socket Event : connect" ); } ); // サーバーからのメッセージ受信に対する処理 // ・サーバー側のメッセージ拡散時の「io.broadcast.emit( "signaling", objData );」に対する処理 g_socket.on( "signaling", ( objData ) => { console.log( "Socket Event : signaling" ); console.log( "- type : ", objData.type ); console.log( "- data : ", objData.data ); if( "offer" === objData.type ) { // onclickButton_SetOfferSDPandCreateAnswerSDP()と同様の処理 // 設定するOffserSDPとして、テキストエリアのデータではなく、受信したデータを使用する。 if( g_rtcPeerConnection ) { // 既にコネクションオブジェクトあり alert( "Connection object already exists." ); return; } // RTCPeerConnectionオブジェクトの作成 console.log( "Call : createPeerConnection()" ); let rtcPeerConnection = createPeerConnection( g_elementVideoLocal.srcObject ); g_rtcPeerConnection = rtcPeerConnection; // グローバル変数に設定 // OfferSDPの設定とAnswerSDPの作成 console.log( "Call : setOfferSDP_and_createAnswerSDP()" ); setOfferSDP_and_createAnswerSDP( rtcPeerConnection, objData.data ); // 受信したSDPオブジェクトを渡す。 } else if( "answer" === objData.type ) { // onclickButton_SetAnswerSDPthenChatStarts()と同様の処理 // 設定するAnswerSDPとして、テキストエリアのデータではなく、受信したデータを使用する。 if( !g_rtcPeerConnection ) { // コネクションオブジェクトがない alert( "Connection object does not exist." ); return; } // AnswerSDPの設定 console.log( "Call : setAnswerSDP()" ); setAnswerSDP( g_rtcPeerConnection, objData.data ); // 受信したSDPオブジェクトを渡す。 } else { console.error( "Unexpected : Socket Event : signaling" ); } } );

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

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

「iceGatheringState」が"complete"になったときの処理について、生成されたSDPをテキストエリアに貼り付ける処理をコメントアウトし、SDPをサーバーに送信する処理を追加します。

// 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(); // OfferSDPをサーバーに送信 console.log( "- Send OfferSDP to server" ); g_socket.emit( "signaling", { type: "offer", data: rtcPeerConnection.localDescription } ); } 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(); // AnswerSDPをサーバーに送信 console.log( "- Send AnswerSDP to server" ); g_socket.emit( "signaling", { type: "answer", data: rtcPeerConnection.localDescription } ); } else { console.error( "Unexpected : Unknown localDescription.type. type = ", rtcPeerConnection.localDescription.type ); } } };

動作確認

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

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

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

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

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

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

チャット前

チャット中