11. 独自データの送受信

前項までに、リモート映像の表示、リモート音声の再生ができるようになりました。
Web RTCを利用すると、映像ストリームデータ、音声ストリームデータの送受信にとどまらず、独自データの送受信を行うことができます。
Web RTCを利用して独自データを送受信を行うには、DataChannelを作成します。
本項では、カスタムデータの送受信として、テキストデータの送受信を行います。

解説

カスタムデータの送受信ですべきことは、以下です。

• Offerする側は、OfferSDPを作成する前に、DataChannnelオブジェクトを作成します。作成したDataChannelオブジェクトを保持します。
• Offerされる側は、相手との接続が完了すると、Data channel イベントが発生します。Data channel イベント時には、DataChannelオブジェクトを手にいれることができるので、手に入れたDataChannelオブジェクトを保持します。
• 作成もしくは手に入れたDataChannelオブジェクトについて、DataChannelに関するイベントハンドラを構築します。
• 独自データの送信は、DataChannelオブジェクトのsend()関数で行います。
• 独自データの受信は、DataChannelオブジェクトの「message イベントが発生したときのイベントハンドラ」で行います。

準備

「10. Trickle ICE 方式によるシグナリング」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

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

「body」部の「リモート映像表示用の要素とリモート音声再生用の要素」の下に、以下に関するコードを追加します。

• 送信するテキストメッセージを入力するためのテキストボックス
• 入力したテキストメッセージを送信するときに押すボタン
• 受信したテキストメッセージと送信したテキストメッセージを表示するためのテキストエリア

<!-- エンターキーによるボタン押下を行うために、<button>ではな<form>と<input type="submit">を使用。 ボタン押下(=submit)時にページリロードが行われないように、onsubmitの設定の最後に"return false;"を追加。--> <br /> <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>

クライアント側の処理

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

グローバル変数

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

• 送信するテキストメッセージを入力するためのテキストボックス
• 受信したテキストメッセージと送信したテキストメッセージを表示するためのテキストエリア

const g_elementTextMessageForSend = document.getElementById( "text_message_for_send" ); const g_elementTextareaMessageReceived = document.getElementById( "textarea_message_received" );

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

Offerする側は、OfferSDPを作成する前に、DataChannnelオブジェクトを作成します。作成したDataChannelオブジェクトを保持します。

「UIから呼ばれる関数」コード部の「Send OfferSDP.」ボタンを押すと呼ばれる関数について、DataChannelの作成に関する処理を追加します。

• DataChannelオブジェクトを作成します。
• DataChannelオブジェクトを、RTCPeerConnectionオブジェクトのメンバーに追加します。
• DataChannelオブジェクトのイベントハンドラを構築します。

// 「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; // グローバル変数に設定 // DataChannelの作成 let datachannel = rtcPeerConnection.createDataChannel( "my datachannel" ); // DataChannelオブジェクトをRTCPeerConnectionオブジェクトのメンバーに追加。 rtcPeerConnection.datachannel = datachannel; // DataChannelオブジェクトのイベントハンドラの構築 console.log( "Call : setupDataChannelEventHandler()" ); setupDataChannelEventHandler( rtcPeerConnection ); // OfferSDPの作成 createOfferSDP( rtcPeerConnection ); }

Data channel イベントが発生したときのイベントハンドラ

Offerされる側は、相手との接続が完了すると、DataChannelイベントが発生します。Data channel イベント時には、DataChannelオブジェクトを手にいれることができるので、手に入れたDataChannelオブジェクトを保持します。

「RTCPeerConnection関連の関数」コード部の「RTCPeerConnectionオブジェクトのイベントハンドラの構築」関数に、「Data channel イベントが発生したときのイベントハンドラ」を追加します。

• DataChannelオブジェクトが手に入ります。
• DataChannelオブジェクトを、RTCPeerConnectionオブジェクトのメンバーに追加します。
• DataChannelオブジェクトのイベントハンドラを構築します。

// RTCPeerConnectionオブジェクトのイベントハンドラの構築 function setupRTCPeerConnectionEventHandler( rtcPeerConnection ) { （・・・略・・・） // Data channel イベントが発生したときのイベントハンドラ // - このイベントは、createDataChannel() を呼び出すリモートピアによって // RTCDataChannelが接続に追加されたときに送信されます。 // see : https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ondatachannel rtcPeerConnection.ondatachannel = ( event ) => { console.log( "Event : Data channel" ); // DataChannelオブジェクトをRTCPeerConnectionオブジェクトのメンバーに追加。 rtcPeerConnection.datachannel = event.channel; // DataChannelオブジェクトのイベントハンドラの構築 console.log( "Call : setupDataChannelEventHandler()" ); setupDataChannelEventHandler( rtcPeerConnection ); }; }

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

