WebRTC入門 ~沖縄編~

Copyright © NTT Communications Corporation. All right reserved.
WebRTCハンズオンセミナー in 沖縄
WebRTC⼊⾨
~沖縄編~
NTTコミュニケーションズ株式会社
技術開発部
Webコア Technical Unit
⼤津⾕ (skyway@ntt.com)
2016年3⽉

⾃⼰紹介⼤津⾕亮祐
2
n 仕事
WebRTCプラットフォーム
“SkyWay” プロダクトオーナー
n コミュニティ
WebRTCをテーマにした
カンファレンス
“WebRTC Conference Japan” 幹事
n プライベート
神奈川県葉⼭町在住
趣味は海と畑

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

WebRTCは広義のHTML5の1つ
HTML5が提供する機能は多岐にわたる。WebRTCはその中の⼀つ。
4
HTML Web Platform
(Tomoya Asai (dynamis))

WebRTCとは
Web RTC
Web RT C
Web Real Time Communication
IPネットワークでリアルタイムな (意思疎通 | 通信)
をするためのオープン標準
5

リアルタイムコミュニケーションの歴史
最初のリアルタイム・コミュニケーションは電話
1876年以来、電話会社が独占
6 www.flickr.com/photos/mattb_tv/2550476978

2000年前後に、NapsterやSkypeがインターネット上
でリアルタイム・コミュニケーションを実現
7 www.flickr.com/photos/132889348@N07/18410514419

2011年にWebRTCの最初の草案が発表
すべてのソフトウェアエンジニアが
リアルタイム・コミュニケーションを扱える時代が到来
“リアルタイム・コミュニケーションの⺠主化”
8 www.flickr.com/photos/tjflex/57210112

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

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

マーケティング的な説明
1. ボイス/ビデオ通話機能をアプリ/サイトに組み込める
• Facebook Messenger, ChatWork等のビデオ通話に採⽤
• アプリやサイトに通話機能を組み込みめるので、別アプリ(電話、Skype等)を
使う場合と⽐べ、⼀貫性のあるユーザ体験を実現
2. 低遅延で安全なデータ送信
• ファイルやデータを、サーバを経由せず端末間で直接
送受信できるので、セキュアで低遅延
3. サポートコストの削減、低ITリテラシ層の利⽤
• ブラウザで利⽤する場合、アプリのインストールが不要
4. 家電やIoTでも活⽤できる
• 映像や⾳声を扱う場合のプロトコルとして利⽤できる。
既にWebRTCを利⽤した家電も登場(右の写真)。
5. 電話との連携
• WebRTC⇔IP電話変換サーバを使えば、ブラウザで電話の
発着信が可能に。
Chromecast
Withings Home
11

WebRTCの対応状況
*1: プラグインで対応可
*2: 2015年9⽉に対応（ただし、他のブラウザとのビデオ通話の相互接続に未対応）
*3: Ericsson等が推進する、オープンソースプロジェクト“WebRTC in WebKit” により、
開発がほぼ完了
OS
アプリ
Windows Mac Android iOS
Chrome ✔ ✔ ✔ ✘
Firefox ✔ ✔ ✔
IE ✘*1
Edge ✔*2
Safari ✘*1*3 ✘*3
ネイティブアプリ ✔ ✔ ✔ ✔
12

WebRTCの他社事例
Maydayボタン
Amazon
ビデオ通話と画⾯共有を使って
Kindle Fireタブレットの使い⽅を
教えてもらう
13
ネット保険デスク
楽天⽣命
ブラウザから、ビデオ通話またはテ
キストチャットで⽣保の加⼊相談
youtu.be/X40j57v5g6I www.rakuten-life.co.jp/videochat/

Facebook メッセンジャー Facebook
Google ハングアウト Google
Skype for Web Microsoft
ChatWork Live ChatWork
チャットアプリの通話機能に広く利⽤
14
フジテレビオンデマンド
フジテレビ/MistTechnology
4K映像をユーザ同⼠で助けあって
分散ダウンロード
www.fujitv.co.jp/fujitv/news/pub_2015/s/150706-s050.html

