エフサミ2014 web rtcの傾向と対策

Copyright © NTT Communications Corporation. All right reserved.
エフサミ2014
WebRTC 傾向と対策
NTTコミュニケーションズ
小松健作
2014年7月12日

自己紹介
名前：小松健作
所属：NTT communications
HTML5の研究開発
標準化活動（W3C）
HTML5の啓蒙・コミュニティ運営
Google Developer Expert (HTML5)

3Copyright © NTT Communications Corporation. All right reserved.
いきなりですが
Robotics テレプレゼンスから
3

Romo
4
http://www.romotive.jp/

Double Robotics
5
http://www.doublerobotics.com/education/

WebRTCとは？

ブラウザで p2p での
テレビ電話やファイル交換などを
可能にするAPI

WebRTCとは
 ブラウザでカメラとマイク、音声と映像を扱える。
 ブラウザ間の直接通信、リアルタイム通信が可能になる。
8
従来のWeb WebRTC
カメラやマイ
クを利用可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利用不可

もうちょっと詳しく言うと
9
Browser
API
Protocol
GetUserMedia
Peer to peer connections
JSEP
SDP
ICE (STUN, TURN)
SRTP, SCTP over DTLS

ざっくり言うと
End, Endを簡単に繋げられるよ
うになった
10
Browser Browser
NAT
FireWall
Proxy

WebRTC Reference App
11
https://apprtc.appspot.com/

Cube Slam
12
https://www.cubeslam.com/

WebRTC copy
13
https://rtccopy.com/

なにそれ？新しいの？
14
http://www.skype.com/
https://plus.google.com/hangouts
http://www.bittorrent.com/

Webはゲームチェンジャー
15

Webは、ゲームチェンジャー
16
日記
ネイティブ地図
アプリ
テキストチャット
p2p
blog
Google map
Twitter, facebook
???

どんな感じで変わっていくの
か・・・ドキドキ
17

その1 : サーバーコストを下
げる!!

これまでのWebのモデル
19
制御も、データ
もサーバー経由

WebRTC時代のモデル
20
制御は、
サーバー経由
データは
ダイレクト
極端に言うと、Webページ提供コストで、
テレビ電話サービスが作れちゃう

Control PlaneとData Planeの分離 → 低コスト化
21
Control Plane
Data Plane
これからは、制御とデータを分離して低コストに
制御トラフィッ
クだけなので、
低コスト
データは
NWに任せ
ちゃおう

Github pageで気楽にapp!!
https://komasshu-skyway-sample.github.io/clm2audio

その2 : マッシュアップ
23

YouTubeと組み合わせたり
24
https://chat.skyway.io/

音声認識 API と組み合わせたり
25
https://skyway.io/examples/caption-phone/

よく言われること
26

サポート状況
27

WebRTCは
ブラウザだけのもの？
28

Web とは言え、プロトコルは独立
29
Browser
API
Protocol
GetUserMedia
Peer to peer connections
JSEP
SDP
ICE (STUN, TURN)
SRTP, SCTP over DTLS

HTTPのように独立したライブラリとして利用可能
30
XMLHTTPRequest HTTP
WebRTC
Browser API
WebRTC
protocol
Library
(C/C++, JAVA
ruby, PHP, node …)

HTTPのように独立したライブラリとして利用可能
31
https://itunes.apple.com/jp/app/fa
cebook/id284882215?mt=8
https://getpebble.com/

Platform としての WebRTC
32
専用
アプリ
専用
アプリ
専用
ハード
専用
アプリ
専用
ハード
ブラウザ
ブラウザ
ここが共通化・
標準化されるだけで、
相当嬉しい

WebRTC SDK, libraries for other env.
33
http://tokbox.com/opentok
http://js-platform.github.io/node-webrtc/
https://github.com/alongubkin/phonertc
http://www.webrtc.org/reference/native-apis

Chromecast
34
http://www.google.com/intl/ja_ALL/chrome/devices/chromecast
/

Chromecast (cont.)
35
Home Network
再生指示 via WebRTC
Movie file via HTTP
Web
of
Things

Romo
36
http://www.romotive.jp/

Double Robotics
37
http://www.doublerobotics.com/education/

自力で build したい人は
38
http://ninjanetic.com/how-to-get-started-with-webrtc-and-ios-
without-wasting-10-hours-of-your-life/

そんなWebRTCをもっと普及さ
せたい

SkyWayの概要
40
WebRTC利用アプリを簡単に開発できるクラウド基盤
 2013年12月5日に提供開始
 社外 800 名以上の
開発者が利用
 提供内容
• シグナリング等のAPI
• ライブラリ
• サンプルアプリ
• ドキュメント

WebRTCはWeb開発者にとって難しい技術
41
ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を
行う必要があり、実装にはネットワークの知識が必要。
41ようやく直接通信できる
これらの通信が
完了してから…

SkyWayの特徴
42
SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので、
開発者は簡単にWebRTC利用アプリを開発できる。
STUN
API
Signaling
API
STUN
API
ライブラリライブラリ
APIとライブ
ラリが複雑な
処理を担う

ハッカソンの開催
43
http://blog.hackcamp.jp/post/90629603062/ntt
2014.6.7(土）（CODE for JAPAN共催）
WebRTCを使って復興支援アプリを作ろう〜WebRTC ハッカソン〜

WebRTCについてもっと知りたい方へ
44
http://html5experts.jp/tag/webrtc/

Thank you!!
45

エフサミ2014 web rtcの傾向と対策

More Related Content

What's hot

Viewers also liked

Similar to エフサミ2014 web rtcの傾向と対策

More from Kensaku Komatsu

エフサミ2014 web rtcの傾向と対策