Upload
tomoyui-koyama
View
146
Download
0
Embed Size (px)
Citation preview
WebRTCによるWeb会議システムの構築
東京都立多摩科学技術高等学校
3年 小山智之
2015/09/23
目的
■WebRTCによるリアルタイム通信システム(映像・音声)の構築
Webブラウザ上で動作
様々なデバイスから簡単に利用可能
WebRTCとは
■HTML5で新たに定義された
でのリアルタイム通信
追加のプラグイン(Flash等)が不要
様々なOSやデバイスで動作
による高速通信
WebブラウザBWebブラウザA
(A) 1対1 通信の実装(イメージ図)
クライアントA クライアントB
通信
■カメラの映像、マイクの音声を取得してWebブラウザで表示。
A-1. 映像・音声の取得
Webブラウザ
Webサーバ
クライアント
A-1. 映像・音声の取得
■実行画面
●環境Google ChromePortable 36.0
Windows 7 Professional 32bit
■取得した映像・音声を互いに受け渡す。
■その際、NATが通信の障害となる。
A-2. 映像・音声の送受信
クライアントBクライアントA
Webブラウザ WebブラウザNAT
NAT
ローカルネットワークB
ローカルネットワークA
インターネット
通信の障害「NAT」とは
■グローバルIPアドレス(ポート)とプライベートIPアドレス(ポート)の変換
NAT
ローカル・ネットワーク インターネット
グローバル(外側)IPアドレス:123.45.67.89ポート:123
プライベート(内側)IPアドレス:10.1.1.2ポート:1345
自分だけではわからない
変換
10.1.1.2:1345
123.45.67.89:123
■STUNサーバは要求してきたクライアントのグローバルIPアドレスを取得して返す。
STUNサーバについて
NAT
ローカル・ネットワーク インターネット
クライアント
STUNサーバ
グローバルIPアドレス・ポートを教えて!
グローバル(外側)IPアドレス:123.45.67.89ポート:123
グローバルIPアドレスは123.45.67.89でポートは123番
グローバルIPアドレスとポートが分かった!
NAT
■通信するクライアント同士でグローバルIPアドレス・ポートを交換。
■ライブラリPeer.jsとそれに対応したサーバPeer-Serverを使用。
シグナリングサーバについて
234.56.78.90:456
IPアドレス ポート PeerID
123.45.67.89 123 kr932kf4
234.56.78.90 456 ir92f5c1
NAT
123.45.67.89:123
グローバルIP234.56.78.90ポート 456
グローバルIP123.45.67.89ポート 123
サーバで自動生成
シグナリングサーバクライアントA クライアントB
A-2. 映像・音声の送受信
■NAT問題をSTUNサーバ、シグナリングサーバによって解決し1対1通信を実現。
クライアントBクライアントA
Webブラウザ WebブラウザNAT
NAT
NAT
ローカルネットワーク
ローカルネットワーク
インターネット
A-2. 映像・音声の送受信
■実行画面
タブレットパソコン
(B) 複数同士通信の実装
(イメージ図)
クライアントA
クライアントB
通信
クライアントC
B. 複数同士での通信モデル
(A) 1対1の通信 (B) 複数同士の通信
・・・クライアント ・・・通信
■新たに通信へクライアントが加わる時
B. クライアントのPeerID管理
kr932kf4
9ri4jwdg
jhd5f3yr
o8gr4k7aPeerID
通信したい
相手のIDが分からない
ID管理サーバについて
■ルーム機能の実装、PeerIDの一元管理ルーム名 ユーザID PeerID
test i42lf2f7 hrg5cf…
tama k9dig5h3 th1o3q…
test f74ydw53 2aare2…
test 0y4fw29f 5jw1bz…
ID管理サーバ
クライアント
PeerID: 5jw1bz…ルーム名: test
ルーム「test」に次のユーザがいる!
ユーザID PeerID
i42lf2f7 hrg5cf…
f74ydw53 2aare2…
0y4fw29f 5jw1bz…
PeerID「 5jw1bz…」をルーム「test」へ追加して!
サーバで自動生成
■新たに通信へクライアントが加わる時
B. 複数同士の通信
kr932kf4
9ri4jwdg
jhd5f3yr
o8gr4k7aPeerID
B. 複数同士の通信
■実行画面(18台での通信)
まとめ
■WebRTCはスマートフォンで 通信可能
カメラやマイクが内蔵されている為
■NATを越えての が可能
STUNサーバでのIP情報の取得
シグナリングサーバでのIP情報の一元管理
■相手の情報を 通信可能
ルーム概念をID管理サーバにより実現している為
今後の展望
(以下:UI)の改善
機器毎に適したUIの設計
UI自動切り替えの実装
の充実
テキストチャット
ホワイトボード
ファイル共有