74
Copyright © NTT Communications Corporation. All right reserved. 注⽬の最新技術 「WebRTC」とは? 技術概要と事例紹介 NTTコミュニケーションズ株式会社 技術開発部 Webコア Technical Unit 仲裕介 2015/11/13 ※コールセンター/CRM デモ&コンファレンス2015 in 東京 講演資料

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

Embed Size (px)

Citation preview

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

Copyright © NTT Communications Corporation. All right reserved.

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

NTTコミュニケーションズ株式会社技術開発部Webコア Technical Unit仲裕介2015/11/13

※コールセンター/CRM デモ&コンファレンス2015 in 東京 講演資料

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

Copyright © NTT Communications Corporation. All right reserved.

⾃⼰紹介

• 仲 裕介(なかゆうすけ)

NTTコミュニケーションズ• 技術開発部 Webコアテクニカルユニット所属• Web/インフラエンジニア

仕事• SkyWay(WebRTCのプラットフォーム)の開発運⽤サポート• 技術メディア HTML5Experts.jp 副編集⻑

個⼈活動• WebRTC Meetup Tokyo/Japan 主催• WebRTCに関する技術者向け講演活動 等

2

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

Copyright © NTT Communications Corporation. All right reserved.

本題に⼊る前に・・・

3

なぜNTTコミュニケーションズはWebRTCに取り組むのか?

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

4Copyright © NTT Communications Corporation. All right reserved.

WebRTCは通信キャリアの強みを活かせる技術

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

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

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

Copyright © NTT Communications Corporation. All right reserved.

NA

T

NA

T

Communications PaaS 「SkyWay」

6

n NTT Comが提供するWebRTCアプリ開発者向けプラットフォーム。

n 2013年12⽉5⽇に提供開始n 2000以上のアプリで利⽤

STUNAPI

SignalingAPI

STUNAPI

ライブラリ ライブラリ

開発者はPeer to Peer通信のプログラミングに専念できる

SkyWayがシグナリングを

担うので、

※なぜSkyWayのようなサービスが必要なのかは後ほどご説明します。

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

Copyright © NTT Communications Corporation. All right reserved.

SkyWayの採⽤事例

Webが窓⼝妻⿃通信⼯業

ビデオ通話による問い合せ機能をWebサイトに埋め込めるサービス

7

SkyWay Conference⾦融⼤⼿

社内向けWeb会議サービスに採⽤

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

Copyright © NTT Communications Corporation. All right reserved.

SkyWayの採⽤事例

BestieBoxNTTコミュニケーションズ

グループ向けコミュニケーションアプリの無料ビデオ通話機能に採⽤

8

gaccatzトライアルNTTドコモ

⼤規模公開オンライン講座サービスの受講者を対象に、遠隔地の参加者をオ

ンラインでつなぐグループワーク

https://www.nttdocomo.co.jp/info/news_release/2015/08/25_01.html

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTC Conference Japan

9

開催概要

開催⽇: 2016年2⽉16⽇、17⽇

会場: ソラシティカンファレンスセンター

参加費: 早期割引チケット 10,800円

主催: WebRTC Conference Japan実⾏委員会

Webサイト:http://webrtcconference.jp/

スポンサー、セッションスピーカー絶賛募集中です。

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

Copyright © NTT Communications Corporation. All right reserved.

ここから本題、今⽇のゴール

最新技術として注⽬を集めているWebRTCについて

• WebRTCの概要が正しく理解できている

• WebRTCの概要について、皆様が社内等で共有できるようになる

• 次のパネル・ディスカッションが聞きたくなる

10

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

Copyright © NTT Communications Corporation. All right reserved.

今⽇のアジェンダ

l HTML5の概要

l WebRTCの概要

l WebRTCの市場動向

l WebRTCの技術要素解説とWebRTCプラットフォームの紹介

l WebRTCの活⽤事例・応⽤事例

l デモンストレーション

11

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

12Copyright © NTT Communications Corporation. All right reserved.

HTML5の概要

HTML5はWebをアプリとして使うための技術

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

Copyright © NTT Communications Corporation. All right reserved.

Webの誕⽣

Webは⽂書を作成、閲覧する技術として登場した。

13

1992CERN

1993NTT

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

Copyright © NTT Communications Corporation. All right reserved.

Webアプリの誕⽣

Webがアプリとしても使われるようになったが、当初は⽂書のための技術を「ハック※」してアプリを作っていた。

14

2004Gmail

2005Google Maps

※ここでは、ブラウザの機能を隅々まで熟知した技術者が、既存の機能を組み合わせて、Webの新たな使い⽅を⽣み出したという意味。

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

