16. 複数人でのビデオチャット

前項までのビデオチャットプログラムは、1対1のビデオチャットでした。本項では複数人でビデオチャットができるようにします。

解説

WebRTCを用いて複数人でビデオチャットするには、すべての参加者同士でコネクションオブジェクトを作成します。

前項までは、「コネクションオブジェクトは1つのみ」「リモートのユーザー名、映像、音声のHTML要素は1つのみ」でした。
本項では、「コネクションオブジェクトは参加者の数に応じて動的に追加削除する」「リモートのユーザー名、映像、音声のHTML要素は参加者の数に応じて動的に追加削除する」ようにします。

準備

「15. ユーザー名の入力と表示」を実施していない場合は、実施します。

サーバー側の処理

変更なし。

ウェブページ

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

リモートのユーザー名、映像、音声のHTML要素は参加者の数に応じて動的に追加削除するので、HTMLからは削除します。
前項でコメントアウトした「Send OfferSDP.」ボタンを削除します。

「public/index.html」の内容を以下のようにします。
<!DOCTYPE html> （・・・略・・・） <body style="display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0;"> （・・・略・・・） <div id="div_userinfo" style="display: flex; flex-wrap: wrap"> <div border="1px solid black"><input type="text" id="text_local_username" readonly="readonly"><br /><video id="video_local" width="320" height="240" ; border: 1px solid black;" autoplay></video></div>  </div> （・・・略・・・） </body> </html>

クライアント側の処理

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

グローバル変数

「コネクションオブジェクトは参加者の数に応じて動的に追加削除する」および「リモートのユーザー名、映像、音声のHTML要素は参加者の数に応じて動的に追加削除する」のためのグローバル変数を追加します。
「グローバル変数」コード部に、以下のグローバル変数の定義を追加します。

「ユーザー情報（ユーザー名、映像、音声）」を入れるDIV要素
グローバルRTCPeerConnectionオブジェクトMap

「リモートのユーザー名、映像、音声のHTML要素は1つのみ」および「コネクションオブジェクトは1つのみ」のために存在したグローバル変数をコメントアウトします。
「グローバル変数」コード部に、以下のグローバル変数の定義をコメントアウトします。

「リモートのユーザー名を表示」するためのテキストボックス
リモートの映像表示用の要素
リモートの音声再生用の要素
単独のグローバルRTCPeerConnectionオブジェクト

// ↓↓↓グローバル変数↓↓↓ （・・・略・・・） const g_elementDivUserInfo = document.getElementById( "div_userinfo" ); 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" ); （・・・略・・・） // let g_rtcPeerConnection = null; let g_mapRtcPeerConnection = new Map(); （・・・略・・・） // ↑↑↑グローバル変数↑↑↑

カメラとマイクのOn/Offのチェックボックスを押すと呼ばれる関数

「UIから呼ばれる関数」部の「カメラとマイクのOn/Offのチェックボックスを押すと呼ばれる関数」の処理を変更します。

単独のグローバルRTCPeerConnectionオブジェクトに対する処理を、グローバルRTCPeerConnectionオブジェクトMapのループ処理に変更します。

// カメラとマイクのOn/Offのチェックボックスを押すと呼ばれる関数 function onclickCheckbox_CameraMicrophone() { （・・・略・・・） g_mapRtcPeerConnection.forEach( ( rtcPeerConnection ) => { // コネクションオブジェクトに対してTrack削除を行う。 // （コネクションオブジェクトに対してTrack削除を行わなかった場合、使用していないstream通信が残る。） let senders = rtcPeerConnection.getSenders(); senders.forEach( ( sender ) => { if( sender.track ) { if( idCameraTrack_old === sender.track.id || idMicrophoneTrack_old === sender.track.id) { rtcPeerConnection.removeTrack( sender ); // removeTrack()の結果として、通信相手に、streamの「removetrack」イベントが発生する。 } } } ); } ); （・・・略・・・） g_mapRtcPeerConnection.forEach( ( rtcPeerConnection ) => { // コネクションオブジェクトに対してTrack追加を行う。 stream.getTracks().forEach( ( track ) => { rtcPeerConnection.addTrack( track, stream ); // addTrack()の結果として、「Negotiation needed」イベントが発生する。 } ); } ); （・・・略・・・）

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

