Recommended
More Related Content
What's hot
What's hot (20)
Similar to WebSocket / WebRTCの技術紹介
Similar to WebSocket / WebRTCの技術紹介 (20)
Recently uploaded
Recently uploaded (11)
WebSocket / WebRTCの技術紹介
- 11. HTTPの欠点 1. リソース（URI）単位でしか要求・取得ができ ない • 100リソースあったら、100回リクエストとレスポンス を繰り返す 2. 要求をクライアントからしか送れない • 素の方法ではサーバからPUSHできない 3. HTTPヘッダが大きい • 小さいデータを送ると、HTTPヘッダが相対的に大きい 6
- 18. で、新しい仕様 1. リソース（URI）単位でしか要求・取得ができ ない 2. 要求をクライアントからしか送れない 3. HTTPヘッダが大きい 10
- 19. で、新しい仕様 1. リソース（URI）単位でしか要求・取得ができ ない SPDY HTTP 2.0（まだdraft※） 2. 要求をクライアントからしか送れない 3. HTTPヘッダが大きい ※ 2014/02/13版 http://tools.ietf.org/html/draft-ietf-httpbis-http2-10 10
- 20. で、新しい仕様 1. リソース（URI）単位でしか要求・取得ができ ない SPDY HTTP 2.0（まだdraft※） 2. 要求をクライアントからしか送れない WebSocket 3. HTTPヘッダが大きい ※ 2014/02/13版 http://tools.ietf.org/html/draft-ietf-httpbis-http2-10 10
- 21. で、新しい仕様 1. リソース（URI）単位でしか要求・取得ができ ない SPDY HTTP 2.0（まだdraft※） 2. 要求をクライアントからしか送れない WebSocket 3. HTTPヘッダが大きい SPDY HTTP 2.0（ヘッダサイズ圧縮） WebSocket（HTTPを使わない） ※ 2014/02/13版 http://tools.ietf.org/html/draft-ietf-httpbis-http2-10 10
- 22. 改めてWebSocket 11
- 32. WebSocketの標準化状況 • WebSocketプロトコル（@IETF、RFC6455） • • 通信規格側の仕様 • • Proposed Standard http://tools.ietf.org/html/rfc6455 WebSocket API（@W3C） • Candidate Recommendation • Web API側（JavaScriptから使う側）の仕様 • http://www.w3.org/TR/websockets/ 18
- 45. WebSocketのフレームサイズ 4 byte フラグ＋基本ペイロード長 (2 byte) 拡張ペイロード長 (0 or 2 or 8 byte) Masking-key (0 or 4 byte) ! 合計 最小2 byte∼最大14 byte ペイロードデータ（データ格納部） ∼8 EiB 24
- 46. 一方、HTTPレスポンスヘッダ Accept-Ranges:bytes Age:243815 Content-Length:371 Content-Type:text/css Date:Thu, 13 Feb 2014 07:14:14 GMT ETag:"a7ac8-173-4a66f8ada8500" Last-Modified:Fri, 24 Jun 2011 06:45:08 GMT Server:Apache … 25
- 47. 一方、HTTPレスポンスヘッダ Accept-Ranges:bytes Age:243815 ここだけで約20 byte Content-Length:371 Content-Type:text/css Date:Thu, 13 Feb 2014 07:14:14 GMT ETag:"a7ac8-173-4a66f8ada8500" Last-Modified:Fri, 24 Jun 2011 06:45:08 GMT Server:Apache … 25
- 48. 一方、HTTPレスポンスヘッダ Accept-Ranges:bytes Age:243815 ここだけで約20 byte Content-Length:371 Content-Type:text/css Date:Thu, 13 Feb 2014 07:14:14 GMT ETag:"a7ac8-173-4a66f8ada8500" Last-Modified:Fri, 24 Jun 2011 06:45:08 GMT Server:Apache … 上記で約200 byte （一般に数百 byteのオーダー） 25
- 49. HTTPとWebSocketの通信量 • 以下の仮定を置いて比較 • HTTPはヘッダ長は200 byte • WebSocketはマスクあり（4 byteの Masking-keyあり） 26
- 50. 本文が10 byteの場合 • HTTP • 200(byte) + 10(byte) = 210(byte) ! • WebSocket • 基本ペイロード長の範囲に収まる • 6(byte) + 10(byte) = 16(byte) 27
- 51. 本文が10 byteの場合 • HTTP • 200(byte) + 10(byte) = 210(byte) ! • WebSocket • 基本ペイロード長の範囲に収まる • 圧倒的な差 6(byte) + 10(byte) = 16(byte) 27
- 52. 本文が1024 byteの場合 • HTTP • 200(byte) + 1024(byte) = 1224(byte) ! • WebSocket • 拡張ペイロード長で+2 byte • 8(byte) + 1024(byte) = 1032(byte) 28
- 53. 本文が1024 byteの場合 • HTTP • 200(byte) + 1024(byte) = 1224(byte) ! • WebSocket これでも差が大きい • 拡張ペイロード長で+2 byte • 8(byte) + 1024(byte) = 1032(byte) 28
- 56. PUSH方式の変遷 31
- 59. PUSH方式の変遷 ポーリング Comet（※） Server Sent Events ※ Comet: Ajax＋ロングポーリングによるサーバPUSHの総称 31
- 60. PUSH方式の変遷 ポーリング Comet（※） Server Sent Events WebSocket ※ Comet: Ajax＋ロングポーリングによるサーバPUSHの総称 31
- 65. ポーリングによるPUSH • クライアント契機でHTMLやXML/jsonを取得 • 疑似PUSH Ajax 画面を更新 クライアント サーバ … HTTPリクエスト HTTPレスポンス 32
- 75. Server Sent Eventsによる PUSH • Cometを洗練させたWeb標準（W3C CR） • 本格的なPUSH クライアント サーバ HTTPリクエスト HTTPレスポンス 34
- 76. Server Sent Eventsによる PUSH • Cometを洗練させたWeb標準（W3C CR） • 本格的なPUSH クライアント サーバ HTTPリクエスト HTTPレスポンス 34
- 77. Server Sent Eventsによる PUSH • Cometを洗練させたWeb標準（W3C CR） • 本格的なPUSH クライアント データ発生のたびに 送信する サーバ HTTPリクエスト HTTPレスポンス 34
- 78. Server Sent Eventsによる PUSH • Cometを洗練させたWeb標準（W3C CR） • 本格的なPUSH データ発生のたびに 送信する クライアント サーバ 分割（chunked）データ扱い HTTPリクエスト HTTPレスポンス 34
- 79. Server Sent Eventsによる PUSH • Cometを洗練させたWeb標準（W3C CR） • 本格的なPUSH データ発生のたびに 送信する 画面を更新 クライアント サーバ 分割（chunked）データ扱い HTTPリクエスト HTTPレスポンス 34
- 80. Server Sent Eventsによる PUSH • Cometを洗練させたWeb標準（W3C CR） • 本格的なPUSH データ発生のたびに 送信する 画面を更新 クライアント サーバ 分割（chunked）データ扱い クローズしていないのでさらに送れる HTTPリクエスト HTTPレスポンス 34
- 81. Server Sent Eventsによる PUSH • Cometを洗練させたWeb標準（W3C CR） • 本格的なPUSH データ発生のたびに 送信する 画面を更新 クライアント サーバ 分割（chunked）データ扱い クローズしていないのでさらに送れる HTTPリクエスト HTTPレスポンス 34
- 91. ブラウザのWeb Socket API 対応状況 ブラウザ名 対応状況 Internet Explorer 10以降 Chrome 13以降 Firefox 11以降 Opera 12.10以降 iOS (UIWebView) 6.0以降 iOS (Safari Mobile) 同上 Android (WebView) 4.4 Android (Chrome) 18以降 • PCの現行ブラウザは基本的に使用可能（但しIE9以下は ） • モバイルはAndroidのWebView（アプリ組み込み用エンジン）が難 • なおWebSocketクライアントが必ずしもブラウザである必要はない 37
- 93. 続いてWebRTC 39
- 98. WebRTCの標準化状況 • WebRTC （@W3C） • • PeerConnectionとDataChannel、DTMFなども • • Working Draft http://www.w3.org/TR/webrtc/ Media Capture and Streams（@W3C） • • ブラウザから動画（カメラ）や音声（マイク）へアクセスするための仕様 • • Working Draft http://www.w3.org/TR/mediacapture-streams/ RTCWEB（@IETF） • draft • プロトコルやコーデックの取り決め等々 • https://tools.ietf.org/wg/rtcweb/ 以下の各ドラフト 44
- 101. WebRTCを構成する仕様 • PeerConnection • DataChannel • MediaStream 46
- 105. PeerConnectionの流れ 50
- 110. STUN • STUN＝Simple Traversal of UDP through NAT • またの名をUDPホールパンチング • NATの内側にあるノードからグローバ ルのIP/Port（トランスポートアドレ ス）を確認して「穴」を開ける仕組み 52
- 120. シンメトリックNAT vs TURN Webアプリケーションサーバ TURNサーバ向けの IP/Port クライアントB TURNサーバ クライアントA TURNサーバ経由でAとBを接続 58
- 122. TURN • Traversal Using Relay NAT • NATの内側にあるノードに対して透過 的な経路（トンネル）を提供する • すべての通信をパススルーするので、 ノードが増えるほどTURNサーバの帯 域が消費される • STUNサーバに比べて運用コストが高い 59
- 132. 字幕付きボイスチャット • SkyWayのデモアプリの一つ • Web Speech API（※）を組み合わせて、声をテキスト 化して画面に表示 ※ Chromeに実装されている、音声認識のAPI 67
- 133. 字幕付きボイスチャット • SkyWayのデモアプリの一つ • Web Speech API（※）を組み合わせて、声をテキスト 化して画面に表示 ※ Chromeに実装されている、音声認識のAPI 音声チャットの内容がその場でテ キスト化されて画面に表示される 67
- 136. PowerMedia XMS XMS Highlights: • 既存オペレーターサービスのWebRTCへの置換 • ユーザーはスマホから電話発信及び受信 • オペレーションコストの削減 • Dialogic JS APIを利用してApp. Serverと接続 • WebRTC JS APIの簡便さ • SIP/WebRTCのインターワーキング • WebRTC通話 • Application Server Web Portal SIP Media Ctrl Signaling over WebSocket Dialogic WebRTC JS API IP/PSTN Network RTP PowerMedia XMS SRTP Agent SIPクライアントとWebRTCクライアントを相互接続 音声／動画コーデックを変換 http://ngw.ntt-at.co.jp/product/media/products/PowerMedia_XMS.html 70
- 137. ブラウザのWebRTC対応状況 ブラウザ名 PeerConnection DataChannel MediaStream Internet Explorer 同左 同左 Chrome ○/prefixed（※） 同左 同左 Firefox ○/prefixed（※） 同左 同左 Opera ○/prefixed（※） 同左 同左 iOS (UIWebView) 同左 同左 iOS (Mobile Safari) 同左 同左 Android (WebView) 同左 同左 同左 同左 Android (Chrome) ○/prefixed（※） • Chrome、Firefox、Operaが対応 • APIが流動的なため、各ブラウザともベンダプレフィックス付き • 2014/02/24現在 実装が過渡的なため、本資料ではバージョン番号を明記しない 71
- 139. NTTアドバンステクノロジ株式会社 情報機器テクノロジセンタ 〒212-0014 神奈川県川崎市幸区大宮町1310 ミューザ川崎セントラルタワー TEL : 044-589-6094 FAX : 044-541-1381 http://www.ntt-at.co.jp/