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