WebRTCによるWeb会議システムの構築

東京都立多摩科学技術高等学校

３年 小山智之

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自動切り替えの実装

の充実

テキストチャット

ホワイトボード

ファイル共有