「UIから呼ばれる関数」部の「「Send Message」ボタンを押すと呼ばれる関数」の処理を変更します。

コネクションオブジェクトがないかをチェックする処理を、グローバルRTCPeerConnectionオブジェクトMapのサイズがゼロかチェックする処理に変更します。
単独のグローバルRTCPeerConnectionオブジェクトに対する処理を、グローバルRTCPeerConnectionオブジェクトMapのループ処理に変更します。

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

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

単独のグローバルRTCPeerConnectionオブジェクトに対する処理を、グローバルRTCPeerConnectionオブジェクトMapのループ処理に変更します。

// 「Leave Chat.」ボタンを押すと呼ばれる関数 function onclickButton_LeaveChat() { （・・・略・・・） g_mapRtcPeerConnection.forEach( ( rtcPeerConnection ) => { if( isDataChannelOpen( rtcPeerConnection ) ) { // チャット中 // チャット離脱メッセージをDataChannelを通して相手に直接送信 console.log( "- Send 'leave' through DataChannel" ); rtcPeerConnection.datachannel.send( JSON.stringify( { type: "leave", data: "" } ) ); } console.log( "Call : endPeerConnection()" ); endPeerConnection( rtcPeerConnection ); } ); （・・・略・・・） }

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

「Socket.IO関連の関数」部の「サーバーからのメッセージ受信に対する処理」を変更します。

"join"と"offer"を受信したときの、「既にコネクションオブジェクトがあるか」の処理を、「単独のグローバルRTCPeerConnectionオブジェクトが存在するか」から、「グローバルRTCPeerConnectionオブジェクトMap」中に「リモートのSocketID」をキーとするものがあるかの処理に変更します。
"join"と"offer"を受信したときの、「単独のグローバルRTCPeerConnectionオブジェクトへの設定処理」を、「グローバルRTCPeerConnectionオブジェクトMapへの追加処理」に変更します。
"offer"と"answer"を受信したときの、「リモートユーザー名の設定」の処理を「リモートユーザー名を引数にして、リモート情報表示用のHTML要素を追加する」処理に変更します。
"answer"と"candidate"を受信したときの、「単独のグローバルRTCPeerConnectionオブジェクトに対する処理」を、「リモートSocketIDをキーとしてグローバルRTCPeerConnectionオブジェクトMapからオブジェクトを取得し、取得したオブジェクトに対して処理」するように変更します。

