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