1. WebRTC再び
Shigeyuki Takeuchi@13/12/20 Xtone勉強会

2. WebRTCって？
WebRTC(Web Real-Time Communications)は
W3Cが提唱するブラウザでリアルタイムコミュニ
ケーションを可能にするAPI群で、ビデオ・ボイスで
のチャットなどを提供します。
現在はまだドラフト段階です
http://www.webrtc.org/

3. サポートするブラウザが増えました
※2013/12現在（http://caniuse.com/stream）
Androidでも使えた・AppleとMSは実装に消極的

4. iOSは・・・
Safariは非対応なので、Chromeでも試したけれど
も・・・
flagsがない orz

5. 接続フロー
STUN
サーバ
1.グローバルIPとポートを取得
ブラウザA
ブラウザB
3.P2Pで直接接続
2.グローバルIPとポートなどの接
続情報を交換
アプリ
サーバ

6. API構成
● getUserMedia
カメラやマイクから入力された映像・音声をWebブラウザへ取り込む
● RTCPeerConnection
ブラウザ間でコネクションを貼り、映像・音声のストリームを送受信
● RTCDataChannel
ブラウザ間でバイナリデータを送受信
● RTCIceCandidate
NAT超えのための仕組みを提供

7. 実際のコードは・・・
ブラウザA(caller)とブラウザB(callee)が通信すると
1.
2.
3.
4.
5.
6.
7.
[ブラウザA]アプリサーバよりhtmlやJavaScriptを取得します。
[ブラウザA]getUserMediaでマイクやカメラのストリームを取得します。
表示する場合はVideoやAudioにアタッチします。
[ブラウザA]RTCPeerConnectionで接続要求をします。このとき、利用する
ICE（STUN/TURNサーバ）の設定やストリーム、データチャンネル用のイベ
ントハンドラを追加します。
[ブラウザA]RTCPeerConnectionで接続情報を取得したらアプリサーバへ接続依頼オファーを送信します。
[ブラウザB]Aと同様に1〜3を行います。
[ブラウザB]アプリサーバからオファーに受信する。通信許可アンサーを
RTCSessionDescriptionで作成し、アプリサーバへ送信します。
[ブラウザA]アンサーを受信します。ブラウザ
AとBが直接接続を開始します。
複雑！！
しかもまだドラフトなのでブラウザごとに処理が若干違う

8. そこでライブラリ
● webRTC.io
https://github.com/webRTC/webRTC.io
● SimpleWebRTC
https://github.com/HenrikJoreteg/SimpleWebRTC
● PeerJS
http://peerjs.com

9. デモ
ソースコード
https://github.com/takeshig/webrtc_sample