ECCオンライン英会話
ECC
フィリピン在住の講師がレッスン。
競合が採⽤しているSkypeではなく、
WebRTCを採⽤
15
online.ecc.co.jp

SkyWay Conference at 東京海上⽇動システムズ
多⼈数Web会議のサンプルアプリを社内に導⼊
16

SkyRTC by 妻⿃通信⼯業
ビデオチャットによるお問い合わせ機能を
Webサイトに埋め込めるSaaS
17
めんどり

Romoで⾒つける！⼦どもの表情 by ⽇本科学未来館
“おや？”っこひろばで遊ぶ⼦どもの様⼦を、
ロボットを使って離れた場所から⾒守るイベント
18
がっこ

V-Sido OS by アスラテック
⼈型ロボットを制御するOSの遠隔制御機能に採⽤
19
ぶしどう

BestieBox by NTTコミュニケーションズ
グループコミュニケーションアプリのビデオチャット機能に採⽤
20

gaccatz by ドコモgacco
300⼈のオンライングループワーク
21
がっかつがっこ

アースアイズ
家庭⽤防犯カメラ＆サービス
22

インスペクショングラス by NEXCOシステムズ
スマートグラスとビデオ通話で⾼速道路の点検作業を⽀援
23

オンラインゲームのしくみ

ゲーム開発者ではない⼈を想定して、ざっくりと説明
n データ同期⽅式
n 通信プロトコル
n ネットワーク経路
n P2Pの実現⽅法
n オンラインゲームの開発⼿法
25
CEDEC 2014 モバイル回線でリアルタイム通信対戦がどこまで出来るか調べてみた
(モノビット代表取締役社⻑本城嘉太郎⽒) を参考にしました。

26

キー⼊⼒同期とは
コントローラーの⼊⼒情報をインターネットに乗せる
イメージ。
ローカル対戦のプログラムを流⽤でき、双⽅で同じ
プログラムを実⾏する。
27

キー⼊⼒同期とは
コントローラーの⼊⼒情報をインターネットに乗せる
イメージ。
ローカル対戦のプログラムを流⽤でき、双⽅で同じ
プログラムを実⾏する。
28

パラメータ同期とは
コントローラーの⼊⼒情報をすべて送る代わりに、
操作の結果発⽣したコマンド、状態、座標のみを送る
29

キー⼊⼒同期 VS パラメータ同期
⽅式概要特徴
キー⼊⼒同期コントローラの⼊⼒情報を
60fpsで送る
✔ 実装が簡単
✘ 通信負荷が⾼い
✘ 通信品質に操作感が
左右される
パラメータ同期操作の結果発⽣したコマン
ド、状態、座標等を必要な
時に送る
✔ 通信負荷が低い
✔ 通信品質の影響を
受けにくい
✘ 実装が複雑
30

31

TCP と UDP
32
TCPとUDPの違いと使い分け（第18回）絵で知るコンピュータ・ネットワークの基礎
(⽇経BP社)

TCP と UDP
33
1週間で学ぶIT基礎の基礎 SEなら押さえておきたいIPネットワークの基礎第2回 MACアドレス，ルーティング
(⽇経BP社)

TCP VS UDP … トレード・オフの関係
TCP UDP
☆ 効率/速度
確実性 ☆☆
34

もうちょっと詳しく … TCPs VS UDPs
⽣TCP HTTP
over TCP
WebSocket
over TCP
⽣UDP WebRTC
over UDP
☆ ☆☆ ☆ 効率/速度1
確実性2
☆☆
☆ ☆
対応する
通信環境3 ☆☆ ☆
☆ 実装が簡単4
☆ ☆☆
☆☆ ☆☆ ☆☆ P2Pが容易 ☆☆
35
1,2 WebRTCは信頼性保証と順序保証のON/OFFを選択できる。
3 回線の種類(LTE、光ファイバー、公衆Wi-Fi、企業LAN、⼤学LAN…)やネットワーク機器
(NAT、プロキシ、ファイアウォール)に依らず利⽤できるほど、⾼評価。
4 OSが標準対応している、または使いやすい通信ライブラリが存在し、
サーバおよび端末の実装が簡単なほど、⾼評価。

