エフサミ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

http://www.romotive.jp/


Double Robotics

http://www.doublerobotics.com/education/


WebRTC とは？


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


WebRTC とは

ブラウザでカメラとマイク、音声と映像を扱える。ブラウザ間の直接通信、リアルタイム通信が可能になる。

8

従来の Web WebRTC

カメラやマイクを利用可

リアルタイムに送

受信

ブラウザ間の直接通

信

サーバ⇔クライアント間の

通信

リクエストとレスポンスの

繰り返し

カメラやマイクの利用不可


もうちょっと詳しく言うと

BrowserAPI

Protocol

GetUserMediaPeer to peer connections

JSEPSDPICE (STUN, TURN)SRTP, SCTP over DTLS


ざっくり言うと

End, End を簡単に繋げられるようになった

Browser Browser

NAT

FireWall

Proxy


WebRTC Reference App

https://apprtc.appspot.com/


Cube Slam

https://www.cubeslam.com/


WebRTC copy

https://rtccopy.com/


なにそれ？新しいの？

http://www.skype.com/

https://plus.google.com/hangouts

http://www.bittorrent.com/


Web はゲームチェンジャー


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

日記

ネイティブ地図アプリ

テキストチャット

p2p

blog

Google map

Twitter, facebook

???


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

17


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


これまでの Web のモデル

制御も、データもサーバー経由


WebRTC 時代のモデル

制御は、サーバー経由

データはダイレクト

極端に言うと、 Web ページ提供コストで、テレビ電話サービスが作れちゃう


Control Plane と Data Plane の分離 → 低コスト化

Control Plane

Data Plane

これからは、制御とデータを分離して低コストに

制御トラフィックだけなので、低コスト

データはNW に任せちゃおう


Github page で気楽に app!!

https://komasshu-skyway-sample.github.io/clm2audio





その 2 : マッシュアップ

23


YouTube と組み合わせたり

https://chat.skyway.io/


音声認識 API と組み合わせたり

https://skyway.io/examples/caption-phone/


よく言われること

26


サポート状況


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

28


Web とは言え、プロトコルは独立

BrowserAPI

Protocol

GetUserMediaPeer to peer connections

JSEPSDPICE (STUN, TURN)SRTP, SCTP over DTLS


HTTP のように独立したライブラリとして利用可能

XMLHTTPRequest HTTP

WebRTCBrowser API

WebRTCprotocol

Library(C/C++, JAVA

ruby, PHP, node …)


HTTP のように独立したライブラリとして利用可能

https://itunes.apple.com/jp/app/facebook/id284882215?mt=8

https://getpebble.com/


Platform としての WebRTC

専用アプリ

専用アプリ

専用ハード

専用アプリ

専用ハード

ブラウザ

ブラウザ

ここが共通化・標準化されるだけで、

相当嬉しい


WebRTC SDK, libraries for other env.

http://tokbox.com/opentok

http://js-platform.github.io/node-webrtc/

https://github.com/alongubkin/phonertc

http://www.webrtc.org/reference/native-apis


Chromecast

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


Chromecast (cont.)

Home Network

再生指示 via WebRTC

Movie file via HTTP

Webof

Things


Romo

http://www.romotive.jp/


Double Robotics

http://www.doublerobotics.com/education/


自力で build したい人は

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 利用アプリを開発できる。

STUNAPI

SignalingAPI STUN

API

ライブラリライブラリ

API とライブラリが複雑な処理を担う


ハッカソンの開催

http://blog.hackcamp.jp/post/90629603062/ntt

2014.6.7( 土）　（ CODE for JAPAN 共催）WebRTC を使って復興支援アプリを作ろう〜 WebRTC ハッカソン〜


WebRTC についてもっと知りたい方へ

http://html5experts.jp/tag/webrtc/


Thank you!!

45

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

Documents