作成もしくは手に入れたDataChannelオブジェクトについて、DataChannelに関するイベントハンドラを構築します。

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

• 「message イベントが発生したときのイベントハンドラ」の処理として、データタイプが"message" のデータを受信したときは、受信メッセージをメッセージテキストエリアへ追加します。

// DataChannelオブジェクトのイベントハンドラの構築 function setupDataChannelEventHandler( rtcPeerConnection ) { if( !( "datachannel" in rtcPeerConnection ) ) { console.error( "Unexpected : DataChannel does not exist." ); return; } // message イベントが発生したときのイベントハンドラ rtcPeerConnection.datachannel.onmessage = ( event ) => { console.log( "DataChannel Event : message" ); let objData = JSON.parse( event.data ); console.log( "- type : ", objData.type ); console.log( "- data : ", objData.data ); if( "message" === objData.type ) { // 受信メッセージをメッセージテキストエリアへ追加 let strMessage = objData.data; g_elementTextareaMessageReceived.value = strMessage + "\n" + g_elementTextareaMessageReceived.value; // 一番上に追加 //g_elementTextareaMessageReceived.value += strMessage + "\n"; // 一番下に追加 } } }

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

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

• メッセージをDataChannelを通して相手に直接送信します。
• 送信メッセージをメッセージテキストエリアへ追加します。

// 「Send Message」ボタンを押すと呼ばれる関数 function onsubmitButton_SendMessage() { console.log( "UI Event : 'Send Message' button clicked." ); if( !g_rtcPeerConnection ) { // コネクションオブジェクトがない alert( "Connection object does not exist." ); return; } if( !isDataChannelOpen( g_rtcPeerConnection ) ) { // DataChannelオブジェクトが開いていない alert( "Datachannel is not open." ); return; } if( !g_elementTextMessageForSend.value ) { alert( "Message for send is empty. Please enter the message for send." ); return; } // メッセージをDataChannelを通して相手に直接送信 console.log( "- Send Message through DataChannel" ); g_rtcPeerConnection.datachannel.send( JSON.stringify( { type: "message", data: g_elementTextMessageForSend.value } ) ); // 送信メッセージをメッセージテキストエリアへ追加 g_elementTextareaMessageReceived.value = g_elementTextMessageForSend.value + "\n" + g_elementTextareaMessageReceived.value; // 一番上に追加 //g_elementTextareaMessageReceived.value += g_elementTextMessageForSend.value + "\n"; // 一番下に追加 g_elementTextMessageForSend.value = ""; }

コネクションの終了処理関数

「RTCPeerConnection関連の関数」コード部の「コネクションの終了処理」関数の処理を変更します。

• 「DataChannelの終了」の処理を追加します。

// コネクションの終了処理 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 ); // DataChannelの終了 if( "datachannel" in rtcPeerConnection ) { rtcPeerConnection.datachannel.close(); rtcPeerConnection.datachannel = null; } // グローバル変数から解放 g_rtcPeerConnection = null; // ピアコネクションの終了 rtcPeerConnection.close(); }

DataChannelが開いているか関数

「DataChannel関連の関数」コード部に、「DataChannelが開いているかを返却する」関数の定義を追加します。

• RTCPeerConnectionオブジェクトのdatachannelの「readyState」が「open」なら「DataChannelは開いている（true）」を返します。それ以外は、「DataChannelは開いていない（false）」を返します。

// DataChannelが開いているか function isDataChannelOpen( rtcPeerConnection ) { if( !( "datachannel" in rtcPeerConnection ) ) { // datachannelメンバーが存在しない return false; } if( !rtcPeerConnection.datachannel ) { // datachannelメンバーがnull return false; } if( "open" !== rtcPeerConnection.datachannel.readyState ) { // datachannelメンバーはあるが、"open"でない。 return false; } // DataCchannelが開いている return true; }

動作確認

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

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



片方のブラウザで「Send OfferSDP」ボタンを押すと、ビデオチャットが開始します。

テキストメッセージを送受信することができます。

ダウンロード

サンプルプログラム

デモ

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

関連ページ

前項目 : 10. Trickle ICE 方式によるシグナリング

次項目 : 12. カメラ（マイク）の停止と再開