36

クライアントサーバモデルと P2P
37
The P2P Witch Hunt
(Peer5 Blog)

クライアントサーバモデル VS P2P
⽅式概要特徴
クライアント
サーバモデル
端末とサーバ
が通信する
✔ 様々なネットワーク環境で利⽤で
きる
✔ チートされにくい
✔ 多⼈数に対応しやすい
✘ サーバ費⽤がかかる
✘ 通信遅延が⼤きい
Peer to Peer
(P2P)
端末同⼠が
直接通信する
✔ サーバ費⽤が安い
✔ 通信遅延が⼩さい
✘ NAT越えが必要
✘ チート対策が必要
✘ 多⼈数の場合、実装が複雑
38

39

P2Pの難しさ
n NAT (Network Address Translation、ネットワークアドレス変換)
の存在
n IPアドレス枯渇に対応するために登場
n 外部からプライベートIPアドレスにアクセスできない
n NATはP2Pの敵
40
NATとは
(Geekなぺーじ)

NAT越え
n WebRTCは、3つの⽅法でP2Pを実現
1. NATが無いときはP2P
2. NATがあるときはSTUN1 / UDPホールパンチング
3. NATが倒せない時はTURN2
n 全部セットにしたものがICE3
n めちゃくちゃめんどくさい
41
1 Session Traversal Utilities for NAT
2 Traversal Using Relay around NAT
3 Interactive Connectivity Establishment

UDPホールパンチング
42
Peer-to-Peer Communication Across Network Address Translators
(Bryan Ford, Pyda Srisuresh, Dan Kegel)

TURN
43
WebRTC in the real world: STUN, TURN and signaling
(HTML5 Rocks)

44

オンラインゲームを開発する2つの⼿法
n オンラインゲーム⽤ライブラリを利⽤
n 独⾃開発
45

家庭⽤ゲームスマホ/PCゲームゲームエンジン
オンラインゲーム⽤ライブラリを備えるプラットフォームは少数派
46

👍ありなしなし
オンラインゲーム⽤ライブラリを備えるプラットフォームは少数派
47
独⾃開発が必要

純正のライブラリがない場合はゲーム⽤通信エンジンでカバーできる
48
ゲーム⽤通信
エンジン

純正のライブラリがない場合はゲーム⽤通信エンジンでカバーできる
49
ゲーム⽤通信
エンジン
ただしP2Pには未対応

WebRTC×ゲーム

⼤切なこと！
n WebRTCは単なる技術
n 「⽬的」ではなく「⼿段」
n 無理に使うものではない
n では、どういう時に使えばいい?
51

WebRTCの使い道は2つ
n オンラインゲーム⽤通信プロトコル
n ボイス／ビデオチャット
52

• 実験的、サンプルゲームの段階
53

事例1 本格FPS “Banana Bread”
54
BananaBread
(Mozila)

事例2 PONGクローン “Cube Slam”
55
Cube Slam
(Google)

• 3rdパーティ製のサービスが盛り上がっている
56

事例1 スプラトゥーン専⽤ボイスチャット “イカデンワ”
57
イカデンワ

事例2 FF14専⽤ボイスチャット “FF14特化ボイスチャットツール”
58
FF14特化ボイスチャットツール
(FF14俺tools)

特にオススメのケース
• 通信遅延を⼩さくしたい
• サーバ費⽤を安くしたい
• 超多⼈数に対応する必要がない
59
The P2P Witch Hunt
(Peer5 Blog)

ゲームに向いていることを実験で確かめました！
60
http://www.slideshare.net/rotsuya/ss-58740441

参考ゲーム⽤通信プロトコル実験の概要
スマートフォン2台の間で通信に要する時間を測定
61