Copyright © NTT Communications Corporation. All right reserved.

HTML5の誕⽣と標準化

2004年、Apple, Mozilla, Operaが中⼼になり、後に標準化団体のW3Cも参加して、

Webをアプリとして使うための技術※ =

の仕様策定が始まった。2014年10⽉28⽇、W3Cの正式勧告となった。

15

※HTML5には様々な定義があるが、NTT Comでは上記のように定義している。

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

Copyright © NTT Communications Corporation. All right reserved.

Webアプリ全盛期が到来

Webアプリが数多くのネイティブアプリ※を置き換えた。

16

Googleドキュメント(オフィス)

BioDigital Human(教育)

※ここではインストールが必要なアプリの意。

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

Copyright © NTT Communications Corporation. All right reserved.

Webアプリ全盛期が到来

Webアプリが数多くのネイティブアプリを置き換えた。

17

Googleマップ(3D地図)

WebAudio Synth(⾳楽)

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

Copyright © NTT Communications Corporation. All right reserved.

HTML5とネイティブアプリの⽐較

HTML5の⻑所n インストール不要 (URLにアクセスするだけ)n マルチデバイス (ブラウザ搭載のあらゆるデバイスで動作する)

HTML5の短所n ⾼い処理能⼒を要求するアプリが苦⼿

18

VS

ネイティブアプリAndroid iOS Windows Mac

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

Copyright © NTT Communications Corporation. All right reserved.

HTML5の全体像

HTML5が提供する機能は多岐にわたる。NTT ComはWebRTCに特に注⽬。

19

引⽤元:http://www.slideshare.net/dynamis/web-standards-infographics

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

20Copyright © NTT Communications Corporation. All right reserved.

WebRTCの概要WebRTCはブラウザでテレビ電話やファイル交換を可能にする技術

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

Copyright © NTT Communications Corporation. All right reserved.

最も簡単な説明

ブラウザでテレビ電話を実現する技術

21

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

Copyright © NTT Communications Corporation. All right reserved.

エンジニア向けの説明

1. ブラウザ間で直接通信ができる2. ストリーミングデータを扱える3. カメラとマイクを使える

22

従来のWeb WebRTC

カメラやマイクを利⽤可

ストリーミングデータを扱える

ブラウザ間の直接通信

サーバ⇔クライアント間の通信

リクエストとレスポンスの

繰り返し

カメラやマイクの利⽤不可

サーバ サーバ

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

Copyright © NTT Communications Corporation. All right reserved.

エンジニア向けの説明

1. ⾳声、映像、データのリアルタイム通信のオープン標準• 従来のサービス(LINE、Skype等)は独⾃技術でできていた。

WebRTCはオープン標準、ライセンス使⽤料が不要。

• 中⾝は3つ。①⾳声と映像の形式(コーデック)②ネットワーク機器(NAT等)を越えて直接通信する⼿順③暗号化、到達・順序保証、流量・輻輳制御を実現する

プロトコル

2. ブラウザとネイティブアプリの両⽅で利⽤できる• WebRTC対応ブラウザにURLを⼊⼒するだけで、WebRTCを利⽤した

サービスを利⽤できる。• オープンソースのC++のコードを利⽤しコンパイルすれば、ネイティブ

アプリにWebRTC機能を組み込むこともできる。

23

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

Copyright © NTT Communications Corporation. All right reserved.

マーケティング的な説明

1. コミュニケーションアプリを容易に開発• Facebook Messenger, ChatWork等のビデオ通話に採⽤

2. アプリ内/サイト内で完結する⼀貫性のあるユーザ体験• アプリやサイトにコミュニケーション機能を組み込みめる。

従来は、別デバイスや別アプリ(電話、Skype等)が必要だった。

3. サポートコストの削減、低ITリテラシ層の利⽤• ブラウザで利⽤する場合、インストールが不要。

アプリで利⽤する場合、別アプリの併⽤が不要。

4. 家電、IoT分野の⼀部で活⽤できる• 映像や⾳声を扱う場合のプロトコルとして利⽤できる。

既にWebRTCを利⽤した家電も登場(右の写真)。

5. 電話との連携• WebRTC⇔IP電話変換サーバを使えば、ブラウザで電話の

発着信が可能に。

Chromecast

Withings Home

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

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

ネイティブアプリ ✔ ✔ ✔ ✔

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

26Copyright © NTT Communications Corporation. All right reserved.

WebRTCの市場動向WebRTCは今市場で注⽬されている技術

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

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より

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCには既に多くのプレイヤーが参⼊

