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

最新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