参考プロトコル 4通り
62
P2P サーバ経由
①WebRTC ②UDP
③TCP
④WebSocket

参考地域 2通り
63
①沖縄
②東京

参考場所 3通り
64
①オフィス街 ②住宅街 ③電⾞で移動中

参考端末 2通り
65
①iPhone ②Androidスマホ

参考アプリ 2通り
66
①ブラウザ ②測定⽤アプリ

参考回線 4通り
67
①光
+Wi-Fi
②ドコモ
LTE
③au
LTE
④ソフトバンク
LTE

参考時間帯 4通り
68
②平⽇夜間
①平⽇⽇中
④休⽇夜間
③休⽇⽇中

参考リレーサーバ 1通り
69
①AWS 東京リージョン

参考送信データ 1通り
70
①1/60秒(16ミリ秒)間隔で64bytesを送信

参考ゲーム⽤通信プロトコル実験でわかったこと①
n WebRTCはすべての場合においてUDPとTCPより⾼速!!
71
場所回線 WebRTC
(P2P)
UDP
(S⇔C)
TCP
(S⇔C)
東京⇔東京 LTE 同キャリア 50 70 110
LTE 異キャリア 60 62 100
光+Wi-Fi 10 13 13
東京⇔沖縄 LTE 同キャリア 65 100 140
沖縄⇔沖縄 LTE 同キャリア 68 92 171
LTE 異キャリア 78 90 150
光+Wi-Fi 19 62 106
(Androidの場合、単位ms)

参考ゲーム⽤通信プロトコル実験でわかったこと①
n 正直に⾔って意外…
n WebRTCはUDPより相当重いプロトコル
(UDPの上に、DTLSという暗号化レイヤーと、SCTPというプロ
トコルが乗っており、オーバーヘッドがある)
n 歴史あるWeb系プロトコルと⽐べると、
プロトコルスタックが枯れておらず、
パフォーマンスがでないのでは？
n と思っていた
72

参考ゲーム⽤通信プロトコル実験でわかったこと②
n 同じキャリア間は特にWebRTCが速い
73
92
68
0 50 100
UDP
WebRTC
70
50
0 50 100
UDP
WebRTC
沖縄⇔沖縄、LTE 同キャリア
東京⇔東京、LTE 同キャリア
40%⾼速 35%⾼速

参考ゲーム⽤通信プロトコル実験でわかったこと②
n WebRTCは、インターネットに出ず、キャリア網の中で
つながったと考えられる
n ただし沖縄⇔沖縄の場合でも、沖縄内ではなく、
東京までは⾏ってそう
74

参考ゲーム⽤通信プロトコル実験でわかったこと③
n 同じWi-Fiアクセスポイント配下は特にWebRTCが速い
75
13
10
0 50 100
UDP
WebRTC
62
19
0 50 100
UDP
WebRTC
沖縄⇔沖縄、光+Wi-Fi東京⇔東京、光+Wi-Fi
3.3倍⾼速
(僅差)

参考ゲーム⽤通信プロトコル実験でわかったこと③
n UDPは東京⇔沖縄を往復、
WebRTCは家の中で繋がる
76
東京⇔沖縄を
往復

特にオススメのケース
• 協⼒プレイが必要
• プレイの度にパーティのメンバーが変わる
• 両⼿がふさがる(VR、FPS…)
• 純正のチャット機能を内蔵したい
77

VRにはボイスチャットが必要
78
14 Upcoming Playstation VR Games In 2016 / 2017
(SKLLED)

WebRTCプラットフォームとは?

WebRTCに必要なモノはたくさんある
80
JS API API
WebRTC webRTC plugin
Android
Android
API API
Android
SDK
iOS
iOS
API API
iOS
SDK
API API
SDK
…
ICE
API
C F O
WebRTCに必要なモノ
n 端末
• ライブラリ
• プロトコルスタック
(for iOS, Android, Unity, Unreal Engine, IoT…)
n サーバ
• Signaling
• STUN
• TURN
• SFU / MCU
n クラウド
• 冗⻑化
• Global Load Balance
WebRTCステータスと2015年に期待すること
(Dr. Alex Gouaillard)