28

n 欧⽶を中⼼に各適⽤分野に様々なプレイヤーが参⼊している。

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

29Copyright © NTT Communications Corporation. All right reserved.

WebRTCの市場動向WebRTCが秘めるポテンシャル

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

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の機能を組み込みたいサービスプロバイダーが多い印象

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

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向け)が利⽤する技術になる。

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

32Copyright © NTT Communications Corporation. All right reserved.

WebRTCの技術要素解説導⼊の敷居は低いが本気で使いこなすには難易度が⾼い

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

Copyright © NTT Communications Corporation. All right reserved.

なぜ難易度が⾼いのか?

⼀部企業が独占してた技術がオープンになったWebRTCはかなり難易度が⾼い技術

少し具体的にご紹介します(説明する内容はWebRTC1.0前提です)

33

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの技術要素

n WebRTCには様々な技術が使われています。

• 1.シグナリング

• 2.ICE

• 3.P2Pによるセキュアなリアルタイム通信

• 4.⾳声、映像処理

34

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

Copyright © NTT Communications Corporation. All right reserved.

シグナリング

n 通信相⼿を識別、発⾒する仕組みを提供する

35

シグナリングサーバ(シグナリングは後述)

WebRTCの場合通信するユーザを独⾃のID等で識別・発⾒できる

・Aさん・Bさん

参考:電話の場合

電話番号で通信相⼿を識別・発⾒できる

Aさん03-1234-1234

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

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

NA

T

NA

T

STUNサーバ

Signalingサーバ

STUNサーバ

WebRTC Cli WebRTC Cli

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの技術要素

n WebRTCには様々な技術が使われています。

• 1.シグナリング

• 2.ICE

• 3.P2Pによるセキュアなリアルタイム通信

• 4.⾳声、映像処理

37

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

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

NA

T

NA

T

STUNサーバ

Signalingサーバ

STUNサーバ

WebRTC Cli WebRTC Cli

TURNサーバ

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

Copyright © NTT Communications Corporation. All right reserved.

TURNの使いどころ

n どうしてもNATに⽳があかない場合はTURNを利⽤する

39

互いのNATType

フルコーン 制限付きフルコーン

ポート制限付きフルコーン

シンメトリック

フルコーン STUN STUN STUN STUN

制限付きフルコーン

STUN STUN STUN STUN

ポート制限付きフルコーン

STUN STUN STUN TURN

シンメトリック

STUN STUN TURN TURN

※NAT Typeは厳密に細分化すると9パターンあります。

よりセキュア

よりセキュア

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

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さんのアドレス候補取得

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

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さんの

アドレス候補取得

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

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

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

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

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの技術要素

n WebRTCには様々な技術が使われています。

• 1.シグナリング

• 2.ICE

• 3.P2Pによるセキュアなリアルタイム通信

• 4.⾳声、映像処理

44

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

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

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

Copyright © NTT Communications Corporation. All right reserved.

P2Pだけじゃない・・多対多の通信

n WebRTCはP2Pの通信が前提だが、ユースケースとしては多対多も求められている。

46

フルメッシュでやる⽅法もあるが、端末への負荷がかかる映像を送る場合、チューニングしても同時8つぐらいが限界

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

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さんの映像

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

Copyright © NTT Communications Corporation. All right reserved.

P2Pだけじゃない・・多対多の通信

n SFU(Selective Forwarding Unit)を利⽤する。

48

配信端末からのストリームを配信先分だけコピーし配信する。1⽅向のストリーミング配信などに向いている。双⽅向で使えばMCU同様に複数⼈の会議も可能。

配信端末のメディアストリーム

SFUで配信先分だけストリームを複製する

Aさんの映像

Aさんの映像Aさんの映像

Aさんの映像

Aさんの映像

SFU

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの技術要素

n WebRTCには様々な技術が使われています。

• 1.シグナリング

• 2.ICE

• 3.P2Pによるセキュアなリアルタイム通信

• 4.⾳声、映像処理

49

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

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

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCプラットフォームを活⽤する

WebRTCをビジネスで活⽤するには難易度が⾼い技術です。構築だけでなく運⽤サポートにも相当のノウハウが必要。そのために、WebRTCプラットフォームを活⽤することが

⼀般的です。

51

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCプラットフォーム(フルスペック型)

OpenToktokbox

SFUを利⽤した多対多配信が特徴

52

IceLINKfrozen mountain

対応PFの多さやコーデックをカスタマイズできることが特徴

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCプラットフォーム(フルスペック型)

