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

1. 最新Web通信系API
総まくり
24th, Aug, 2015
“Leading the 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. WebRTCも（国内でも）だいぶ
使われるようになってきました
http://www.bestiebox.net/ http://gacco.org/

5. とゆう、最新Webと
ビジネスとの
お話でしたw

6. 本題

7. Today’s Main Idea
• Introduce communication APIs in open web
standardization, past and future.

8. past

9. beginning…

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-Sent Events
• HTTPのchunked transfer encodingを処理するAPI
• メモリスタックすることなく、Stream処理が可能
に
• formatが規定されており、textメッセージにしか
使えないのが難点
http://www.w3.org/TR/eventsource/

15. as term “HTML5”
remarkable…
(since 2009)

16. WebSocket
(since 23rd,Apr,2009)
http://www.w3.org/TR/websockets/

17. What’s WebSocket?
• 双方向通信を可能にするWebプロトコル
• TCPライクな通信を HTTPレイヤの上で可能に
• Chatとかで、ポーリングの呪縛から解放される

18. WebSocketの使い所
• 確かに便利。特に上り方向通信のflexibilityは秀逸
• Pushにフォーカスをあてたときに、本当にHTTPより
優れているかは疑問
• HTTPが優れている点
• cookie認証とか、過去の資産との親和性
• ロバスト性が得られやすい

19. （個人見解）
WebSocketのメインユースケース
• ブラウザでのユースケースは限定的
• IoTが熱い！
• センサーデータのuploadとか
• MQTT over WebSocketとか
• Webの適用範囲はブラウザだけではない

20. future

21. WebRTC
(since 27th,Oct,2011)
http://www.w3.org/TR/webrtc/

22. What’s WebRTC?
• Webでテレビ電話を可能に
• P2Pで送るので、サーバー負荷やレスポンス性に
Good
• Audio/Videoだけじゃなく、データもP2P可能
• ロボット制御なんかが期待されている

23. Robot的なユースケースの例
https://www.youtube.com/watch?v=oO-WjCKX9LY

24. Demo: WebRTC on
Raspberry PI

25. かるーくアーキテクチャ
シグナリング
Audio/
Video

26. 詳しくは明後日
http://eventdots.jp/event/568004

27. 見えてきた課題
• WebRTCは、1対1のテレビ電話にフォーカスがおか
れていた
• SDP Offer/Answer modelの制限
• 様々なユースケースで問題点が見えてきた

28. どんな問題点？
• 非対称のストリーミングができない
• callerは音声、calleeは映像＋音声とか
• 監視カメラになじまない
• callerは、そもそも映像音声を送らない
• 多人数接続サービスで融通が利かない
• Full-meshからMCU/SFUへのスイッチ
• マルチトラックで融通が利かない
• SFUとかVRとか
https://www.oculus.com/

29. WebRTC.next
https://www.w3.org/community/ortc/
ORTC

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）からの解放

32. Presentation API
(Since 17th,Feb,2015)
http://www.w3.org/TR/presentation-api/

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

36. Beacon API
(since 29th,Oct,2013)
http://www.w3.org/TR/beacon/

37. What’s Beacon API?
• window.onunloadの時に、サーバーになにかしらの
情報を送信するのに便利なAPI
• window closeの際に、非同期HTTP通信を確実に実
行することを保証する
• 統計情報を正確に収集するのに超便利

38. Fetch
https://fetch.spec.whatwg.org/

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();
}

43. Push API
(Since 18th,Oct,2012)
http://www.w3.org/TR/push-api/

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 of push
notification
http://qiita.com/tomoyukilabs/items/8fffb4280c1914b6aa3d

46. Service Worker ちょっとだけ
Web
app
service
worker
Server
Browser
ブラウザ内のproxyと考えると分
かりやすい
・オフライン
・バックグラウンド同期
・Push Notification

47. Example flow 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

51. Thank you!
@komasshu