ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る

Copyright © NTT Communications Corporation. All rights reserved.
ビデオ通話・P2Pがコモディティ化する世界
WebRTCによるこれからを探る
NTTコミュニケーションズ株式会社
　　技術開発部 Webコアテクニカルユニット
Webアプリケーションエバンジェリスト
　　⼩小松健作

⾃自⼰己紹介
2
• ⼩小松健作
• NTTコミュニケーションズ
• 技術開発部
• Webアプリケーションエバンジェリスト
• 最新Web技術の研究開発に従事
• WebRTC（SkyWay）
• 標準化活動（W3C）
• コミュニティ活動
• html5j スタッフ
• Google Developer Expert（HTML5）

Copyright © NTT Communications Corporation. All rights reserved. 7
WebRTC 
in nutshell

WebRTCとは？
• Web Real Time Communication
-‐‑‒ Webでリアルタイム通信を⾏行行うための機能
-‐‑‒ ブラウザでテレビ会議サービスを簡単に作れるようになる
-‐‑‒ P2Pのデータ通信も可能
8

WebRTC Sample Demo （by Google）
9
https://apprtc.appspot.com/

Simple p2p bomberman sample w/ WebRTC
http://komasshu-skyway-sample.github.io/p2p-bomberman/src/

本⽇日のアジェンダ
6
• WebRTCの最新事情として
• 市場動向
• 技術仕様
• SkyWay
• ゲーム関連ユースケース
　を紹介

Status 
of the 
Market

The WebRTC Landscape Infographic–June 2014  
by CIO2CMO
12

by CIO2CMO (cont.)
13

by CIO2CMO (cont.)
14

Target 
service 
model

Gartner Report : WebRTCのメインターゲティングエリア
16
• The vision of WebRTC is to embed real-‐‑‒time voice and video communication into browser and
mobile applications, so that users do not have to move to another application in order to
communicate. Users will be able to communicate whenever and wherever they want to regardless
of device or application that they are using. By embedding the communication natively within the
browser, the contextual data and business processes can be more tightly integrated with the
communications.
• For example, click-‐‑‒to-‐‑‒call applications will migrate away from proprietary methods to WebRTC.
Within contact center operations and communications-‐‑‒enabled business processes, Web developers
can create browser pages as real-‐‑‒time communications objects to be used in workflow, e-‐‑‒
commerce and business process applications.
• The challenge with WebRTC will be adding sophisticated voice and video communication
functionality within applications. To address this, the traditional UCC and contact center
infrastructure (CCI) vendors are providing APIs that allow these applications to provide functions
such as conferencing, routing, queuing, recording, reporting and media tones such as a "beep" on
another incoming call.
release:2015/03/27
id:G00274066
http://www.gartner.com/document/3016620
要約すると、WebRTCによりWebアプリやモバイルアプリに映像⾳音声通信機能
が組み込まれていくようになる。これにより、関係するデータやビジネスプロセ
スと映像⾳音声通信とを密接につなげることができるようになるところをポイント
として置いている。

Why?
16
・標準化により、ブラウザ, Native ともに気軽に利用可能
・CPaaS サービスを利用することで手軽にシステム構築可能

したがって、WebRTCのカジュアルなマッシュアップが可能に
17
What?

先⾏行行事例例（カスタマーサポート）
18
• Amazon Mayday : Kindle Fireのカスタマーサービスとして、
サポートセンター接続を提供
• AMEX：Executive カスタマー専⽤用サポートアプリ（iPadで提
供）に、コンシェルジュ接続を提供
• Salesforce：CRMのカスタマーサポート機能として、ビデオ
チャットを提供
Amazon Mayday
Video Chat in Salesforce Service Cloud

先⾏行行事例例（OTT）
19

先⾏行行事例例（NTTグループ）
19
http://www.bestiebox.net/ http://gacco.org/
10/24
トライアル実施

Analysis for 
Potential

Potential WebRTC users
21
http://disruptive-analysis.com/webrtc.htm

Enterprise adoption of WebRTC
22
http://disruptivewireless.blogspot.co.uk/p/blog-page_30.html

WebRTC supporting devices
23
http://disruptivewireless.blogspot.co.uk/p/blog-page_30.html

WebRTCとは？
52
ひとことで⾔言うと「ブラウザでテレビ電話を実現する技術」
ブラウザだけで、プラグインのインストール無しに、Web会議、ボ
イスチャット、テキストチャット、ファイル転送、電話との連携
等が実現可能。
従来のWeb WebRTC
カメラやマイ
クを利利⽤用可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利利⽤用不不可
サーバサーバ

シグナリング
71
STUN
サーバ
Signaling
サーバ
STUN 
サーバ
WebRTC Cli WebRTC Cli
ICEの仕組み等を利利⽤用して取得した情報を、互いに交換する仕組み
　・どのような仕組みを⽤用いても良良い
　　・WebSocket（主流流）
　　・XHRロングポーリング
　・情報はSDPを⽤用いて情報交換する
　　・テキストベースのプロトコル
　　・IPアドレス、ポート番号、
　　　映像、⾳音声コーデック情報
　　　などを記載して交換する
　　・めちゃくちゃ難解

ICE(Interactive Connectivity Establishment)
5858
STUN
サーバ
Signaling
サーバ
STUN 
サーバ
WebRTCクライアント同⼠士がP2Pでネットワークを介してつながるために必要な仕組みを提供す
る
　STUN
　　・⾃自分のグローバルIP、
　　　ポート番号を知る
　　・UDPホールパンチングという
　　　仕組みでNATに⽳穴を開ける
　　・NATの種類を判定
　　　（WebRTCでは使ってない）
　TURN
　　・どうしてもNATに⽳穴を開けら
　　　れない場合に、データ通信を
　　　中継する仕組み
　　・WebRTCコネクション全体の
　　　8〜～9%はTURNが必要と
　　　⾔言われている（⽇日本はもっと多いかも）
TURN
サーバ

