最新Web 通信系API総まくり！WebRTC, Streams, Push api etc.
?
29 likes?11,370 views
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 “Leading the way to W3C TPAC 2015” Speaker: NTT Communications 小松健作
- 2. My pro?le ? Name :=> ? 小松健作 (@komasshu) ? Company :=> ? NTT Communications ? Position :=> ? Webアプリケーションエバンジェリスト ? かえるさん（かっぱはピンと来なかったのでw ? Activities :=> ? WebRTC CPaaS SkyWayの中の人 ? Google Developer Expert (HTML5)
- 3. 唐突ですが
- 6. 本题
- 7. Today’s Main Idea ? Introduce communication APIs in open web standardization, past and future.
- 8. past
- 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などでは pre?ightが飛ぶとか） http://www.w3.org/TR/cors/
- 14. Issue2: Stream処理 ? Server-Sent Events ? HTTPのchunked transfer encodingを処理するAPI ? メモリスタックすることなく、Stream処理が可能 に ? formatが規定されており、textメッセージにしか 使えないのが難点 http://www.w3.org/TR/eventsource/
- 15. as term “HTML5” remarkable… (since 2009)
- 17. What’s WebSocket? ? 双方向通信を可能にするWebプロトコル ? TCPライクな通信を HTTPレイヤの上で可能に ? Chatとかで、ポーリングの呪縛から解放される
- 18. WebSocketの使い所 ? 確かに便利。特に上り方向通信の?exibilityは秀逸 ? Pushにフォーカスをあてたときに、本当にHTTPより 優れているかは疑問 ? HTTPが優れている点 ? cookie認証とか、過去の資産との親和性 ? ロバスト性が得られやすい
- 19. （個人見解） WebSocketのメインユースケース ? ブラウザでのユースケースは限定的 ? IoTが熱い！ ? センサーデータのuploadとか ? MQTT over WebSocketとか ? Webの適用範囲はブラウザだけではない
- 20. future
- 22. What’s WebRTC? ? Webでテレビ電話を可能に ? P2Pで送るので、サーバー負荷やレスポンス性に Good ? Audio/Videoだけじゃなく、データもP2P可能 ? ロボット制御なんかが期待されている
- 24. Demo: WebRTC on Raspberry PI
- 27. 見えてきた課題 ? WebRTCは、1対1のテレビ電話にフォーカスがおか れていた ? SDP Offer/Answer modelの制限 ? 様々なユースケースで問題点が見えてきた
- 28. どんな問題点？ ? 非対称のストリーミングができない ? callerは音声、calleeは映像＋音声とか ? 監視カメラになじまない ? callerは、そもそも映像音声を送らない ? 多人数接続サービスで融通が利かない ? Full-meshからMCU/SFUへのスイッチ ? マルチトラックで融通が利かない ? SFUとかVRとか https://www.oculus.com/
- 30. ORTC ? http://ortc.org/wp-content/uploads/2014/08/ortc.html ORTC = Object Real-Time Communication
- 31. ORTCと（現行の） WebRTCの違い ? RTCをもっと low layer で制御可能に ? SDP Offer/Answer制限からの解放 ? Media Trackの出し入れや、経路変更を柔軟に ? インターフェースを使いやすく ? なぞの呪文（SDP）からの解放
- 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 との違い Trusted Agent JavaScript NSD discovery select communicate protocol Presentation API communicate discovery select protocol for Privacy safe
- 37. What’s Beacon API? ? window.onunloadの時に、サーバーになにかしらの 情報を送信するのに便利なAPI ? window closeの際に、非同期HTTP通信を確実に実 行することを保証する ? 統計情報を正確に収集するのに超便利
- 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 ? better XHR と考えるのが分かりやすい ? 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) { return consume(res.body.getReader() /*readable stream */); }); var consume = function(reader) { function rec() { return reader.read().then(function(r) { // stream処理 return rec(); }); } return rec(); }
- 44. What’s Push API? ? WebブラウザでPush Noti?cationが実現出来る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 of push noti?cation http://qiita.com/tomoyukilabs/items/8fffb4280c1914b6aa3d
- 46. Service Worker ちょっとだけ Web app service worker Server Browser ブラウザ内のproxyと考えると分 かりやすい ?オフライン ?バックグラウンド同期 ?Push Noti?cation
- 47. Example ?ow of events
- 48. Appendix
- 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. Summary ? past ? XMLHttpRequest ? Server-Sent Events ? WebSocket ? future ? WebRTC/ORTC ? Presentation API ? Fetch API and Streams API ? Push API