webrtc入門 ~沖縄編~

Copyright © NTT Communications Corporation. All right reserved.

WebRTCハンズオンセミナー in 沖縄

WebRTC⼊⾨~沖縄編~

NTTコミュニケーションズ株式会社技術開発部Webコア Technical Unit⼤津⾕ ([email protected])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 HTTPover TCP

WebSocketover TCP

⽣UDP WebRTCover 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が無いときはP2P2. NATがあるときはSTUN1 / UDPホールパンチング3. NATが倒せない時はTURN2

n 全部セットにしたものがICE3

n めちゃくちゃめんどくさい

41

1 Session Traversal Utilities for NAT2 Traversal Using Relay around NAT3 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



n オンラインゲーム⽤通信プロトコル• 実験的、サンプルゲームの段階

n ボイス／ビデオチャット

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)


特にオススメのケース

n オンラインゲーム⽤通信プロトコル• 通信遅延を⼩さくしたい• サーバ費⽤を安くしたい• 超多⼈数に対応する必要がない

n ボイス／ビデオチャット

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

③auLTE

④ソフトバンク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

iOSSDK

!��#��$ $)

��$��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の変化に速やかに追従するので、安⼼して利⽤できる分類機能説明

APIBasic

シグナリング P2P接続の確⽴を仲介

NAT越え

STUNNAT配下の端末にグローバルIPアドレスを通知し、UDPホールパンチングでNAT越えを実現

Pro TURNUDPホールパンチングが不可能な環境で使⽤するリレーサーバ

SDK/ライブラリ

Basic

JavaScript SDK ブラウザで動作するWebアプリ向けSDK

iOS/Android SDK iOS/Androidで動作するのネイティブアプリ向けSDK

IE/Safariプラグイン対応

WebRTC未対応のIE/SafariでSkyWayを利⽤可能にするブラウザプラグイン

多⼈数接続ライブラリ多⼈数フルメッシュ接続のビデオ会議アプリを容易に開発可能

画⾯共有ライブラリ画⾯共有機能を提供するライブラリおよびブラウザ拡張機能

Pro ⾳声認識ライブラリ⾳声認識(Speech-to-Text)のAPI

ポータル BasicAPI設定変更 APIキーの追加/削除、利⽤可能なドメインの追加/変更、

TURN利⽤申請

セキュリティ⽂書 WebRTCのセキュリティ解説⽂書をオープンソース公開し、企業でのWebRTC利⽤を促進

85


まとめ


こういうときにWebRTCを思い出して！

n オンラインゲーム⽤通信プロトコル• 通信遅延を⼩さくしたい• サーバ費⽤を安くしたい• 超多⼈数に対応する必要がない

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

87


SkyWayも思い出して！

88

低遅延の通信やボイス/ビデオチャットを使った

新しい体験を提供するゲーム/アプリの開発者に、

実現するための部品を提供します！