WebRTC入門+最新動向

Copyright © NTT Communications Corporation. All right reserved.
第15回 HTML5+JS 勉強会
WebRTC⼊入⾨門+最新動向
~本格的な普及が始まる前にマスターしておこう~
NTTコミュニケーションズ株式会社
技術開発部
Webコア Technical Unit
⼤大津⾕谷
2015年年7⽉月

⾃自⼰己紹介 / ⼤大津⾕谷亮亮祐（おおつやりょうすけ）
n  NTTコミュニケーションズの
HTML5チームのリーダ
n  WebRTCプラットフォーム
“SkyWay”のプロダクトマネージャ
n  WebRTC Conference Japan 幹事
n  神奈奈川県葉葉⼭山町在住
趣味は海と畑
2

想定する聴講者
n  /WebRTCのことを
(知らない｜なんとなく知っているが)、
(ほとんど)? 書いたことがないWebエンジニア/
3

伝えたいこと
n WebRTCは、もう、商⽤用でも使える。
n WebRTCは、個⼈人のキャリアにとっても、
会社のビジネスにとっても、武器になる。
4

5Copyright © NTT Communications Corporation. All right reserved.
WebRTCとは

リアルタイム・コミュニケーションの歴史
120年年の間、電話会社が
リアルタイム・コミュニケーションを独占
6 www.flickr.com/photos/mattb_tv/2550476978

NapsterやSkype等のスーパーハッカーがインターネット
でリアルタイム・コミュニケーションを実現、
電話会社とハッカーによる寡占が10年年続いた
7 www.flickr.com/photos/132889348@N07/18410514419

WebRTCによって、リアルタイム・コミュニケーションが
我々の⼿手に。
“リアルタイム・コミュニケーションの⺠民主化”
8 www.flickr.com/photos/tjflex/57210112

HTML5の全体像
n  WebRTCはHTMLのAPIの1つ。
9
www.slideshare.net/dynamis/html-‐‑‒2012

上司向けの説明
ブラウザでテレビ電話を実現する技術
10

Webエンジニア向けの説明
n  ブラウザ間で直接通信ができる
n  ストリーミングデータを扱える
n  カメラとマイクを使える
11
従来のWeb WebRTC
カメラやマイ
クを利利⽤用可
ストリーミング
データを扱える
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利利⽤用不不可
サーバサーバ

エンジニア向けの説明
1.  ⾳音声、映像、データのリアルタイム通信のオープン標準
l  従来のサービス(LINE、Skype等)は独⾃自技術でできていた。
WebRTCはオープン標準、ライセンス使⽤用料料が不不要。
l  中⾝身は3つ。
①⾳音声と映像の形式(コーデック)
②ネットワーク機器(NAT等)を越えて直接通信する⼿手順
③暗号化、到達・順序保証、流流量量・輻輻輳制御を実現する
　プロトコル
2.  ブラウザとネイティブアプリの両⽅方で利利⽤用できる
l  WebRTC対応ブラウザにURLを⼊入⼒力力するだけで、WebRTCを利利
⽤用したサービスを利利⽤用できる。
l  オープンソースのC++のコードを利利⽤用しコンパイルすれば、ネ
イティブアプリにWebRTC機能を組み込むこともできる。
12

マーケティング的な説明
n  コミュニケーションアプリが作れる
n  家電、IoT分野で、リアルタイム通信が
必要な場合に使える(右の写真)
n  インストール不不要だから、サポートコストの
削減やITリテラシの低い層の利利⽤用が可能
n  アプリやWebに組み込めるので、
⼀一貫性のあるユーザ体験が実現できる
(例例：Skype英会話に適⽤用)
n  電話との連携
Chromecast
Withings Home

WebRTCの対応状況
14
*1: プラグインで対応可
*2: 2015年年7⽉月発売のWindows 10で⼀一部サポート
*3: Ericsson、Temasys等が推進する、オープンソースプロジェクト
“WebRTC in WebKit” により、開発がほぼ完了了
OS
アプリ
Windows Mac Android iOS
ネイティブアプリ ✔ ✔ ✔ ✔
Chrome ✔ ✔ ✔ ✘
Firefox ✔ ✔ ✔
IE ✘*1
Edge ✘*2
Safari ✘*1*3 ✘*3

デモ

