WebRTCで複数人接続してみる

0 件のコメント
WebRTCをさわってみる&手動シグナリングしてみるの続きです。

今回は、WebRTCを使って複数人接続してみたいと思います。

1対1で接続するときとの違いは?

前回のおさらいですが、1対1で接続するとこんな感じになる。
図1. 1on1の接続
そして、こういう手順でPeer to Peerさせることができます。
No端末A端末B
1video要素を作っておくvideo要素を作っておく
2Peerを生成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で生成した経路情報を受信


じゃあ、複数人接続の場合はどうなるのか?
3端末のときの接続を例として記述します。
図2. 3端末での接続
上記のように接続するには、
端末Aと端末Bと端末Cがそれぞれ、下記のようなPeerを生成しなければなりません。
・端末Aと端末BをつなぐPeerの生成、端末Aと端末CをつなぐPeerの生成
・端末Bと端末AをつなぐPeerの生成、端末Bと端末CをつなぐPeerの生成
・端末Cと端末AをつなぐPeerの生成、端末Cと端末BをつなぐPeerの生成

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

結構複雑っす。

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

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

基本的な流れは1対1の時と一緒ですが、
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やるぞー!

以上!

0 件のコメント :

コメントを投稿