// サーバーからのメッセージ受信に対する処理 // ・サーバー側のメッセージ拡散時の「io.broadcast.emit( "signaling", objData );」に対する処理 g_socket.on( "signaling", ( objData ) => { （・・・略・・・） if( "join" === objData.type ) { （・・・略・・・） if( g_mapRtcPeerConnection.get( strRemoteSocketID ) ) { // 既にコネクションオブジェクトあり alert( "Connection object already exists." ); return; } // RTCPeerConnectionオブジェクトの作成 console.log( "Call : createPeerConnection()" ); let rtcPeerConnection = createPeerConnection( g_elementVideoLocal.srcObject, strRemoteSocketID ); g_mapRtcPeerConnection.set( strRemoteSocketID, rtcPeerConnection ); // グローバル変数に設定（・・・略・・・） } else if( "offer" === objData.type ) { （・・・略・・・） if( g_mapRtcPeerConnection.get( strRemoteSocketID ) ) { // 既にコネクションオブジェクトあり alert( "Connection object already exists." ); return; } // RTCPeerConnectionオブジェクトの作成 console.log( "Call : createPeerConnection()" ); let rtcPeerConnection = createPeerConnection( g_elementVideoLocal.srcObject, strRemoteSocketID ); g_mapRtcPeerConnection.set( strRemoteSocketID, rtcPeerConnection ); // グローバル変数に設定（・・・略・・・） // リモートユーザー名の設定 //g_elementTextRemoteUserName.value = objData.username; // リモート情報表示用のHTML要素の追加 appendRemoteInfoElement( strRemoteSocketID, objData.username ); } else if( "answer" === objData.type ) { // onclickButton_SetAnswerSDPthenChatStarts()と同様の処理 // 設定するAnswerSDPとして、テキストエリアのデータではなく、受信したデータを使用する。 let rtcPeerConnection = g_mapRtcPeerConnection.get( strRemoteSocketID ); if( !rtcPeerConnection ) { // コネクションオブジェクトがない alert( "Connection object does not exist." ); return; } // AnswerSDPの設定 console.log( "Call : setAnswerSDP()" ); setAnswerSDP( rtcPeerConnection, objData.data ); // 受信したSDPオブジェクトを渡す。 // リモートユーザー名の設定 //g_elementTextRemoteUserName.value = objData.username; // リモート情報表示用のHTML要素の追加 appendRemoteInfoElement( strRemoteSocketID, objData.username ); } else if( "candidate" === objData.type ) { let rtcPeerConnection = g_mapRtcPeerConnection.get( strRemoteSocketID ); if( !rtcPeerConnection ) { // コネクションオブジェクトがない alert( "Connection object does not exist." ); return; } （・・・略・・・） addCandidate( rtcPeerConnection, objData.data ); // 受信したICE candidateの追加 } else { console.error( "Unexpected : Socket Event : signaling" ); } } );

コネクションの終了処理

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

「リモート映像の停止」と「リモート音声の停止」の処理をコメントアウトし、「リモート映像表示用のHTML要素の削除」の処理を追加します。
「単独のグローバルRTCPeerConnectionオブジェクトのクリア」の処理をコメントアウトし、「グローバルRTCPeerConnectionオブジェクトMapからの削除」の処理を追加します。

// コネクションの終了処理 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 ); // リモート映像表示用のHTML要素の削除 console.log( "Call : removeRemoteVideoElement()" ); removeRemoteInfoElement( rtcPeerConnection.strRemoteSocketID ); // DataChannelの終了 if( "datachannel" in rtcPeerConnection ) { rtcPeerConnection.datachannel.close(); rtcPeerConnection.datachannel = null; } // グローバル変数のクリア //g_rtcPeerConnection = null; // グローバル変数Mapから削除 g_mapRtcPeerConnection.delete( rtcPeerConnection.strRemoteSocketID ); // ピアコネクションの終了 rtcPeerConnection.close(); }

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

「RTCPeerConnection関連の関数」部の「RTCPeerConnectionオブジェクトのイベントハンドラの構築」関数の「Track イベントが発生したときのイベントハンドラ」と「相手のメディアストリームがRTCPeerConnectionから削除されたときのイベントハンドラ」の処理を変更します。

「グローバルのリモートの映像表示用・音声再生用の要素に対する処理」を、「リモートSocketIDをキーとしてリモートの映像表示用・音声再生用の要素を取得し、取得した要素に対して処理」するように変更します。

