WebRTC入門+最新動向

2. Copyright © NTT Communications Corporation. All right reserved. ⾃自⼰己紹介 / ⼤大津⾕谷亮亮祐（おおつやりょうすけ） n  NTTコミュニケーションズの HTML5チームのリーダ n  WebRTCプラットフォーム “SkyWay”のプロダクトマネージャ n  WebRTC Conference Japan 幹事 n  神奈奈川県葉葉⼭山町在住趣味は海と畑 2

11. Copyright © NTT Communications Corporation. All right reserved. Webエンジニア向けの説明 n  ブラウザ間で直接通信ができる n  ストリーミングデータを扱える n  カメラとマイクを使える 11 従来のWeb WebRTC カメラやマイクを利利⽤用可ストリーミングデータを扱えるブラウザ間の直接通信サーバ⇔クライアント間の通信リクエストとレスポンスの繰り返しカメラやマイクの利利⽤用不不可サーバサーバ

12. Copyright © NTT Communications Corporation. All right reserved. エンジニア向けの説明 1.  ⾳音声、映像、データのリアルタイム通信のオープン標準 l  従来のサービス(LINE、Skype等)は独⾃自技術でできていた。 WebRTCはオープン標準、ライセンス使⽤用料料が不不要。 l  中⾝身は3つ。 ①⾳音声と映像の形式(コーデック) ②ネットワーク機器(NAT等)を越えて直接通信する⼿手順 ③暗号化、到達・順序保証、流流量量・輻輻輳制御を実現する　プロトコル 2.  ブラウザとネイティブアプリの両⽅方で利利⽤用できる l  WebRTC対応ブラウザにURLを⼊入⼒力力するだけで、WebRTCを利利⽤用したサービスを利利⽤用できる。 l  オープンソースのC++のコードを利利⽤用しコンパイルすれば、ネイティブアプリにWebRTC機能を組み込むこともできる。 12

13. Copyright © NTT Communications Corporation. All right reserved. マーケティング的な説明 n  コミュニケーションアプリが作れる n  家電、IoT分野で、リアルタイム通信が必要な場合に使える(右の写真) n  インストール不不要だから、サポートコストの削減やITリテラシの低い層の利利⽤用が可能 n  アプリやWebに組み込めるので、⼀一貫性のあるユーザ体験が実現できる (例例：Skype英会話に適⽤用) n  電話との連携 Chromecast Withings Home

14. Copyright © NTT Communications Corporation. All right reserved. WebRTCの対応状況 14 *1: プラグインで対応可 *2: 2015年年7⽉月発売のWindows 10で⼀一部サポート *3: Ericsson、Temasys等が推進する、オープンソースプロジェクト “WebRTC in WebKit” により、開発がほぼ完了了 OS アプリ Windows Mac Android iOS ネイティブアプリ ✔ ✔ ✔ ✔ Chrome ✔ ✔ ✔ ✘ Firefox ✔ ✔ ✔ IE ✘*1 Edge ✘*2 Safari ✘*1*3 ✘*3

16. Copyright © NTT Communications Corporation. All right reserved. テレプレゼンス・ロボット n  ビデオ会議機能を備えた遠隔操作ロボット 16 Romo by Romotive www.romotive.jp 15,660 Double by Double Robotics www.doublerobotics.com $2,499

17. Copyright © NTT Communications Corporation. All right reserved. イベント盛り上げ＆質疑応答 n  2000⼈人規模のカンファレンス(HTML Conference 2013)会場でスマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰示 17 SkyWay SkyWayでシグナリングカメラの映像を WebRTCで送信 HTML5 JUMBOTRON jt.skyway.io

18. Copyright © NTT Communications Corporation. All right reserved. イベント盛り上げ＆質疑応答 n  2000⼈人規模のカンファレンス(HTML Conference 2013)会場でスマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰示 18 SkyWay SkyWayでシグナリングカメラの映像を WebRTCで送信 HTML5 JUMBOTRON jt.skyway.io Windows, Mac, Android の Chrome, Firefox でアクセス is.gd/html5jt#0730

20. Copyright © NTT Communications Corporation. All right reserved. NAT越え 2020 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli ICE •  NAT越えの⼿手順 STUN •  ⾃自分のグローバルIP、ポート番号を知る •  UDPホールパンチングという仕組みでNATを越える TURN •  どうしてもNATを越えられない場合はサーバで中継する •  8〜～9%はTURNが必要 TURN サーバ

24. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 24 NAT STUN NAT IP:111.111.111.111 PORT:10000番 IP:222.222.222.222 PORT:20000番互いのIPとPORTを何らかの⼿手段で交換（シグナリング） ※後述するNAT Typeにより挙動が変わります

25. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 25 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番アクセスさせてー！だめー。⽳穴開いた！ ※後述するNAT Typeにより挙動が変わります

26. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 26 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番通れる！！アクセスさせてー。⽳穴開いた！ ※後述するNAT Typeにより挙動が変わります