SkyWayNTT Communications

⽇本企業で唯⼀のプラットフォームサービス、トライアル中は無料

53

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCプラットフォーム(業界特化型)

Twilliotwillio

SIPとWebRTCを中継するSBC機能が特徴

54

CafeXCafex Communications

LiveAssist等のWebRTC対応コンタクトセンターソリューションを提供

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCプラットフォーム(単機能型)

PowerMedia XMSDialogic

ソフトウェアベースのMCUを提供

55

WebRTC SFU Sora時⾬堂

1対多配信やIoT向けに特化したソフトウェアベースのSFUを提供

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

56Copyright © NTT Communications Corporation. All right reserved.

WebRTCの活⽤事例・応⽤事例WebRTCの適⽤分野は多岐にわたる

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTC活⽤事例・応⽤事例紹介

n WebRTCの可能性を知っていただくために5つの分野での活⽤事例と、コンタクトセンタへの応⽤事例をご紹介します。

• カスタマサポート

• Web会議

• オンライン学習

• IoT

• CDN----------• コンタクトセンタ

57

※尚、ここで取り上げる事例等は筆者が独⾃に調べたもので、内容を保証するものではありません。

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの他社事例 ~カスタマサポート~

MaydayボタンAmazon

ビデオ通話と画⾯共有を使ってKindle Fireタブレットの使い⽅を

教えてもらう

58

ネット保険デスク楽天⽣命

ブラウザから、ビデオ通話またはテキストチャットで⽣保の加⼊相談

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの他社事例 ~カスタマサポート~

Executive Support American Express

優良顧客向けのコンシェルジュサービスに導⼊(ipad apps)

59

Video Chat in Salesforce Service

CloudSalesforce

CRMのカスタマーサポート機能としてビデオチャット機能を提供

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの他社事例 ~Web会議~

1click.io1CLICK

ウェブサイトのカスタマサポートの⼿段として、お客様が閲覧中に1クリックでカスタマサポートへ接続す

るサービスを提供

60

ChatWork LiveChatWork

ビジネス向けコミュニケーションツール“ChatWork”のビデオ通話機能

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの他社事例 ~Web会議~

Skype for WebMicrosoft

SkypeのWeb版はRTC技術を利⽤して提供

61

Google HangoutGoogle

ビデオ通話機能はWebRTCを利⽤

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの他社事例 ~Web会議~

Firefox HelloMozilla

ビデオ通話機能はWebRTCを利⽤

62

Facebook MessengerFacebook

ビデオ通話機能はWebRTCを利⽤

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの他社事例 ~Web会議~

GoToMeeting FreeCitrix

ビジネス向けのWeb会議システム(無料版でWebRTCを利⽤)

63

https://free.gotomeeting.com/

appear.inappear.in

Web会議システム

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの他社事例 ~オンライン学習~

ECCオンライン英会話ECC

WebRTCを活⽤したオンライン英会話を実現

64

ZoenZoen

オンライン⾳楽レッスンサービスで、先⽣・⽣徒間の⾳声映像配信を

WebRTCで実現

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの他社事例 ~IoT&CDN~

65

iCamPRO FHDAmaryllo

WebRTC機能を備えたリモートカメラで、カメラの映像をWebRTCを

使って配信可能

フジテレビオンデマンドフジテレビ/MistTechnology

4K映像をユーザ同⼠で助けあって分散ダウンロード

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの応⽤事例

n コンタクトセンタへのWebRTCの応⽤例

666666

# 形態 応⽤例特徴

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

カスタマ

カスタマ

カスタマ

カスタマ

コンタクトセンタ

コンタクトセンタ

コンタクトセンタ

コンタクトセンタ

次のページで詳しく紹介

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

Copyright © NTT Communications Corporation. All right reserved.

WebRTCの応⽤事例 ~Click to Callの実現例~

67

引⽤元:https://webrtchacks.com/webrtc-contact-center/

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

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/

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

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/

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

70Copyright © NTT Communications Corporation. All right reserved.

デモンストレーションWebRTCは便利で⾯⽩い技術

※公開資料では⼀部割愛させて頂きます。

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

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.⾳声を再⽣テキストを表⽰

デモ有

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

72Copyright © NTT Communications Corporation. All right reserved.

まとめ今⽇のおさらい

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

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

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

Copyright © NTT Communications Corporation. All right reserved.

本⽇の公演内容やWebRTC/SkyWayでお困りのことがあれば

NTTコミュニケーションズ 技術開発部Webコア TU(Technical Unit)

[email protected]

74