テレプレゼンス・ロボット
n  ビデオ会議機能を備えた遠隔操作ロボット
16
Romo by Romotive
www.romotive.jp
15,660
Double by Double Robotics
www.doublerobotics.com
$2,499

イベント盛り上げ＆質疑応答
n  2000⼈人規模のカンファレンス(HTML Conference 2013)会場で
スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰示
17
SkyWay
SkyWayで
シグナリング
カメラの映像を
WebRTCで送信
HTML5 JUMBOTRON
jt.skyway.io

イベント盛り上げ＆質疑応答
n  2000⼈人規模のカンファレンス(HTML Conference 2013)会場で
スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰示
18
SkyWay
SkyWayで
シグナリング
カメラの映像を
WebRTCで送信
HTML5 JUMBOTRON
jt.skyway.io
Windows, Mac, Android の
Chrome, Firefox でアクセス
is.gd/html5jt#0730

WebRTCの技術解説
www.slideshare.net/yusukenaka52/webrtcortc-‐‑‒50153479 を著者の許可を得て⼀一部改編

NAT越え
2020
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
WebRTC Cli WebRTC Cli
ICE
•  NAT越えの⼿手順
STUN
•  ⾃自分のグローバルIP、
ポート番号を知る
•  UDPホールパンチングという
仕組みでNATを越える
TURN
•  どうしてもNATを越えられ
ない場合はサーバで中継する
•  8〜～9%はTURNが必要
TURN
サーバ

UDPホールパンチング
21
NAT
STUN
NAT
※後述するNAT Typeにより挙動が変わります

22
俺のグローバル
IPとポート番号
教えて
111.111.111.111
50000番やで
NAT
STUN
NAT

23
俺のグローバル
IPとポート番号
教えて
222.222.222.222
20000番やで
NAT
STUN
NAT
IP:111.111.111.111
PORT:10000番

24
NAT
STUN
NAT
IP:111.111.111.111
PORT:10000番
IP:222.222.222.222
PORT:20000番
互いのIPとPORTを何
らかの⼿手段で交換
（シグナリング）

25
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
アクセスさせ
てー！だめー。
⽳穴開いた！

26
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
通れる！！
アクセスさせてー。
⽳穴開いた！

27
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
もしかして！
通れる！

TURNの使いどころ
28
どうしてもNATに⽳穴があかない場合はTURNを利利⽤用する
互いのNAT
Type
フルコーン制限付きフ
ルコーン
ポート制限
付きフル
コーン
シンメト
リック
フルコーン STUN STUN STUN STUN
制限付きフ
ルコーン
STUN STUN STUN TURN
ポート制限
付きフル
コーン
STUN STUN STUN TURN
シンメト
リック
STUN TURN TURN TURN
※NAT Typeは厳密に細分化すると９パターンあります。
よ
り
セ
キ
ア
よりセキュア
※もっと詳しく知りたい⽅方はこちら。
http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc

TURNリレー
29
シンメトリックNAT
TURN
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
TURNサーバを中継する
（中継するだけなので通信の中⾝身はわからない）
IP:11.11.11.11
PORT:443
IP:11.11.11.11
PORT:443
TCPで通信可能TCPで通信可能
FW FW
TCP443か、怪しくないな！
クライアントはP2Pのつもり

TURNを使っても通らない場合がある
30
TURN
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
IP:11.11.11.11
PORT:443
IP:11.11.11.11
PORT:443
Proxy Proxy
おいおい、中⾝身が怪しいぞ！
例例えば、マイン・ザ・ミドル可能なProxyが存在する
おいおい、中⾝身が怪しいぞ！

シグナリング
31
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
WebRTC Cli WebRTC Cli
•  NAT越えに必要な情報を交換する仕組み
•  プロトコルは定められていない
SIP over WebSocket/XHR,
XMPP over WebSocket/XHR,
独⾃自 over WebSocket/XHR等
•  情報の記述⽅方法は、SDPを⽤用いる
と定められている

プロトコル・スタック
n  UDPの上で温故知新
32
chimera.labs.oreilly.com/books/1230000000545/ch18.html#_̲real_̲time_̲network_̲transports
シグナリング映像、⾳音声データ

WebRTCプラット
フォームを利利⽤用する

NAT
NAT
SkyWay
34
n  NTT Comが提供するWebRTCアプリ開発者向けプラットフォーム。
n  2013年年12⽉月5⽇日に提供開始
n  2000以上のアプリで利利⽤用
STUN
API
Signaling
API
STUN
API
ライブラリライブラリ
開発者はPeer to
Peer通信のプログラ
ミングに専念念できる
SkyWayが
シグナリングを
担うので、