// Track イベントが発生したときのイベントハンドラ（・・・略・・・） rtcPeerConnection.ontrack = ( event ) => { （・・・略・・・） if( "video" === track.kind ) { let elementVideoRemote = getRemoteVideoElement( rtcPeerConnection.strRemoteSocketID ); console.log( "Call : setStreamToElement( Video_Remote, stream )" ); setStreamToElement( elementVideoRemote, stream ); } else if( "audio" === track.kind ) { let elementAudioRemote = getRemoteAudioElement( rtcPeerConnection.strRemoteSocketID ); console.log( "Call : setStreamToElement( Audio_Remote, stream )" ); setStreamToElement( elementAudioRemote, stream ); } （・・・略・・・） // 相手のメディアストリームがRTCPeerConnectionから削除されたときのイベントハンドラ（・・・略・・・） stream.onremovetrack = ( evt ) => { （・・・略・・・） if( "video" === trackRemove.kind ) { let elementVideoRemote = getRemoteVideoElement( rtcPeerConnection.strRemoteSocketID ); console.log( "Call : setStreamToElement( Video_Remote, null )" ); setStreamToElement( elementVideoRemote, null ); } else if( "audio" === trackRemove.kind ) { let elementAudioRemote = getRemoteAudioElement( rtcPeerConnection.strRemoteSocketID ); console.log( "Call : setStreamToElement( Audio_Remote, null )" ); setStreamToElement( elementAudioRemote, null ); } （・・・略・・・）

その他の内部関数

「その他の内部関数」部に、以下のリモート情報表示用のHTMLの要素の追加・取得・削除の関数を追加します。

// リモート情報表示用のHTML要素の追加 function appendRemoteInfoElement( strRemoteSocketID, strUserName ) { // <div border="1 solid #000000"><input type="text" id="text_remote_username" readonly="readonly"><br /><video id="video_remote" width="320" height="240" ; border: 1px solid black;"></video><audio id="audio_remote"></audio></div> // IDの作成 let strElementTextID = "text_" + strRemoteSocketID; let strElementVideoID = "video_" + strRemoteSocketID; let strElementAudioID = "audio_" + strRemoteSocketID; let strElementTableID = "table_" + strRemoteSocketID; // text HTML要素の作成 let elementText = document.createElement( "input" ); elementText.id = strElementTextID; elementText.type = "text"; elementText.readOnly = "readonly"; elementText.value = strUserName; // video HTML要素の作成 let elementVideo = document.createElement( "video" ); elementVideo.id = strElementVideoID; elementVideo.width = "320"; elementVideo.height = "240"; elementVideo.style.border = "1px solid black"; elementVideo.autoplay = true; // audio HTML要素の作成 let elementAudio = document.createElement( "audio" ); elementAudio.id = strElementAudioID; elementAudio.autoplay = true; // div HTML要素の作成 let elementDiv = document.createElement( "div" ); elementDiv.id = strElementTableID; elementDiv.border = "1px solid black"; // 要素の配置 elementDiv.appendChild( elementText ); // ユーザー名 elementDiv.appendChild( document.createElement( "br" ) ); // 改行 elementDiv.appendChild( elementVideo ); // Video elementDiv.appendChild( elementAudio ); // Audio g_elementDivUserInfo.appendChild( elementDiv ); } // リモート映像表示用のHTML要素の取得 function getRemoteVideoElement( strRemoteSocketID ) { let strElementVideoID = "video_" + strRemoteSocketID; return document.getElementById( strElementVideoID ); } // リモート音声用のHTML要素の取得 function getRemoteAudioElement( strRemoteSocketID ) { let strElementAudioID = "audio_" + strRemoteSocketID; return document.getElementById( strElementAudioID ); } // リモート情報表示用のHTML要素の削除 function removeRemoteInfoElement( strRemoteSocketID ) { let strElementTableID = "table_" + strRemoteSocketID; let elementTable = document.getElementById( strElementTableID ); if( !elementTable ) { console.error( "Unexpected : Remote Video Element is not exist. RemoteSocketID = ", strRemoteSocketID ); } // 要素の削除 g_elementDivUserInfo.removeChild( elementTable ); }

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

前項でコメントアウトした「「Send OfferSDP.」ボタンを押すと呼ばれる関数」を削除します。

動作確認

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

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

4つのブラウザ間でビデオチャット

インターネットに公開されたサーバーでプログラムを動作させ、４つの端末間でビデオチャット

ダウンロード

サンプルプログラム

デモ

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