Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.

8,864 views

Published on

TPAC 2015 プレイベント "Leading the way to W3C TPAC 2015" でのプレゼン資料(通信系のWeb API 最新事情:ORTCとかFetchとかPushとか)

Published in: Technology
  • Be the first to comment

最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.

  1. 1. 最新Web通信系API 総まくり 24th, Aug, 2015 “Leading the way to W3C TPAC 2015” Speaker: NTT Communications 小松健作
  2. 2. My profile • Name :=> • 小松健作 (@komasshu) • Company :=> • NTT Communications • Position :=> • Webアプリケーションエバンジェリスト • かえるさん(かっぱはピンと来なかったのでw • Activities :=> • WebRTC CPaaS SkyWayの中の人 • Google Developer Expert (HTML5)
  3. 3. 唐突ですが
  4. 4. WebRTCも(国内でも)だいぶ 使われるようになってきました http://www.bestiebox.net/ http://gacco.org/
  5. 5. とゆう、最新Webと ビジネスとの お話でしたw
  6. 6. 本題
  7. 7. Today’s Main Idea • Introduce communication APIs in open web standardization, past and future.
  8. 8. past
  9. 9. beginning…
  10. 10. XMLHttpRequest (since 25th, Feb, 2008) http://www.w3.org/TR/XMLHttpRequest/
  11. 11. What’s XMLHttpRequest? • HTTP を JS から利用可能にするAPI • Ajaxの基幹API • 最初はsame origin policyが適用されていた
  12. 12. 当初のXHRの課題 • Cross Origin 通信ができない • JSONPとかDirty Hackが多用される • Chunkに対して、Stream処理ができない • メモリにスタックしてしまう
  13. 13. Issue1: Cross Origin • CORS • Cross-Origin Resource Sharing • Access-Control-Allow-Originなどでクロスオリジン アクセスをコントロール可能 • RESTに基づいた設計(PUT, DELETEなどでは preflightが飛ぶとか) http://www.w3.org/TR/cors/
  14. 14. Issue2: Stream処理 • Server-Sent Events • HTTPのchunked transfer encodingを処理するAPI • メモリスタックすることなく、Stream処理が可能 に • formatが規定されており、textメッセージにしか 使えないのが難点 http://www.w3.org/TR/eventsource/
  15. 15. as term “HTML5” remarkable… (since 2009)
  16. 16. WebSocket (since 23rd,Apr,2009) http://www.w3.org/TR/websockets/
  17. 17. What’s WebSocket? • 双方向通信を可能にするWebプロトコル • TCPライクな通信を HTTPレイヤの上で可能に • Chatとかで、ポーリングの呪縛から解放される
  18. 18. WebSocketの使い所 • 確かに便利。特に上り方向通信のflexibilityは秀逸 • Pushにフォーカスをあてたときに、本当にHTTPより 優れているかは疑問 • HTTPが優れている点 • cookie認証とか、過去の資産との親和性 • ロバスト性が得られやすい
  19. 19. (個人見解) WebSocketのメインユースケース • ブラウザでのユースケースは限定的 • IoTが熱い! • センサーデータのuploadとか • MQTT over WebSocketとか • Webの適用範囲はブラウザだけではない
  20. 20. future
  21. 21. WebRTC (since 27th,Oct,2011) http://www.w3.org/TR/webrtc/
  22. 22. What’s WebRTC? • Webでテレビ電話を可能に • P2Pで送るので、サーバー負荷やレスポンス性に Good • Audio/Videoだけじゃなく、データもP2P可能 • ロボット制御なんかが期待されている
  23. 23. Robot的なユースケースの例 https://www.youtube.com/watch?v=oO-WjCKX9LY
  24. 24. Demo: WebRTC on Raspberry PI
  25. 25. かるーくアーキテクチャ シグナリング Audio/ Video
  26. 26. 詳しくは明後日 http://eventdots.jp/event/568004
  27. 27. 見えてきた課題 • WebRTCは、1対1のテレビ電話にフォーカスがおか れていた • SDP Offer/Answer modelの制限 • 様々なユースケースで問題点が見えてきた
  28. 28. どんな問題点? • 非対称のストリーミングができない • callerは音声、calleeは映像+音声とか • 監視カメラになじまない • callerは、そもそも映像音声を送らない • 多人数接続サービスで融通が利かない • Full-meshからMCU/SFUへのスイッチ • マルチトラックで融通が利かない • SFUとかVRとか https://www.oculus.com/
  29. 29. WebRTC.next https://www.w3.org/community/ortc/ ORTC
  30. 30. ORTC ? http://ortc.org/wp-content/uploads/2014/08/ortc.html ORTC = Object Real-Time Communication
  31. 31. ORTCと(現行の) WebRTCの違い • RTCをもっと low layer で制御可能に • SDP Offer/Answer制限からの解放 • Media Trackの出し入れや、経路変更を柔軟に • インターフェースを使いやすく • なぞの呪文(SDP)からの解放
  32. 32. Presentation API (Since 17th,Feb,2015) http://www.w3.org/TR/presentation-api/
  33. 33. What’s Presentation API? • ざっくり言うと、airplayやChromecastの機能を標 準化するもの • 1st screen(e.g. TV)と2nd screen(e.g. スマフォ)の 連携を可能にする
  34. 34. 具体的には 1. discovery(SSDP, mDNSなど) 2. select screen device 3. communicate (HTTP, WebSocket, …)
  35. 35. Network Service Discovery との違い Trusted Agent JavaScript NSD discovery select communicate protocol Presentation API communicate discovery select protocol for Privacy safe
  36. 36. Beacon API (since 29th,Oct,2013) http://www.w3.org/TR/beacon/
  37. 37. What’s Beacon API? • window.onunloadの時に、サーバーになにかしらの 情報を送信するのに便利なAPI • window closeの際に、非同期HTTP通信を確実に実 行することを保証する • 統計情報を正確に収集するのに超便利
  38. 38. Fetch https://fetch.spec.whatwg.org/
  39. 39. What’s Fetch? • “Fetch”という動作をきちんと整理 • FetchするAPIが乱立していて、かつ整理できてない • img and script elements • CSS’s cursor, list-style-image • navigator.sendBeacon(), self.importScripts() • of course, XHR and CORS • HTTPを使ったFetchの動作仕様やCORS仕様をきちんと整理したもの • Fetchを、低レイヤで利用可能とする Fetch APIも
  40. 40. Fetch api • better XHR と考えるのが分かりやすい • service workerで使われる(xhrは利用できない)
  41. 41. 明らかなXHRとの違い Fetch API + Streams API • 任意の HTTP chunked transfer encoding を、 Stream処理できる • 例えば、オレオレLive Streaming over HTTP を 作れる https://streams.spec.whatwg.org/
  42. 42. code snippet fetch(‘/stream’).then(function(res) { return consume(res.body.getReader() /*readable stream */); }); var consume = function(reader) { function rec() { return reader.read().then(function(r) { // stream処理 return rec(); }); } return rec(); }
  43. 43. Push API (Since 18th,Oct,2012) http://www.w3.org/TR/push-api/
  44. 44. What’s Push API? • WebブラウザでPush Notificationが実現出来るAPI • Service Workerと結合したAPIのため、該当Web appを開いてい なくても、Pushが得られる • プロトコルは、IETF(webpush WG)で HTTP/2 server pushをベー スに仕様化が進められているが、これとコンパチブルなセマンティ クスであれば、別のプロトコルを使っても良い • https://www.ietf.org/id/draft-ietf-webpush-protocol-00.txt • 実際、Chromeの実装では GCM が使われている
  45. 45. An example of push notification http://qiita.com/tomoyukilabs/items/8fffb4280c1914b6aa3d
  46. 46. Service Worker ちょっとだけ Web app service worker Server Browser ブラウザ内のproxyと考えると分 かりやすい ・オフライン ・バックグラウンド同期 ・Push Notification
  47. 47. Example flow of events
  48. 48. Appendix
  49. 49. Extensible Web Fetch API WebRTC (ORTC) Streams API Service Worker Push API Beacon API Presentation API3rd party libraries by Developer community web apps / native apps
  50. 50. Summary • past • XMLHttpRequest • Server-Sent Events • WebSocket • future • WebRTC/ORTC • Presentation API • Fetch API and Streams API • Push API
  51. 51. Thank you! @komasshu

×