WebRTCで複数人接続してみる

前回のおさらいですが、１対１で接続するとこんな感じになる。

図1. 1on1の接続

そして、こういう手順でPeer to Peerさせることができます。

No	端末A	端末B
1	video要素を作っておく	video要素を作っておく
2	Peerを生成	Peerを生成
3	メディアに接続(カメラの起動を許可すること) ・Peerにストリームを接続し、自身の端末の状態をvideo要素で閲覧できる状態になる	メディアに接続(カメラの起動を許可すること) ・Peerにストリームを接続し、自身の端末の状態をvideo要素で閲覧できる状態になる
4	端末Bへ送信するOfferを生成
5		端末Aで生成したOfferを受信
6		端末Aへ送信するAnswerを生成
7	端末Bで生成したAnswerを受信
8	端末Bへ送信する経路情報を出力
9		端末Aで生成した経路情報を受信
10		端末Aへ送信する経路情報を出力
11	端末Bで生成した経路情報を受信

じゃあ、複数人接続の場合はどうなるのか？

図2. ３端末での接続

上記のように接続するには、

端末Aと端末Bと端末Cがそれぞれ、下記のようなPeerを生成しなければなりません。

・端末Aと端末BをつなぐPeerの生成、端末Aと端末CをつなぐPeerの生成

・端末Bと端末AをつなぐPeerの生成、端末Bと端末CをつなぐPeerの生成

・端末Cと端末AをつなぐPeerの生成、端末Cと端末BをつなぐPeerの生成

そして、４台目が追加になる場合は更に１つずつPeerを生成することになり、
それを動的に通知して接続処理をするようにしなければなりません。

結構複雑っす。

どういう流れで複数接続させるか？

３端末での接続手順を記載します。
（灰色のセルは端末未接続時・25〜38、25`〜38`は並行で処理されます）

No	端末A	端末B	端末C
1	特定URLにアクセス
2	socket.ioでコネクションをはる
3	コネクションをはってるユーザー全員にコールする
4	いなかったので終わり。
5		特定URLにアクセス
6		socket.ioでコネクションをはる
7		コネクションをはってるユーザー全員にコールする
8	端末Bからコールされた
9	端末Aのsocketのidを端末Bに返却する
10		端末Aのsocketのidを返却される
11		Peerを生成
12		socketのidを元に、端末AへSDPを送信(オファー)
13	Peerを生成
14	端末BのSDPを受信(オファーをレシーブ)
15	socketのidを元に、端末BへSDPを送信(アンサー)
16		端末AのSDPを受信(アンサーをレシーブ)
17		端末Aへ端末Bまでの経路情報を送信
18	端末Bから経路情報を受信
19	端末Bへ端末Aまでの経路情報を送信
20		端末Aから経路情報を受信
21	Peer to Peer!	Peer to Peer!
22			特定URLにアクセス
23			socket.ioでコネクションをはる
24			コネクションをはってるユーザー全員にコールする
	下記のAとC / BとCのやりとりは並行して行われる
25	端末Cからコールされた
26	端末Aのsocketのidを端末Cに返却する
27			端末Aのsocketのidを返却される
28			Peerを生成
29			socketのidを元に、端末AへSDPを送信(オファー)
30	Peerを生成
31	端末CのSDPを受信(オファーをレシーブ)
32	socketのidを元に、端末CへSDPを送信(アンサー)
33			端末AのSDPを受信(アンサーをレシーブ)
34			端末Aへ端末Cまでの経路情報を送信
35	端末Cから経路情報を受信
36	端末Cへ端末Aまでの経路情報を送信
37			端末Aから経路情報を受信
38	Peer to Peer!		Peer to Peer!
25`		端末Cからコールされた
26`		端末Bのsocketのidを端末Cに返却する
27`			端末Bのsocketのidを返却される
28`			Peerを生成
29`			socketのidを元に、端末BへSDPを送信(オファー)
30`		Peerを生成
31`		端末CのSDPを受信(オファーをレシーブ)
32`		socketのidを元に、端末CへSDPを送信(アンサー)
33`			端末CのSDPを受信(アンサーをレシーブ)
34`			端末Bへ端末Cまでの経路情報を送信
35`		端末Cから経路情報を受信
36`		端末Cへ端末Bまでの経路情報を送信
37`			端末Bから経路情報を受信
38`		Peer to Peer!	Peer to Peer!

基本的な流れは１対１の時と一緒ですが、
Peerの生成タイミングや、Peer生成後にローカルのストリームとの接続手順などが変わってきます。
（「コネクションはっているユーザー全員にコールする」のレスポンスでオファー送ることもできた。そうすると、通信回数としては最小になりそう。）

作ってみた

このソースを使うと、↓↓のような画面がでるので、手順にそって作業してみてください。
・シグナリングサーバー(Node.js)
 これをして、node_modulesを取得してください。

$ npm install

そして、これで起動する。

$ node app.js

・Webサーバー（Class風実装は特に見ないでいいです。。
（長いっすね。。

上記のソースをDocumentRoot以下に配置し、ブラウザからアクセスして、動作確認をしてみる。
1. 特定のURLへアクセス（筆者はここhttp://localhost/index.html

図3. カメラ・マイクへのアクセス確認

画面右上の「許可」ボタンを押して、カメラ・マイクへのアクセスを許可してください。

2.  カメラの表示確認

図4. カメラ動画表示

1.で「許可」することにより、小さいですが、ローカルのカメラ画像が表示されるようになります。
そして、「ここを押したら繋がるけどカメラを先に許可しといてね」ボタンを押すことで、シグナリングサーバーへアクセスします。
（自分がページを開いてるよ。ってことを通知してるだけで、ここの手順では何も起こりません。）
※上記手順の1〜4です。

3.  リモートのカメラ画像を表示する

図5. リモートのカメラ動画表示

タブをいくつか開いて、1.と2.の手順を実施すると、接続した分だけ上記のようにvideo要素が増えていきます。

終わりに。

タブを複数開いて通知確認しながらテストしてたのですが、頭がこんがらがるし、結構たいへんでした。

シグナリングサーバーを応用！ 「WebRTCを使って複数人で話してみよう」を参考にさせて頂きました！

つぎこそはDataChannelやるぞー！

以上！