SkyWayのサンプルコード
n  シンプルなビデオチャットならわずか⼗十数⾏行行で記述できる。
35
1. シグナリングサーバに接続する
4. (受信側の処理理) 相⼿手からビデオが送られてきたら、⾃自分のビデオを相⼿手に送る
3. (発信側の処理理) ブラウザの発信ボタンがクリックされたら、⾃自分のビデオを相⼿手に送る
2. カメラとマイクを起動し、⾃自分のビデオを表⽰示する
5. 相⼿手のビデオを表⽰示する
github.com/nttcom/peerjs/tree/master/examples/videochat

SkyWayの機能⼀一覧
業界をリードするWebRTCプラットフォーム
36
分類機能説明提供時期
API
Basic
シグナリング WebSocketとHTTPを併⽤用しP2P接続の確⽴立立を仲介 2013/12
NAT
越え
STUN
フルコーンNATに対し、UDPホールパンチングで
NAT越えを実現
2013/12
Pro TURN
UDPホールパンチングが不不可能な際に使⽤用するリ
レーサーバ
2015/01
SDK/
ライブラリ
Basic
JavaScript SDK ブラウザで動作するWebアプリ向けSDK 2013/01
iOS/Android SDK
iOS/Androidで動作するのネイティブアプリ向け
SDK
2015/05
IE/Safariプラグイン
対応
WebRTC未対応のIE/SafariでもSkyWayを利利⽤用可能
にするTemasys社提供のブラウザプラグインに対応
2015/06
Pro
⾳音声認識識ライブラリ⾳音声認識識(Speech-to-Text)を実現 2015/06
多⼈人数接続ライブラリ
多⼈人数フルメッシュ接続のビデオ会議アプリを容易易
に開発可能
2015/06
画⾯面共有ライブラリ
画⾯面共有機能を提供するライブラリおよびブラウザ
拡張機能
2015/06
ポータル Basic
API設定変更更
APIキーの追加/削除、利利⽤用可能なドメインの追加/変
更更、TURN利利⽤用申請
2014/10
セキュリティ⽂文書
WebRTCのセキュリティ解説⽂文書をオープンソース
公開し企業でのWebRTC利利⽤用を促進
2015/06

WebRTCの事例例

Amazon Mayday
38
www.youtube.com/watch?v=X40j57v5g6I

楽天⽣生命ネット保険デスク
39
www.rakuten-life.co.jp/videochat/

ChatWork Live
40
blog-ja.chatwork.com/2013/05/chatwork-live.html

MistCDN / フジテレビオンデマンド
41
fod.fujitv.co.jp/s/fodlabo/
著作権に配慮

V-‐‑‒Sido
n  ⼈人型ロボットを制御するミドルウェア
42
ぶしどう
www.asratec.co.jp/product/connect/webcon/

Romoでみつける！⼦子どもの表情（⽇日本科学未来館）
n  遊び場の⼦子供の様⼦子を離離れた場所から⾒見見守る
43
www.miraikan.jst.go.jp/event/1503241118096.html

BestieBox
n  グループ向けコミュニケーションアプリの
無料料ビデオ通話機能に採⽤用
44
506506.ntt.com/smp_ap/bestiebox/

WebRTCの最新動向

ORTC / Object RTCとは
n  現⾏行行のWebRTCを改善すべく提案されたもう⼀一つのRTC API
n  W3CのORTC(Object Real-‐‑‒time Communications) Community Groupで議論論
46
www.slideshare.net/yusukenaka52/webrtcortc-50153479

IE / Microsoft Edgeは？
n  Edgeはカメラ・マイクの利利⽤用(getUserMedia API)に対応済み！
ORTCも開発中！
n  IEはダメっぽい。
47
dev.modern.ie/platform/status/

Safari
n  EricssonとTemasysが、WebKitのWebRTC実装を⼿手伝っている
48

最後に

最後に
WebRTCを使って
世界を変えるサービスを作ろう！
50

WebRTC入門+最新動向

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to WebRTC入門+最新動向

Similar to WebRTC入門+最新動向 (20)

More from Ryosuke Otsuya

More from Ryosuke Otsuya (11)

WebRTC入門+最新動向