いまさらやけどWeb RTC ええやん

Daisuke Imiya

自己紹介• 井宮大輔（いみやだいすけ）• 主な開発したソフトウェア

– テレビ電話 (VAIO)– ウォークマンマルチメディアフレームワーク– NAV-U マルチメディアフレームワーク– Android Walkman アプリケーション– Xperia Video アプリケーション、サーバー

• http://www.sonymobile.com/global-en/apps-services/sony-media-apps/– 最近は内緒

料理好きっす

https://www.facebook.com/daisuke.imiya

Web RTC って

Web Real-Time Communicationボイスチャット、ビデオチャットがブラウザでプラグインなしで実現可能にしてくれるありがたい機能です

動画、音声、テキスト、バイナリ

動画、音声、テキスト、バイナリP2P

Web RTC の構成

• Media Capture And Streams–ブラウザでカメラやマイクから取得できる映

像や音声を使う仕様

• WebRTC 1.0: Real-time Communication Between Browsers– Peer to Peer によるリアルタイム通信を行う

ための仕様

Web RTC の処理の流れ

Web RTC の処理の流れ 1

192.168.0.100 192.168.0.200

インターネット

プライベートネットワーク プライベートネットワーク

Web RTC の処理の流れ 2

192.168.0.100 192.168.0.200

Web SocketServer

StunServer

WebServer

HTML + JS + CSS HTML + JS + CSS

Web Socket Web Socket

Web RTC の処理の流れ 3

192.168.0.100 192.168.0.200

Web SocketServer

StunServer

WebServer

SDPA

Session Description Protocol- メディアの情報を記述するための仕様

A から B に Call

B

Web RTC の処理の流れ 3

192.168.0.100 192.168.0.200

Web SocketServer

StunServer

WebServer

SDP

メディア情報が交換される

B から A にAnwer

A B

Web RTC の処理の流れ 4

192.168.0.100 192.168.0.200

Web SocketServer

StunServer

WebServerStun サーバーは送信元のグロバール IP を返却

Global IP A

A は B に自分の Global IP（ + ポート） を通知するA B

Web RTC の処理の流れ 5

192.168.0.100 192.168.0.200

Web SocketServer

StunServer

WebServer

Global IP B

A BB は A に自分の Global IP（ + ポート） を通知する

Web RTC の処理の流れ 6

192.168.0.100 192.168.0.200

Web SocketServer

StunServer

WebServer

Global IP BGlobal IP A

音声、ビデオ（ RTP/RTCP)

NAT は Stun サーバーとの通信と同じポートにパケットが来るため同じ送信元にパケットを渡すA B

まぁなんとなく分かったけど

結構いろいろ大変ですね。。。

安心して下さい

Web RTC のサービス使えば簡単です

http://nttcom.github.io/skyway/

ライブラリ使えば簡単

https://nttcom.github.io/skyway/docs/

デモ

1. Sky Server に接続

2. Server から Peer ID が返却される

①

②

3. 相手の Peer ID を指定して Call自分のメディアストリームを指定

①

②

③

4. 受信すると Answer でストリームを返信④

①

②

③

④

⑤

⑥

5. ストリームを受信

6. ストリームを受信

まとめ

• Skyway 使うと手軽に簡単に Web RTC が作れます

• Web RTC はメディアデータ、テキスト、バイナリが P2P 送受信できるので、様々な用途に応用可能

• ちょーシンプルなサンプルコード以下に置いてます– https://github.com/yokobonbon/web-rtc-sample

ありがとうございました