Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Copyright © NTT Communications Corporation. All right reserved.
注⽬の最新技術
「WebRTC」とは? ­技術概要と事例紹介­
NTTコミュニケーションズ株式会社
技術開発部
We...
Copyright © NTT Communications Corporation. All right reserved.
⾃⼰紹介
• 仲 裕介(なかゆうすけ)
NTTコミュニケーションズ
• 技術開発部 Webコアテクニカルユニット所属...
Copyright © NTT Communications Corporation. All right reserved.
本題に⼊る前に・・・
3
なぜNTTコミュニケーションズはWebRTCに取り組むのか?
4Copyright © NTT Communications Corporation. All right reserved.
WebRTCは通信キャリアの強みを活かせる技術
Copyright © NTT Communications Corporation. All right reserved.
NTT Comの強み
n Internet分野の技術⼒を活⽤
• Internet(レイヤ4〜7)とWebの両⽅にま...
Copyright © NTT Communications Corporation. All right reserved.
NAT
NAT
Communications PaaS 「SkyWay」
6
n NTT Comが提供するWebRT...
Copyright © NTT Communications Corporation. All right reserved.
SkyWayの採⽤事例
Webが窓⼝
妻⿃通信⼯業
ビデオ通話による問い合せ機能を
Webサイトに埋め込めるサービス...
Copyright © NTT Communications Corporation. All right reserved.
SkyWayの採⽤事例
BestieBox
NTTコミュニケーションズ
グループ向けコミュニケーション
アプリの無料...
Copyright © NTT Communications Corporation. All right reserved.
WebRTC Conference Japan
9
開催概要
開催⽇: 2016年2⽉16⽇、17⽇
会場: ソラシ...
Copyright © NTT Communications Corporation. All right reserved.
ここから本題、今⽇のゴール
最新技術として注⽬を集めているWebRTCについて
• WebRTCの概要が正しく理解で...
Copyright © NTT Communications Corporation. All right reserved.
今⽇のアジェンダ
l HTML5の概要
l WebRTCの概要
l WebRTCの市場動向
l WebRTCの技術要...
12Copyright © NTT Communications Corporation. All right reserved.
HTML5の概要
HTML5はWebを
アプリとして使うための技術
Copyright © NTT Communications Corporation. All right reserved.
Webの誕⽣
Webは⽂書を作成、閲覧する技術として登場した。
13
1992
CERN
1993
NTT
Copyright © NTT Communications Corporation. All right reserved.
Webアプリの誕⽣
Webがアプリとしても使われるようになったが、当初は
⽂書のための技術を「ハック※」してアプリを...
Copyright © NTT Communications Corporation. All right reserved.
HTML5の誕⽣と標準化
2004年、Apple, Mozilla, Operaが中⼼になり、
後に標準化団体のW3...
Copyright © NTT Communications Corporation. All right reserved.
Webアプリ全盛期が到来
Webアプリが数多くのネイティブアプリ※を置き換えた。
16
Googleドキュメント
(...
Copyright © NTT Communications Corporation. All right reserved.
Webアプリ全盛期が到来
Webアプリが数多くのネイティブアプリを置き換えた。
17
Googleマップ
(3D地図...
Copyright © NTT Communications Corporation. All right reserved.
HTML5とネイティブアプリの⽐較
HTML5の⻑所
n インストール不要 (URLにアクセスするだけ)
n マルチ...
Copyright © NTT Communications Corporation. All right reserved.
HTML5の全体像
HTML5が提供する機能は多岐にわたる。NTT ComはWebRTCに特に注⽬。
19
引⽤元:...
20Copyright © NTT Communications Corporation. All right reserved.
WebRTCの概要
WebRTCはブラウザでテレビ電話や
ファイル交換を可能にする技術
Copyright © NTT Communications Corporation. All right reserved.
最も簡単な説明
ブラウザでテレビ電話を実現する技術
21
Copyright © NTT Communications Corporation. All right reserved.
エンジニア向けの説明
1. ブラウザ間で直接通信ができる
2. ストリーミングデータを扱える
3. カメラとマイクを...
Copyright © NTT Communications Corporation. All right reserved.
エンジニア向けの説明
1. ⾳声、映像、データのリアルタイム通信のオープン標準
• 従来のサービス(LINE、Sky...
Copyright © NTT Communications Corporation. All right reserved.
マーケティング的な説明
1. コミュニケーションアプリを容易に開発
• Facebook Messenger, Ch...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの対応状況
25
*1: プラグインで対応可
*2: 2015年7⽉発売のWindows 10でObje...
26Copyright © NTT Communications Corporation. All right reserved.
WebRTCの市場動向
WebRTCは今市場で注⽬されている技術
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの技術的な成熟度(Gartner Hype Cycleより)
27
引⽤元:Gartner Hype C...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCには既に多くのプレイヤーが参⼊
28
n 欧⽶を中⼼に各適⽤分野に様々なプレイヤーが参⼊している。
29Copyright © NTT Communications Corporation. All right reserved.
WebRTCの市場動向
WebRTCが秘めるポテンシャル
Copyright © NTT Communications Corporation. All right reserved.
WebRTCサポート端末のポテンシャル(Disruptive Analysisより)
30
引⽤元:http://d...
Copyright © NTT Communications Corporation. All right reserved.
WebRTC利⽤ユーザのポテンシャル(Disruptive Analysisより)
31
引⽤元:http://di...
32Copyright © NTT Communications Corporation. All right reserved.
WebRTCの技術要素解説
導⼊の敷居は低いが
本気で使いこなすには難易度が⾼い
Copyright © NTT Communications Corporation. All right reserved.
なぜ難易度が⾼いのか?
⼀部企業が独占してた技術がオープンになった
WebRTCはかなり難易度が⾼い技術
少し具体的...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの技術要素
n WebRTCには様々な技術が使われています。
• 1.シグナリング
• 2.ICE
• ...
Copyright © NTT Communications Corporation. All right reserved.
シグナリング
n 通信相⼿を識別、発⾒する仕組みを提供する
35
シグナリングサーバ
(シグナリングは後述)
Web...
Copyright © NTT Communications Corporation. All right reserved.
シグナリング
n P2P通信に必要な情報を互いに交換する仕組みを提供する
・どのような仕組みを⽤いても良い
・独⾃ ...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの技術要素
n WebRTCには様々な技術が使われています。
• 1.シグナリング
• 2.ICE
• ...
Copyright © NTT Communications Corporation. All right reserved.
ICE(Interactive Connectivity Establishment)
n WebRTCクライアント...
Copyright © NTT Communications Corporation. All right reserved.
TURNの使いどころ
n どうしてもNATに⽳があかない場合はTURNを利⽤する
39
互いのNAT
Type
フル...
Copyright © NTT Communications Corporation. All right reserved.
ICEを含むシグナリングフロー①
40
Aさん Bさん
シグナリングサーバ STUNサーバ TURNサーバ
②STU...
Copyright © NTT Communications Corporation. All right reserved.
ICEを含むシグナリングフロー ②
41
Aさん Bさん
シグナリングサーバ STUNサーバ TURNサーバ
⑦ST...
Copyright © NTT Communications Corporation. All right reserved.
ICEを含むシグナリングフロー ③
42
Aさん
n お互いに⼊⼿したアドレス候補を利⽤して、接続試⾏する
n 接続...
Copyright © NTT Communications Corporation. All right reserved.
NAT NAT
UDPホールパンチング
43
n 通信経路上にあるNATやFirewallで多くある動作として以下が...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの技術要素
n WebRTCには様々な技術が使われています。
• 1.シグナリング
• 2.ICE
• ...
Copyright © NTT Communications Corporation. All right reserved.
P2Pによるセキュアなリアルタイム通信
n すべての準備が整うとP2Pによる、セキュアな通信を開始
・映像・⾳声(M...
Copyright © NTT Communications Corporation. All right reserved.
P2Pだけじゃない・・多対多の通信
n WebRTCはP2Pの通信が前提だが、ユースケースとしては多対
多も求められ...
Copyright © NTT Communications Corporation. All right reserved.
Aさんの映像
P2Pだけじゃない・・多対多の通信
n MCU(Multipoint Control Unit)を利⽤...
Copyright © NTT Communications Corporation. All right reserved.
P2Pだけじゃない・・多対多の通信
n SFU(Selective Forwarding Unit)を利⽤する。
4...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの技術要素
n WebRTCには様々な技術が使われています。
• 1.シグナリング
• 2.ICE
• ...
Copyright © NTT Communications Corporation. All right reserved.
⾳声・動画処理
n WebRTCクライアントはPCやデバイスの⾳声映像スト
リームにアクセスできる(以下、Webブラ...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCプラットフォームを活⽤する
WebRTCをビジネスで活⽤するには難易度が⾼い技術です。
構築だけでなく運...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCプラットフォーム(フルスペック型)
OpenTok
tokbox
SFUを利⽤した多対多配信が特徴
52...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCプラットフォーム(フルスペック型)
SkyWay
NTT Communications
⽇本企業で唯⼀の...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCプラットフォーム(業界特化型)
Twillio
twillio
SIPとWebRTCを中継するSBC機能...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCプラットフォーム(単機能型)
PowerMedia XMS
Dialogic
ソフトウェアベースのMCU...
56Copyright © NTT Communications Corporation. All right reserved.
WebRTCの活⽤事例・応⽤事例
WebRTCの適⽤分野は多岐にわたる
Copyright © NTT Communications Corporation. All right reserved.
WebRTC活⽤事例・応⽤事例紹介
n WebRTCの可能性を知っていただくために5つの分野での活⽤事例
と、コンタ...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの他社事例 ~カスタマサポート~
Maydayボタン
Amazon
ビデオ通話と画⾯共有を使って
Kin...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの他社事例 ~カスタマサポート~
Executive Support
American Express
...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの他社事例 ~Web会議~
1click.io
1CLICK
ウェブサイトのカスタマサポートの
⼿段とし...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの他社事例 ~Web会議~
Skype for Web
Microsoft
SkypeのWeb版はRTC...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの他社事例 ~Web会議~
Firefox Hello
Mozilla
ビデオ通話機能はWebRTCを利...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの他社事例 ~Web会議~
GoToMeeting Free
Citrix
ビジネス向けのWeb会議シス...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの他社事例 ~オンライン学習~
ECCオンライン英会話
ECC
WebRTCを活⽤したオンライン英会
話...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの他社事例 ~IoT&CDN~
65
iCamPRO FHD
Amaryllo
WebRTC機能を備えた...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの応⽤事例
n コンタクトセンタへのWebRTCの応⽤例
66
6666
# 形態
応⽤例
特徴
1 現...
Copyright © NTT Communications Corporation. All right reserved.
WebRTCの応⽤事例 ~Click to Callの実現例~
67
引⽤元:https://webrtchacks...
Copyright © NTT Communications Corporation. All right reserved.
Click to Call【発信準備編】
1. 顧客はWeb PortalからCall要求を出す
2. Signal...
Copyright © NTT Communications Corporation. All right reserved.
Click to Call【発信編】
1. 顧客とエージェント両⽅が準備できた
ら、顧客から発信する
2. Sign...
70Copyright © NTT Communications Corporation. All right reserved.
デモンストレーション
WebRTCは便利で⾯⽩い技術
※公開資料では⼀部割愛させて頂きます。
Copyright © NTT Communications Corporation. All right reserved.
字幕付きボイスチャット
• ⾳声認識機能を組み合わせ、通話内容をテキストで表⽰。
• 聴⼒が衰えた⽅向け、電⾞や会議...
72Copyright © NTT Communications Corporation. All right reserved.
まとめ
今⽇のおさらい
Copyright © NTT Communications Corporation. All right reserved.
まとめ
l HTML5の概要
l HTML5はWebをアプリとして使うための技術
l WebRTCの概要
l Web...
Copyright © NTT Communications Corporation. All right reserved.
本⽇の公演内容やWebRTC/SkyWayでお困りのことがあれば
NTTコミュニケーションズ 技術開発部
Webコア...
Upcoming SlideShare
Loading in …5
×

注目の最新技術「WebRTC」とは? -技術概要と事例紹介-

6,484 views

Published on

コールセンター/CRM デモ&コンファレンス2015 in 東京
WebRTCxコンタクトセンターセッション講演資料
https://www.callcenter-japan.com/tokyo/webrtc

2017.02.13 追記
- P39 制限付きフルコーン☓シンメトリックの組み合わせはSTUNで通信できるため修正

Published in: Technology

注目の最新技術「WebRTC」とは? -技術概要と事例紹介-

  1. 1. Copyright © NTT Communications Corporation. All right reserved. 注⽬の最新技術 「WebRTC」とは? ­技術概要と事例紹介­ NTTコミュニケーションズ株式会社 技術開発部 Webコア Technical Unit 仲裕介 2015/11/13 ※コールセンター/CRM デモ&コンファレンス2015 in 東京 講演資料
  2. 2. Copyright © NTT Communications Corporation. All right reserved. ⾃⼰紹介 • 仲 裕介(なかゆうすけ) NTTコミュニケーションズ • 技術開発部 Webコアテクニカルユニット所属 • Web/インフラエンジニア 仕事 • SkyWay(WebRTCのプラットフォーム)の開発運⽤サポート • 技術メディア HTML5Experts.jp 副編集⻑ 個⼈活動 • WebRTC Meetup Tokyo/Japan 主催 • WebRTCに関する技術者向け講演活動 等 2
  3. 3. Copyright © NTT Communications Corporation. All right reserved. 本題に⼊る前に・・・ 3 なぜNTTコミュニケーションズはWebRTCに取り組むのか?
  4. 4. 4Copyright © NTT Communications Corporation. All right reserved. WebRTCは通信キャリアの強みを活かせる技術
  5. 5. Copyright © NTT Communications Corporation. All right reserved. NTT Comの強み n Internet分野の技術⼒を活⽤ • Internet(レイヤ4〜7)とWebの両⽅にまたがる技術であり、SIPの要素技術が多 く含まれる。 n 国内トップレベルの実績と知名度 • 初期(2012年)からWebRTCに取り組み、技術情報を発信してきた。 • SkyWayを始めとする様々なプロダクトを開発・運営し、技術を蓄積してきた。 • ⽇本初のWebRTCをテーマにしたカンファレンス “WebRTC Conference Japan”の発起⼈、実⾏委員⻑となり、16社の協賛を 集め、2015年2⽉に開催。2⽇間で延べ657名を動員。2016年2⽉に2回⽬のカ ンファレンスを開催予定。 5
  6. 6. Copyright © NTT Communications Corporation. All right reserved. NAT NAT Communications PaaS 「SkyWay」 6 n NTT Comが提供するWebRTCアプリ開発者向けプラットフォーム。 n 2013年12⽉5⽇に提供開始 n 2000以上のアプリで利⽤ STUN API Signaling API STUN API ライブラリ ライブラリ 開発者はPeer to Peer通信のプログラ ミングに専念できる SkyWayが シグナリングを 担うので、 ※なぜSkyWayのようなサービスが必要なのかは 後ほどご説明します。
  7. 7. Copyright © NTT Communications Corporation. All right reserved. SkyWayの採⽤事例 Webが窓⼝ 妻⿃通信⼯業 ビデオ通話による問い合せ機能を Webサイトに埋め込めるサービス 7 SkyWay Conference ⾦融⼤⼿ 社内向けWeb会議サービスに採⽤
  8. 8. Copyright © NTT Communications Corporation. All right reserved. SkyWayの採⽤事例 BestieBox NTTコミュニケーションズ グループ向けコミュニケーション アプリの無料ビデオ通話機能に採⽤ 8 gaccatzトライアル NTTドコモ ⼤規模公開オンライン講座サービスの 受講者を対象に、遠隔地の参加者をオ ンラインでつなぐグループワーク https://www.nttdocomo.co.jp/info/news_release/2015/08/25_01.html
  9. 9. Copyright © NTT Communications Corporation. All right reserved. WebRTC Conference Japan 9 開催概要 開催⽇: 2016年2⽉16⽇、17⽇ 会場: ソラシティカンファレンスセンター 参加費: 早期割引チケット 10,800円 主催: WebRTC Conference Japan実⾏委員会 Webサイト:http://webrtcconference.jp/ スポンサー、セッションスピーカー絶賛募集中です。
  10. 10. Copyright © NTT Communications Corporation. All right reserved. ここから本題、今⽇のゴール 最新技術として注⽬を集めているWebRTCについて • WebRTCの概要が正しく理解できている • WebRTCの概要について、皆様が社内等で共有でき るようになる • 次のパネル・ディスカッションが聞きたくなる 10
  11. 11. Copyright © NTT Communications Corporation. All right reserved. 今⽇のアジェンダ l HTML5の概要 l WebRTCの概要 l WebRTCの市場動向 l WebRTCの技術要素解説とWebRTCプラットフォームの紹介 l WebRTCの活⽤事例・応⽤事例 l デモンストレーション 11
  12. 12. 12Copyright © NTT Communications Corporation. All right reserved. HTML5の概要 HTML5はWebを アプリとして使うための技術
  13. 13. Copyright © NTT Communications Corporation. All right reserved. Webの誕⽣ Webは⽂書を作成、閲覧する技術として登場した。 13 1992 CERN 1993 NTT
  14. 14. Copyright © NTT Communications Corporation. All right reserved. Webアプリの誕⽣ Webがアプリとしても使われるようになったが、当初は ⽂書のための技術を「ハック※」してアプリを作っていた。 14 2004 Gmail 2005 Google Maps ※ここでは、ブラウザの機能を隅々まで熟知した技術者が、既存の機能を組み合わせて、 Webの新たな使い⽅を⽣み出したという意味。
  15. 15. Copyright © NTT Communications Corporation. All right reserved. HTML5の誕⽣と標準化 2004年、Apple, Mozilla, Operaが中⼼になり、 後に標準化団体のW3Cも参加して、 Webをアプリとして使うための技術※ = の仕様策定が始まった。 2014年10⽉28⽇、W3Cの正式勧告となった。 15 ※HTML5には様々な定義があるが、NTT Comでは上記のように定義している。
  16. 16. Copyright © NTT Communications Corporation. All right reserved. Webアプリ全盛期が到来 Webアプリが数多くのネイティブアプリ※を置き換えた。 16 Googleドキュメント (オフィス) BioDigital Human (教育) ※ここではインストールが必要なアプリの意。
  17. 17. Copyright © NTT Communications Corporation. All right reserved. Webアプリ全盛期が到来 Webアプリが数多くのネイティブアプリを置き換えた。 17 Googleマップ (3D地図) WebAudio Synth (⾳楽)
  18. 18. Copyright © NTT Communications Corporation. All right reserved. HTML5とネイティブアプリの⽐較 HTML5の⻑所 n インストール不要 (URLにアクセスするだけ) n マルチデバイス (ブラウザ搭載のあらゆるデバイスで動作する) HTML5の短所 n ⾼い処理能⼒を要求するアプリが苦⼿ 18 VS ネイティブアプリ Android iOS Windows Mac
  19. 19. Copyright © NTT Communications Corporation. All right reserved. HTML5の全体像 HTML5が提供する機能は多岐にわたる。NTT ComはWebRTCに特に注⽬。 19 引⽤元:http://www.slideshare.net/dynamis/web-standards-infographics
  20. 20. 20Copyright © NTT Communications Corporation. All right reserved. WebRTCの概要 WebRTCはブラウザでテレビ電話や ファイル交換を可能にする技術
  21. 21. Copyright © NTT Communications Corporation. All right reserved. 最も簡単な説明 ブラウザでテレビ電話を実現する技術 21
  22. 22. Copyright © NTT Communications Corporation. All right reserved. エンジニア向けの説明 1. ブラウザ間で直接通信ができる 2. ストリーミングデータを扱える 3. カメラとマイクを使える 22 従来のWeb WebRTC カメラやマイ クを利⽤可 ストリーミング データを扱える ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利⽤不可 サーバ サーバ
  23. 23. Copyright © NTT Communications Corporation. All right reserved. エンジニア向けの説明 1. ⾳声、映像、データのリアルタイム通信のオープン標準 • 従来のサービス(LINE、Skype等)は独⾃技術でできていた。 WebRTCはオープン標準、ライセンス使⽤料が不要。 • 中⾝は3つ。 ①⾳声と映像の形式(コーデック) ②ネットワーク機器(NAT等)を越えて直接通信する⼿順 ③暗号化、到達・順序保証、流量・輻輳制御を実現する プロトコル 2. ブラウザとネイティブアプリの両⽅で利⽤できる • WebRTC対応ブラウザにURLを⼊⼒するだけで、WebRTCを利⽤した サービスを利⽤できる。 • オープンソースのC++のコードを利⽤しコンパイルすれば、ネイティブ アプリにWebRTC機能を組み込むこともできる。 23
  24. 24. Copyright © NTT Communications Corporation. All right reserved. マーケティング的な説明 1. コミュニケーションアプリを容易に開発 • Facebook Messenger, ChatWork等のビデオ通話に採⽤ 2. アプリ内/サイト内で完結する⼀貫性のあるユーザ体験 • アプリやサイトにコミュニケーション機能を組み込みめる。 従来は、別デバイスや別アプリ(電話、Skype等)が必要だった。 3. サポートコストの削減、低ITリテラシ層の利⽤ • ブラウザで利⽤する場合、インストールが不要。 アプリで利⽤する場合、別アプリの併⽤が不要。 4. 家電、IoT分野の⼀部で活⽤できる • 映像や⾳声を扱う場合のプロトコルとして利⽤できる。 既にWebRTCを利⽤した家電も登場(右の写真)。 5. 電話との連携 • WebRTC⇔IP電話変換サーバを使えば、ブラウザで電話の 発着信が可能に。 Chromecast Withings Home
  25. 25. Copyright © NTT Communications Corporation. All right reserved. WebRTCの対応状況 25 *1: プラグインで対応可 *2: 2015年7⽉発売のWindows 10でObjectRTCの機能を⼀部サポート *3: Ericsson、Temasys等が推進する、オープンソースプロジェクト “WebRTC in WebKit” により、開発がほぼ完了 OS アプリ Windows Mac Android iOS Chrome ✔ ✔ ✔ ✘ Firefox ✔ ✔ ✔ IE ✘*1 Edge ✘*2 Safari ✘*1*3 ✘*3 ネイティブアプリ ✔ ✔ ✔ ✔
  26. 26. 26Copyright © NTT Communications Corporation. All right reserved. WebRTCの市場動向 WebRTCは今市場で注⽬されている技術
  27. 27. Copyright © NTT Communications Corporation. All right reserved. WebRTCの技術的な成熟度(Gartner Hype Cycleより) 27 引⽤元:Gartner Hype Cycle for Communications Service Provider Operations, 2015 n WebRTCは技術的な安定期まで2〜5年と分析されている。 流⾏期 世間の注⽬が⼤きくなり、過度の興奮と⾮現実的な 期待が⽣じることが多い。成功事例が出ることも多 いが、多くは失敗に終わる。 wikipediaより
  28. 28. Copyright © NTT Communications Corporation. All right reserved. WebRTCには既に多くのプレイヤーが参⼊ 28 n 欧⽶を中⼼に各適⽤分野に様々なプレイヤーが参⼊している。
  29. 29. 29Copyright © NTT Communications Corporation. All right reserved. WebRTCの市場動向 WebRTCが秘めるポテンシャル
  30. 30. Copyright © NTT Communications Corporation. All right reserved. WebRTCサポート端末のポテンシャル(Disruptive Analysisより) 30 引⽤元:http://disruptivewireless.bl ogspot.co.uk/p/bl og-page_30.html n 2019年には6000万台の端末がWebRTCを機能としてサポートする。 IoT分野での活⽤は今後確実に増えてくる ネイティブアプリとしてWebRTCの機能を組 み込みたいサービスプロバイダーが多い印象
  31. 31. Copyright © NTT Communications Corporation. All right reserved. WebRTC利⽤ユーザのポテンシャル(Disruptive Analysisより) 31 引⽤元:http://disruptivewireless.bl ogspot.co.uk/p/coming-soon-2014-webrtc.html n 2019年には2500万ユーザ(C向け)が利⽤する技術になる。
  32. 32. 32Copyright © NTT Communications Corporation. All right reserved. WebRTCの技術要素解説 導⼊の敷居は低いが 本気で使いこなすには難易度が⾼い
  33. 33. Copyright © NTT Communications Corporation. All right reserved. なぜ難易度が⾼いのか? ⼀部企業が独占してた技術がオープンになった WebRTCはかなり難易度が⾼い技術 少し具体的にご紹介します (説明する内容はWebRTC1.0前提です) 33
  34. 34. Copyright © NTT Communications Corporation. All right reserved. WebRTCの技術要素 n WebRTCには様々な技術が使われています。 • 1.シグナリング • 2.ICE • 3.P2Pによるセキュアなリアルタイム通信 • 4.⾳声、映像処理 34
  35. 35. Copyright © NTT Communications Corporation. All right reserved. シグナリング n 通信相⼿を識別、発⾒する仕組みを提供する 35 シグナリングサーバ (シグナリングは後述) WebRTCの場合 通信するユーザを 独⾃のID等で識 別・発⾒できる ・Aさん ・Bさん … 参考:電話の場合 電話番号で通信相⼿を 識別・発⾒できる Aさん 03-1234-1234
  36. 36. Copyright © NTT Communications Corporation. All right reserved. シグナリング n P2P通信に必要な情報を互いに交換する仕組みを提供する ・どのような仕組みを⽤いても良い ・独⾃ over WS/XHR ・SIP over WS/XHR ・XMPP over WS/XHR(BOSH) ・情報はSDPを⽤いて情報交換する ・テキストベースのプロトコル ・IPアドレス、ポート番号、 映像、⾳声コーデック情報 などを記載して交換する ・WebRTC独⾃の拡張が多く難解 36 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli
  37. 37. Copyright © NTT Communications Corporation. All right reserved. WebRTCの技術要素 n WebRTCには様々な技術が使われています。 • 1.シグナリング • 2.ICE • 3.P2Pによるセキュアなリアルタイム通信 • 4.⾳声、映像処理 37
  38. 38. Copyright © NTT Communications Corporation. All right reserved. ICE(Interactive Connectivity Establishment) n WebRTCクライアント同⼠がP2Pでネットワークを介し てつながるために必要な仕組みを提供する STUN ・⾃分のグローバルIP、 ポート番号を知る ・UDPホールパンチング(※後述)という 仕組みでNATに⽳を開ける為に利⽤ TURN ・どうしてもNATに⽳を開けら れない場合に、データ通信を 中継する仕組み ・WebRTCコネクション全体の 8〜9%はTURNが必要と ⾔われている(⽇本は50%ぐらいはTURN) 38 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli TURN サーバ
  39. 39. Copyright © NTT Communications Corporation. All right reserved. TURNの使いどころ n どうしてもNATに⽳があかない場合はTURNを利⽤する 39 互いのNAT Type フルコーン 制限付きフ ルコーン ポート制限 付きフル コーン シンメト リック フルコーン STUN STUN STUN STUN 制限付きフ ルコーン STUN STUN STUN STUN ポート制限 付きフル コーン STUN STUN STUN TURN シンメト リック STUN STUN TURN TURN ※NAT Typeは厳密に細分化すると9パターンあります。 よ り セ キ ュ ア よりセキュア
  40. 40. Copyright © NTT Communications Corporation. All right reserved. ICEを含むシグナリングフロー① 40 Aさん Bさん シグナリングサーバ STUNサーバ TURNサーバ ②STUNで IP/Portを収集 ③TURNで 割り当てられた IP/Portを収集 ④集取した候補を シグナリングサーバ経由で送信 ①ローカルの IP/Portを収集 n まず発信側(Aさん)にてICEで必要な情報を収集する ⑤Aさんの アドレス候補取得
  41. 41. Copyright © NTT Communications Corporation. All right reserved. ICEを含むシグナリングフロー ② 41 Aさん Bさん シグナリングサーバ STUNサーバ TURNサーバ ⑦STUNで IP/Portを収集 ⑧TURNで 割り当てられた IP/Portを収集 ⑨集取した候補を シグナリングサーバ経由で送信(応答) ⑥ローカルの IP/Portを収集 n シグナリングを受信したBさんにて、ICEにより同様の情報を収集する ⑤Aさんの アドレス候補取得 ⑩Bさんの アドレス候補取得
  42. 42. Copyright © NTT Communications Corporation. All right reserved. ICEを含むシグナリングフロー ③ 42 Aさん n お互いに⼊⼿したアドレス候補を利⽤して、接続試⾏する n 接続試⾏時には、UDPホールパンチング(※後述)を⽤いる Bさんのアドレス候補取得(優先度が⾼い順) ①ローカルIP(ex. 192.168.0.1) ②NAT後のIP(ex.100.0.0.1) ③TURNで割当ててもらったIP(ex.200.0.0.1) Bさん Aさんのアドレス候補取得(優先度が⾼い順) ①ローカルIP(ex. 172.16.0.1) ②NAT後のIP(ex.100.0.0.2) ③TURNで割当ててもらったIP(ex.200.0.0.1) ①でtry ①でtry ②でtry ②でtry ③でtry ③でtry
  43. 43. Copyright © NTT Communications Corporation. All right reserved. NAT NAT UDPホールパンチング 43 n 通信経路上にあるNATやFirewallで多くある動作として以下がある 1. 内から外への通信のみが許可されていることが多い 2. 外から内への通信は、内から外への通信があった場合(この際にNATやFirewall 上にマッピングができる、例えて⽳:ホールとも⾔われる)のみ許容される n UDPホールパンチングは上記の動作を考慮して、最初は接続が上⼿くいかなくても、 マッピングが出来れば、接続が成功するのを利⽤して、P2P接続を確⽴する技術 ①Bさん側にマッピングが ないため疎通NG Aさん Bさん ②Aさん側にマッピングが あるため疎通OK ③今回はBさん側に マッピングがあり疎通OK
  44. 44. Copyright © NTT Communications Corporation. All right reserved. WebRTCの技術要素 n WebRTCには様々な技術が使われています。 • 1.シグナリング • 2.ICE • 3.P2Pによるセキュアなリアルタイム通信 • 4.⾳声、映像処理 44
  45. 45. Copyright © NTT Communications Corporation. All right reserved. P2Pによるセキュアなリアルタイム通信 n すべての準備が整うとP2Pによる、セキュアな通信を開始 ・映像・⾳声(MediaChannel) ・セキュアなリアルタイム通信(SRTP) ・暗号化はAES(共通鍵暗号化) ・鍵交換にDTLSを⽤いる (DTLS-SRTP) ・データ(DataChannel) ・TCP同様の信頼性、到達順序性、 フロー制御、輻輳制御をUDP上で実現 ・セキュアなDTLS上で動作する (DTLS-SRTP) ・DTLS ・UDP上でTLSと同等の機能を提供 ・通信経路暗号化 ・データ整合性の保証 ・WebRTCでは認証⾏為は⾏わない(オレオレ証明書) 45 引⽤元:http://chimera.labs.oreilly.com/books/1230000000545/ch18.html
  46. 46. Copyright © NTT Communications Corporation. All right reserved. P2Pだけじゃない・・多対多の通信 n WebRTCはP2Pの通信が前提だが、ユースケースとしては多対 多も求められている。 46 フルメッシュでやる⽅法もあるが、端末への負荷がかかる 映像を送る場合、チューニングしても同時8つぐらいが限界
  47. 47. Copyright © NTT Communications Corporation. All right reserved. Aさんの映像 P2Pだけじゃない・・多対多の通信 n MCU(Multipoint Control Unit)を利⽤する。 47 MCU 各端末からのメディアを集約しミキシング、各端末に配信する。 サーバ側の負荷はエンコード、デコード処理が⼊るため負荷が⾼い。 Web会議等の⽤途に向いている。 各端末のメディアストリーム MCUでミキシング後のメディアストリーム Aさん の映像 Bさん の映像 Cさん の映像 Dさん の映像 Aさん の映像 Bさん の映像 Cさん の映像 Dさん の映像
  48. 48. Copyright © NTT Communications Corporation. All right reserved. P2Pだけじゃない・・多対多の通信 n SFU(Selective Forwarding Unit)を利⽤する。 48 配信端末からのストリームを配信先分だけコピーし配信する。 1⽅向のストリーミング配信などに向いている。 双⽅向で使えばMCU同様に複数⼈の会議も可能。 配信端末のメディアストリーム SFUで配信先分だけストリームを複製する Aさん の映像 Aさん の映像 Aさん の映像 Aさん の映像 Aさん の映像 SFU
  49. 49. Copyright © NTT Communications Corporation. All right reserved. WebRTCの技術要素 n WebRTCには様々な技術が使われています。 • 1.シグナリング • 2.ICE • 3.P2Pによるセキュアなリアルタイム通信 • 4.⾳声、映像処理 49
  50. 50. Copyright © NTT Communications Corporation. All right reserved. ⾳声・動画処理 n WebRTCクライアントはPCやデバイスの⾳声映像スト リームにアクセスできる(以下、Webブラウザの場合) ・getUserMedia(WebAPI) プラットフォーム上の ⾳声、映像ストリームを取得できる W3Cによって規定されたAPI ・ブラウザに実装された エンジンによって、 エンコード、デコード処理がなされる ・コーデック ・Video:VP8、H.264 ・Audio:Opus、G.711 PCMA & PCMU 50 デバイスハードウェア ⾳声処理エンジン コーデック ジッタ/パケロス補正 エコー除去 ノイズリダクション 映像処理エンジン コーデック ジッタ/パケロス補正 ⾳声・動画同期 画像補正 ⾳声キャプチャ 動画キャプチャ 内部WebRTC API WebAPI(W3C) 引⽤元:オライリー・ジャパン 「ハイパフォーマンスブラウザネットワーキング」 P.301
  51. 51. Copyright © NTT Communications Corporation. All right reserved. WebRTCプラットフォームを活⽤する WebRTCをビジネスで活⽤するには難易度が⾼い技術です。 構築だけでなく運⽤サポートにも相当のノウハウが必要。 そのために、WebRTCプラットフォームを活⽤することが ⼀般的です。 51
  52. 52. Copyright © NTT Communications Corporation. All right reserved. WebRTCプラットフォーム(フルスペック型) OpenTok tokbox SFUを利⽤した多対多配信が特徴 52 IceLINK frozen mountain 対応PFの多さやコーデックをカスタ マイズできることが特徴
  53. 53. Copyright © NTT Communications Corporation. All right reserved. WebRTCプラットフォーム(フルスペック型) SkyWay NTT Communications ⽇本企業で唯⼀のプラットフォーム サービス、トライアル中は無料 53
  54. 54. Copyright © NTT Communications Corporation. All right reserved. WebRTCプラットフォーム(業界特化型) Twillio twillio SIPとWebRTCを中継するSBC機能が 特徴 54 CafeX Cafex Communications LiveAssist等のWebRTC対応コンタ クトセンターソリューションを提供
  55. 55. Copyright © NTT Communications Corporation. All right reserved. WebRTCプラットフォーム(単機能型) PowerMedia XMS Dialogic ソフトウェアベースのMCUを提供 55 WebRTC SFU Sora 時⾬堂 1対多配信やIoT向けに特化したソフ トウェアベースのSFUを提供
  56. 56. 56Copyright © NTT Communications Corporation. All right reserved. WebRTCの活⽤事例・応⽤事例 WebRTCの適⽤分野は多岐にわたる
  57. 57. Copyright © NTT Communications Corporation. All right reserved. WebRTC活⽤事例・応⽤事例紹介 n WebRTCの可能性を知っていただくために5つの分野での活⽤事例 と、コンタクトセンタへの応⽤事例をご紹介します。 • カスタマサポート • Web会議 • オンライン学習 • IoT • CDN ---------- • コンタクトセンタ 57 ※尚、ここで取り上げる事例等は筆者が独⾃に調べたもので、内容を 保証するものではありません。
  58. 58. Copyright © NTT Communications Corporation. All right reserved. WebRTCの他社事例 ~カスタマサポート~ Maydayボタン Amazon ビデオ通話と画⾯共有を使って Kindle Fireタブレットの使い⽅を 教えてもらう 58 ネット保険デスク 楽天⽣命 ブラウザから、ビデオ通話またはテ キストチャットで⽣保の加⼊相談
  59. 59. Copyright © NTT Communications Corporation. All right reserved. WebRTCの他社事例 ~カスタマサポート~ Executive Support American Express 優良顧客向けのコンシェルジュサー ビスに導⼊(ipad apps) 59 Video Chat in Salesforce Service Cloud Salesforce CRMのカスタマーサポート機能とし てビデオチャット機能を提供
  60. 60. Copyright © NTT Communications Corporation. All right reserved. WebRTCの他社事例 ~Web会議~ 1click.io 1CLICK ウェブサイトのカスタマサポートの ⼿段として、お客様が閲覧中に1ク リックでカスタマサポートへ接続す るサービスを提供 60 ChatWork Live ChatWork ビジネス向けコミュニケーション ツール“ChatWork”のビデオ通話機能
  61. 61. Copyright © NTT Communications Corporation. All right reserved. WebRTCの他社事例 ~Web会議~ Skype for Web Microsoft SkypeのWeb版はRTC技術を利⽤し て提供 61 Google Hangout Google ビデオ通話機能はWebRTCを利⽤
  62. 62. Copyright © NTT Communications Corporation. All right reserved. WebRTCの他社事例 ~Web会議~ Firefox Hello Mozilla ビデオ通話機能はWebRTCを利⽤ 62 Facebook Messenger Facebook ビデオ通話機能はWebRTCを利⽤
  63. 63. Copyright © NTT Communications Corporation. All right reserved. WebRTCの他社事例 ~Web会議~ GoToMeeting Free Citrix ビジネス向けのWeb会議システム (無料版でWebRTCを利⽤) 63 https://free.gotomeeting.com/ appear.in appear.in Web会議システム
  64. 64. Copyright © NTT Communications Corporation. All right reserved. WebRTCの他社事例 ~オンライン学習~ ECCオンライン英会話 ECC WebRTCを活⽤したオンライン英会 話を実現 64 Zoen Zoen オンライン⾳楽レッスンサービスで、 先⽣・⽣徒間の⾳声映像配信を WebRTCで実現
  65. 65. Copyright © NTT Communications Corporation. All right reserved. WebRTCの他社事例 ~IoT&CDN~ 65 iCamPRO FHD Amaryllo WebRTC機能を備えたリモートカメ ラで、カメラの映像をWebRTCを 使って配信可能 フジテレビオンデマンド フジテレビ/MistTechnology 4K映像をユーザ同⼠で助けあって 分散ダウンロード
  66. 66. Copyright © NTT Communications Corporation. All right reserved. WebRTCの応⽤事例 n コンタクトセンタへのWebRTCの応⽤例 66 6666 # 形態 応⽤例 特徴 1 現在のコンタクトセンタ 2 Click to Call (Visual Naviの例) • コンタクトセンタ側は既存の構成のまま、お客さまにClick to Call という新たな利便性を提供できる。 • IVRの代わりにブラウザで情報を⼊⼒させることで、お客さまの操 作性を改善し、オペレータの対応を⾼度化できる。 3 ヴァーチャル・コンタクトセンタ • コンタクトセンタの電話機をブラウザに置き換えることで、構築期 間や初期投資を抑えられる。 4 Webコンタクトセンタ (1click.ioの例) • 2と3の特徴に加え、 • WebRTCのすべての機能を利⽤できる。 (テキストチャット、ビデオチャット、画⾯転送、ファイル転送等) • HTML5の他のAPIや、任意のWeb APIと組み合わられる。 (⾳声認識API、Googleマップ、Wikipedia等) WebRTC WebRTC 電話 電話 電話 WebRTC カスタマ カスタマ カスタマ カスタマ コンタクト センタ コンタクト センタ コンタクト センタ コンタクト センタ 次のページで詳しく紹介
  67. 67. Copyright © NTT Communications Corporation. All right reserved. WebRTCの応⽤事例 ~Click to Callの実現例~ 67 引⽤元:https://webrtchacks.com/webrtc-contact-center/
  68. 68. Copyright © NTT Communications Corporation. All right reserved. Click to Call【発信準備編】 1. 顧客はWeb PortalからCall要求を出す 2. Signaling Gatewayは顧客⽤のワンタ イム認証トークを払い出す 3. 顧客のブラウザ側ではWebRTCに繋ぐ ための初期化が実施される 4. WebからACDに待ち時間を問い合わせ て、返却値をWeb上に表⽰する(待っ ている間は映像を流したり⾊々出来 る) 5. 擬似IVRを経由して呼のキューイングを 指⽰し、ACDで待ち⾏列に⼊る 6. ACDで順番が来たら、エージェントを 決定しルーティング、同時にエージェ ントのURIを顧客に返却 68 引⽤元:https://webrtchacks.com/webrtc-contact-center/
  69. 69. Copyright © NTT Communications Corporation. All right reserved. Click to Call【発信編】 1. 顧客とエージェント両⽅が準備できた ら、顧客から発信する 2. Signaling GatewayにてMedia Gatewayのリソースを予約する 3. Signaling Gatewayはリソース予約が 完了した後、エージェントのSIP端末向 けにINVITEを送る(電話をかける) 4. エージェントから応答(200OK)が 返ってきたら、発信が受理されたこと を顧客に通知するとともに、エージェ ントにACKを返す 5. 顧客はMedia GatewayとSRTP/DTLS によるメディアのセッションを張る 6. Media Gatewayは暗号化を⼀度解いて、 RTPを取り出しエージェントのSIP端末 とセッションを張りメディアを転送 7. 通話が開始された後、顧客がブラウザ 情報をエージェントに共有することに 同意した場合は、Co-browseセッショ ンが張られ、顧客とエージェントで 様々な情報を共有することが可能にな る 69 引⽤元:https://webrtchacks.com/webrtc-contact-center/
  70. 70. 70Copyright © NTT Communications Corporation. All right reserved. デモンストレーション WebRTCは便利で⾯⽩い技術 ※公開資料では⼀部割愛させて頂きます。
  71. 71. Copyright © NTT Communications Corporation. All right reserved. 字幕付きボイスチャット • ⾳声認識機能を組み合わせ、通話内容をテキストで表⽰。 • 聴⼒が衰えた⽅向け、電⾞や会議中等の通話できない環境、議事録の⾃動作成、 安全な歩きスマホ等に適⽤可能。 • 現在はGoogle Chromeの⾳声認識APIを利⽤。SkyWay⾳声認識技術に移植中。 71 字幕付きボイスチャット 相⼿との通話内容が 吹き出し⾵に表⽰される https://skyway.io/example/caption-phone/ SkyWay 0.SkyWay でシグナリング 4.テキストを送受信 ⾳声認識 API ⾳声認識 API 2.⾳声を テキスト化 3.⾳声を送受信 1.話す 5.⾳声を再⽣ テキストを表⽰ デモ有
  72. 72. 72Copyright © NTT Communications Corporation. All right reserved. まとめ 今⽇のおさらい
  73. 73. Copyright © NTT Communications Corporation. All right reserved. まとめ l HTML5の概要 l HTML5はWebをアプリとして使うための技術 l WebRTCの概要 l WebRTCはブラウザでテレビ電話やファイル交換を可能にする技術 l WebRTCの市場動向 l WebRTCは今市場で注⽬されている技術 l WebRTCが秘めるポテンシャル l WebRTCの技術要素解説とWebRTCプラットフォームの紹介 l 導⼊の敷居は低い、本気で使いこなすには難易度が⾼い、それがWebRTC l WebRTCの活⽤事例 l WebRTCの適⽤分野は多岐にわたる l デモンストレーション l WebRTCは便利で⾯⽩い技術 73
  74. 74. Copyright © NTT Communications Corporation. All right reserved. 本⽇の公演内容やWebRTC/SkyWayでお困りのことがあれば NTTコミュニケーションズ 技術開発部 Webコア TU(Technical Unit) html5lab@ntt.com 74

×