ホーム > プログラミング > ビデオチャットアプリを作る > 16. 複数人でのビデオチャット

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



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

解説

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

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

準備

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

サーバー側の処理

変更なし。

ウェブページ

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

「public/index.html」 の内容を以下のようにします。

クライアント側の処理

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

グローバル変数

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

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

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

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

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

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

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

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

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

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

コネクションの終了処理

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

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

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

その他の内部関数

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

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

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

動作確認

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

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



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


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

ダウンロード

サンプルプログラム

デモ

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

関連ページ

前項目 : 15. ユーザー名の入力と表示

次項目 : 17. チャットルームに分かれてチャット


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


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