SkyWayチームが開発・運⽤のために勉強していること
WebRTCについて勉強し始めるとキリがない
n プロトコルの勉強
• DTLS
• SRTP
• SRTCP
• SCTP
• SDP
• ICE
• STUN
• TURN
81
https://twitter.com/cohtan/status/709761814444138496
n コーデックの勉強
• VP8
• VP9
• H.264
• Opus
• iSAC
• SVC
n ブラウザの更新に追随
• Chrome
• Firefox
• Edge
• Safari
n 標準化動向に追随
• W3C
ü WebRTC 1.0
ü WebRTC NV
ü ORTC
• IETF
• 3GPP
n ネイティブ実装の更新に追随
• libWebRTC
• OpenWebRTC

WebRTCプラットフォーム
n SDKとサーバAPIを提供
n WebRTCを⼿軽に利⽤できる
n 従量課⾦で使った分だけ⽀払う
82
• ⽶国企業 (親会社はス
ペインのTelefonica)
• ⾳声/ビデオ通話に
特化
• 通話時間による従量
課⾦
• たぶん最⼤⼿
• NTTコミュニケー
ションズが開発･運営
• ⾳声&データに対応
• 今のところ無料
(有償化の予定あり)
• 3800+アプリで利⽤
• ⽶国企業
• 元々は電話APIだが、
WebRTCのビデオ
通話も最近始めた
• 転送データ量による
従量課⾦

SkyWay
83
低遅延の通信やボイス/ビデオチャットを使った新しい体験を
提供するゲーム/アプリの開発者に、実現するための部品を提供

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

SkyWayの機能⼀覧
⾼度な機能を提供し、WebRTCの変化に速やかに追従するので、安⼼して利⽤できる
分類機能説明
API
Basic
シグナリング P2P接続の確⽴を仲介
NAT
越え
STUN
NAT配下の端末にグローバルIPアドレスを通知し、
UDPホールパンチングでNAT越えを実現
Pro TURN
UDPホールパンチングが不可能な環境で使⽤するリレー
サーバ
SDK/
ライブラリ
Basic
JavaScript SDK ブラウザで動作するWebアプリ向けSDK
iOS/Android SDK iOS/Androidで動作するのネイティブアプリ向けSDK
IE/Safariプラグイン
対応
WebRTC未対応のIE/SafariでSkyWayを利⽤可能にする
ブラウザプラグイン
多⼈数接続ライブラリ
多⼈数フルメッシュ接続のビデオ会議アプリを容易に開
発可能
画⾯共有ライブラリ
画⾯共有機能を提供するライブラリおよびブラウザ拡張
機能
Pro ⾳声認識ライブラリ⾳声認識(Speech-to-Text)のAPI
ポータル Basic
API設定変更
APIキーの追加/削除、利⽤可能なドメインの追加/変更、
TURN利⽤申請
セキュリティ⽂書
WebRTCのセキュリティ解説⽂書をオープンソース公開
し、企業でのWebRTC利⽤を促進
85

まとめ

こういうときにWebRTCを思い出して！
• 通信遅延を⼩さくしたい
• サーバ費⽤を安くしたい
• 超多⼈数に対応する必要がない
• 協⼒プレイが必要
• プレイの度にパーティのメンバーが変わる
• 両⼿がふさがる(VR、FPS…)
• 純正のチャット機能を内蔵したい
87

SkyWayも思い出して！
88
低遅延の通信やボイス/ビデオチャットを使った
新しい体験を提供するゲーム/アプリの開発者に、
実現するための部品を提供します！

WebRTC入門 ~沖縄編~

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to WebRTC入門 ~沖縄編~

Similar to WebRTC入門 ~沖縄編~ (20)

More from Ryosuke Otsuya

More from Ryosuke Otsuya (9)

WebRTC入門 ~沖縄編~