Download as PDF, PPTX
Uploaded byKensaku Komatsu
最新Web 通信系API総まくり！WebRTC, Streams, Push api etc.
TPAC 2015 プレイベント "Leading the way to W3C TPAC 2015" でのプレゼン資料（通信系のWeb API 最新事情：ORTCとかFetchとかPushとか）
最新Web 通信系API総まくり！WebRTC, Streams, Push api etc.
- 1. 最新Web通信系API 総まくり 24th, Aug, 2015 “Leadingthe way to W3C TPAC 2015” Speaker: NTT Communications 小松健作
- 2. My profile • Name:=> • 小松健作 (@komasshu) • Company :=> • NTT Communications • Position :=> • Webアプリケーションエバンジェリスト • かえるさん（かっぱはピンと来なかったのでw • Activities :=> • WebRTC CPaaS SkyWayの中の人 • Google Developer Expert (HTML5)
- 3.
- 4.
- 5.
- 6.
- 7. Today’s Main Idea •Introduce communication APIs in open web standardization, past and future.
- 8.
- 9.
- 10. XMLHttpRequest (since 25th, Feb,2008) http://www.w3.org/TR/XMLHttpRequest/
- 11. What’s XMLHttpRequest? • HTTPを JS から利用可能にするAPI • Ajaxの基幹API • 最初はsame origin policyが適用されていた
- 12. 当初のXHRの課題 • Cross Origin通信ができない • JSONPとかDirty Hackが多用される • Chunkに対して、Stream処理ができない • メモリにスタックしてしまう
- 13. Issue1: Cross Origin •CORS • Cross-Origin Resource Sharing • Access-Control-Allow-Originなどでクロスオリジン アクセスをコントロール可能 • RESTに基づいた設計（PUT, DELETEなどでは preflightが飛ぶとか） http://www.w3.org/TR/cors/
- 14. Issue2: Stream処理 • Server-SentEvents • HTTPのchunked transfer encodingを処理するAPI • メモリスタックすることなく、Stream処理が可能 に • formatが規定されており、textメッセージにしか 使えないのが難点 http://www.w3.org/TR/eventsource/
- 15.
- 16.
- 17. What’s WebSocket? • 双方向通信を可能にするWebプロトコル •TCPライクな通信を HTTPレイヤの上で可能に • Chatとかで、ポーリングの呪縛から解放される
- 18. WebSocketの使い所 • 確かに便利。特に上り方向通信のflexibilityは秀逸 • Pushにフォーカスをあてたときに、本当にHTTPより 優れているかは疑問 •HTTPが優れている点 • cookie認証とか、過去の資産との親和性 • ロバスト性が得られやすい
- 19. （個人見解） WebSocketのメインユースケース • ブラウザでのユースケースは限定的 • IoTが熱い！ •センサーデータのuploadとか • MQTT over WebSocketとか • Webの適用範囲はブラウザだけではない
- 20.
- 21.
- 22. What’s WebRTC? • Webでテレビ電話を可能に •P2Pで送るので、サーバー負荷やレスポンス性に Good • Audio/Videoだけじゃなく、データもP2P可能 • ロボット制御なんかが期待されている
- 23.
- 24.
- 25.
- 26.
- 27. 見えてきた課題 • WebRTCは、1対1のテレビ電話にフォーカスがおか れていた • SDPOffer/Answer modelの制限 • 様々なユースケースで問題点が見えてきた
- 28. どんな問題点？ • 非対称のストリーミングができない • callerは音声、calleeは映像＋音声とか •監視カメラになじまない • callerは、そもそも映像音声を送らない • 多人数接続サービスで融通が利かない • Full-meshからMCU/SFUへのスイッチ • マルチトラックで融通が利かない • SFUとかVRとか https://www.oculus.com/
- 29.
- 30. ORTC ? http://ortc.org/wp-content/uploads/2014/08/ortc.html ORTC =Object Real-Time Communication
- 31. ORTCと（現行の） WebRTCの違い • RTCをもっと lowlayer で制御可能に • SDP Offer/Answer制限からの解放 • Media Trackの出し入れや、経路変更を柔軟に • インターフェースを使いやすく • なぞの呪文（SDP）からの解放
- 32.
- 33. What’s Presentation API? •ざっくり言うと、airplayやChromecastの機能を標 準化するもの • 1st screen(e.g. TV)と2nd screen(e.g. スマフォ)の 連携を可能にする
- 34. 具体的には 1. discovery(SSDP, mDNSなど) 2.select screen device 3. communicate (HTTP, WebSocket, …)
- 35. Network Service Discovery との違い TrustedAgent JavaScript NSD discovery select communicate protocol Presentation API communicate discovery select protocol for Privacy safe
- 36.
- 37. What’s Beacon API? •window.onunloadの時に、サーバーになにかしらの 情報を送信するのに便利なAPI • window closeの際に、非同期HTTP通信を確実に実 行することを保証する • 統計情報を正確に収集するのに超便利
- 38.
- 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. Fetch api • betterXHR と考えるのが分かりやすい • service workerで使われる（xhrは利用できない）
- 41. 明らかなXHRとの違い Fetch API +Streams API • 任意の HTTP chunked transfer encoding を、 Stream処理できる • 例えば、オレオレLive Streaming over HTTP を 作れる https://streams.spec.whatwg.org/
- 42. code snippet fetch(‘/stream’).then(function(res) { returnconsume(res.body.getReader() /*readable stream */); }); var consume = function(reader) { function rec() { return reader.read().then(function(r) { // stream処理 return rec(); }); } return rec(); }
- 43.
- 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. An example ofpush notification http://qiita.com/tomoyukilabs/items/8fffb4280c1914b6aa3d
- 46.
- 47. Example flow ofevents
- 48.
- 49. Extensible Web Fetch API WebRTC (ORTC) StreamsAPI Service Worker Push API Beacon API Presentation API3rd party libraries by Developer community web apps / native apps
- 50. Summary • past • XMLHttpRequest •Server-Sent Events • WebSocket • future • WebRTC/ORTC • Presentation API • Fetch API and Streams API • Push API
- 51.