TURNの使いどころ
66
どうしてもNATに⽳穴があかない場合はTURNを利利⽤用する
互いのNAT
Type
フルコーン制限付きフル
コーン
ポート制限付
きフルコーン
シンメトリッ
ク
フルコーン STUN STUN STUN STUN
制限付きフル
コーン
STUN STUN STUN TURN
ポート制限付
きフルコーン
STUN STUN STUN TURN
シンメトリッ
ク
STUN TURN TURN TURN
※厳密に細分化すると９パターンあります。
よりセキュア
よりセキュア

P2Pによるセキュアなリアルタイム通信
7373
すべての準備が整うとP2Pによる、セ
キュアな通信を開始
　・映像・⾳音声　
　　・セキュアなリアルタイム通信（SRTP）
　　・AES（共通鍵暗号化）
　　・鍵交換にDTLSを⽤用いる（DTLS-SRTP）
　・データ　
　　・TCP同様の信頼性、到達順序性、
　　　フロー制御、輻輻輳制御をUDP上で実現
　　・セキュアなDTLS上で動作する
　・DTLS
　　・通信経路路暗号化
　　・データ整合性の保証
　　・認証⾏行行為は⾏行行わない（オレオレ証明書）
STUN
サーバ
Signaling
サーバ
STUN 
サーバ
IP
UDP
SCTPSRTP
DTLS
⾳音声・映像データ

⾳音声・動画処理理
75
WebRTCクライアントはPCやデバイスの⾳音声映像ストリームにアクセスでき
る（以下、Webブラウザの場合）
　・getUserMedia（WebAPI）
　　プラットフォーム上の
　　⾳音声、映像ストリームを取得できる
　　W3Cによって規定されたAPI
　・ブラウザに実装された
　　エンジンによって、
　　エンコード、デコード処理理がなされる
　・コーデック
　　・Video：VP8、H.264
　　・Audio：Opus、G.711 PCMA & PCMU
デバイスハードウェア
⾳音声処理理エンジン
コーデック
ジッタ/パケロス補正
エコー除去
ノイズリダクション
映像処理理エンジン
コーデック
ジッタ/パケロス補正
⾳音声・動画同期
画像補正
⾳音声キャプチャ動画キャプチャ
内部WebRTC API
WebAPI（W3C）
引⽤用元：オライリー・ジャパン
　　　　「ハイパフォーマンスブラウザネットワーキング」 P.301

SkyWayの概要
SkyWayは、WebRTC活⽤用サービス提供者向けの CPaaS (Communication PaaS)。 
複雑なシグナリング処理理を担うAPI群とライブラリ、各種サーバーで構成される。
29
■ 2013年年12⽉月5⽇日に提供開始
■ 2400以上のアプリで利利⽤用
■ ライブラリ類は基本オープンソース
STUN
API
Signaling
API
STUN 
API
ライブラリライブラリ
開発者はPeer to
Peer通信のプログラ 
ミングに専念念できる
SkyWayが 
シグナリングを 
担うので、
http://nttcom.github.io/skyway/index.html

提供機能
トライアルサービスに付き、無料で利用できます

IE/Safari Plugin（デスクトップPCのみ）
https://github.com/nttcom/peerjs/wiki/IE-and-Safari-plugin%E5%B0%8E
%E5%85%A5%E6%89%8B%E9%A0%86
※PluginはTemasys社のフリープラグインを利用

Multi Party library
https://github.com/nttcom/SkyWay-MultiParty
https://html5experts.jp/sakkuru/16397/

⾳音声認識識
https://nttcom.github.io/SkyWay-SpeechRec/
https://html5experts.jp/iwase/16439/

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

テレプレゼンス・ロボット
33
• ビデオ会議機能を備えた遠隔操作ロボット。
• Double Robotics社、Romotive社のロボットは、WebRTC技術を採⽤用。
• 難病で登校できない⼦子供が、学校に配備されたロボットを利利⽤用するなどの事例例もある。
(VGo社)
0.シグナ 
リング
1.映像と⾳音声を 
送受信
2.会話
2.会話
SkyWay
Romo by Romotive
www.romotive.jp
15,660
ロボット側はiPhoneを利利⽤用。 
操作側はiOSアプリか 
ブラウザを利利⽤用。
Double by Double Robotics
www.doublerobotics.com
$2,499
ロボット側はiPadを利利⽤用。 
操作側はiOSアプリか 
ブラウザを利利⽤用。

SkyWay Driving Vehicle
34
https://www.youtube.com/watch?v=oO-WjCKX9LY

https://github.com/nttcom/SkyWay-DrivingVehicle
SkyWay Driving Vehicleのソースコード、githubで公開！

もっとWoT/IoTな世界へ
Demo: WebRTC on Raspberry PI

かるーくアーキテクチャ
シグナリング
Audio/
Video

詳しくは今夜渋谷にて
http://eventdots.jp/event/568004

Summary
6
• WebRTCの最新事情として
• 市場動向　・・・　サービスへの組み込み
• 技術仕様・・・様々な技術の組み合わせ
• SkyWay ・・・ NTTコムが提供するCPaaS
• ゲーム関連ユースケース
　を紹介しました。

Thank you!!
html5-‐‑‒ia@ntt.com

ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る

Similar to ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る (20)

More from Kensaku Komatsu

More from Kensaku Komatsu (19)

Recently uploaded

Recently uploaded (7)

ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る