28. Copyright © NTT Communications Corporation. All right reserved. TURNの使いどころ 28 どうしてもNATに⽳穴があかない場合はTURNを利利⽤用する互いのNAT Type フルコーン制限付きフルコーンポート制限付きフルコーンシンメトリックフルコーン STUN STUN STUN STUN 制限付きフルコーン STUN STUN STUN TURN ポート制限付きフルコーン STUN STUN STUN TURN シンメトリック STUN TURN TURN TURN ※NAT Typeは厳密に細分化すると９パターンあります。よりセキアよりセキュア ※もっと詳しく知りたい⽅方はこちら。 http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc

29. Copyright © NTT Communications Corporation. All right reserved. TURNリレー 29 シンメトリックNAT TURN シンメトリックNAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 TURNサーバを中継する（中継するだけなので通信の中⾝身はわからない） IP:11.11.11.11 PORT:443 IP:11.11.11.11 PORT:443 TCPで通信可能TCPで通信可能 FW FW TCP443か、怪しくないな！クライアントはP2Pのつもり

30. Copyright © NTT Communications Corporation. All right reserved. TURNを使っても通らない場合がある 30 シンメトリックNAT TURN シンメトリックNAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 IP:11.11.11.11 PORT:443 IP:11.11.11.11 PORT:443 Proxy Proxy おいおい、中⾝身が怪しいぞ！例例えば、マイン・ザ・ミドル可能なProxyが存在するおいおい、中⾝身が怪しいぞ！

31. Copyright © NTT Communications Corporation. All right reserved. シグナリング 31 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli •  NAT越えに必要な情報を交換する仕組み •  プロトコルは定められていない SIP over WebSocket/XHR, XMPP over WebSocket/XHR, 独⾃自 over WebSocket/XHR等 •  情報の記述⽅方法は、SDPを⽤用いると定められている

32. Copyright © NTT Communications Corporation. All right reserved. プロトコル・スタック n  UDPの上で温故知新 32 chimera.labs.oreilly.com/books/1230000000545/ch18.html#_̲real_̲time_̲network_̲transports シグナリング映像、⾳音声データ

34. Copyright © NTT Communications Corporation. All right reserved. NAT NAT SkyWay 34 n  NTT Comが提供するWebRTCアプリ開発者向けプラットフォーム。 n  2013年年12⽉月5⽇日に提供開始 n  2000以上のアプリで利利⽤用 STUN API Signaling API STUN API ライブラリライブラリ開発者はPeer to Peer通信のプログラミングに専念念できる SkyWayがシグナリングを担うので、

35. Copyright © NTT Communications Corporation. All right reserved. SkyWayのサンプルコード n  シンプルなビデオチャットならわずか⼗十数⾏行行で記述できる。 35 1. シグナリングサーバに接続する 4. (受信側の処理理) 相⼿手からビデオが送られてきたら、⾃自分のビデオを相⼿手に送る 3. (発信側の処理理) ブラウザの発信ボタンがクリックされたら、⾃自分のビデオを相⼿手に送る 2. カメラとマイクを起動し、⾃自分のビデオを表⽰示する 5. 相⼿手のビデオを表⽰示する github.com/nttcom/peerjs/tree/master/examples/videochat

36. Copyright © NTT Communications Corporation. All right reserved. SkyWayの機能⼀一覧業界をリードするWebRTCプラットフォーム 36 分類機能説明提供時期 API Basic シグナリング WebSocketとHTTPを併⽤用しP2P接続の確⽴立立を仲介 2013/12 NAT 越え STUN フルコーンNATに対し、UDPホールパンチングで NAT越えを実現 2013/12 Pro TURN UDPホールパンチングが不不可能な際に使⽤用するリレーサーバ 2015/01 SDK/ ライブラリ Basic JavaScript SDK ブラウザで動作するWebアプリ向けSDK 2013/01 iOS/Android SDK iOS/Androidで動作するのネイティブアプリ向け SDK 2015/05 IE/Safariプラグイン対応 WebRTC未対応のIE/SafariでもSkyWayを利利⽤用可能にするTemasys社提供のブラウザプラグインに対応 2015/06 Pro ⾳音声認識識ライブラリ⾳音声認識識(Speech-to-Text)を実現 2015/06 多⼈人数接続ライブラリ多⼈人数フルメッシュ接続のビデオ会議アプリを容易易に開発可能 2015/06 画⾯面共有ライブラリ画⾯面共有機能を提供するライブラリおよびブラウザ拡張機能 2015/06 ポータル Basic API設定変更更 APIキーの追加/削除、利利⽤用可能なドメインの追加/変更更、TURN利利⽤用申請 2014/10 セキュリティ⽂文書 WebRTCのセキュリティ解説⽂文書をオープンソース公開し企業でのWebRTC利利⽤用を促進 2015/06

46. Copyright © NTT Communications Corporation. All right reserved. ORTC / Object RTCとは n  現⾏行行のWebRTCを改善すべく提案されたもう⼀一つのRTC API n  W3CのORTC(Object Real-‐‑‒time Communications) Community Groupで議論論 46 www.slideshare.net/yusukenaka52/webrtcortc-50153479

WebRTC入門+最新動向

Ryosuke Otsuya

WebRTC入門+最新動向