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.

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

1,927 views

Published on

CEDEC2015でのWebRTCの講演資料

Published in: Technology

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

  1. 1. Copyright © NTT Communications Corporation. All rights reserved. ビデオ通話・P2Pがコモディティ化する世界 WebRTCによるこれからを探る NTTコミュニケーションズ株式会社     技術開発部  Webコアテクニカルユニット   Webアプリケーションエバンジェリスト     ⼩小松健作
  2. 2. Copyright © NTT Communications Corporation. All rights reserved. ⾃自⼰己紹介 2 • ⼩小松健作 • NTTコミュニケーションズ • 技術開発部 • Webアプリケーションエバンジェリスト • 最新Web技術の研究開発に従事 • WebRTC(SkyWay) • 標準化活動(W3C) • コミュニティ活動 • html5j スタッフ • Google Developer Expert(HTML5)
  3. 3. Copyright © NTT Communications Corporation. All rights reserved. 7 WebRTC
 in  nutshell
  4. 4. Copyright © NTT Communications Corporation. All rights reserved. WebRTCとは? • Web  Real  Time  Communication   -‐‑‒  Webでリアルタイム通信を⾏行行うための機能   -‐‑‒  ブラウザでテレビ会議サービスを簡単に作れるようになる   -‐‑‒  P2Pのデータ通信も可能 8
  5. 5. Copyright © NTT Communications Corporation. All rights reserved. WebRTC  Sample  Demo  (by  Google) 9 https://apprtc.appspot.com/
  6. 6. Copyright © NTT Communications Corporation. All rights reserved. 6 Simple p2p bomberman sample w/ WebRTC http://komasshu-skyway-sample.github.io/p2p-bomberman/src/
  7. 7. Copyright © NTT Communications Corporation. All rights reserved. 本⽇日のアジェンダ 6 • WebRTCの最新事情として   • 市場動向   • 技術仕様 • SkyWay • ゲーム関連ユースケース   を紹介
  8. 8. Copyright © NTT Communications Corporation. All rights reserved. 本⽇日のアジェンダ 6 • WebRTCの最新事情として   • 市場動向   • 技術仕様 • SkyWay • ゲーム関連ユースケース   を紹介
  9. 9. Copyright © NTT Communications Corporation. All rights reserved. 10 Status
 of  the
 Market
  10. 10. Copyright © NTT Communications Corporation. All rights reserved. The  WebRTC  Landscape  Infographic–June  2014  
 by  CIO2CMO   12
  11. 11. Copyright © NTT Communications Corporation. All rights reserved. The  WebRTC  Landscape  Infographic–June  2014  
 by  CIO2CMO  (cont.) 13
  12. 12. Copyright © NTT Communications Corporation. All rights reserved. The  WebRTC  Landscape  Infographic–June  2014  
 by  CIO2CMO  (cont.) 14
  13. 13. Copyright © NTT Communications Corporation. All rights reserved. 15 Target
 service
 model
  14. 14. Copyright © NTT Communications Corporation. All rights reserved. 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アプリやモバイルアプリに映像⾳音声通信機能 が組み込まれていくようになる。これにより、関係するデータやビジネスプロセ スと映像⾳音声通信とを密接につなげることができるようになるところをポイント として置いている。
  15. 15. Copyright © NTT Communications Corporation. All rights reserved. Why? 16 ・標準化により、ブラウザ, Native ともに気軽に利用可能 ・CPaaS サービスを利用することで手軽にシステム構築可能
  16. 16. Copyright © NTT Communications Corporation. All rights reserved. したがって、WebRTCのカジュアルなマッシュアップが可能に 17 What?
  17. 17. Copyright © NTT Communications Corporation. All rights reserved. 先⾏行行事例例(カスタマーサポート) 18 • Amazon  Mayday  :  Kindle  Fireのカスタマーサービスとして、 サポートセンター接続を提供   • AMEX:Executive  カスタマー専⽤用サポートアプリ(iPadで提 供)に、コンシェルジュ接続を提供   • Salesforce:CRMのカスタマーサポート機能として、ビデオ チャットを提供 Amazon Mayday Video Chat in Salesforce Service Cloud
  18. 18. Copyright © NTT Communications Corporation. All rights reserved. 先⾏行行事例例(OTT) 19
  19. 19. Copyright © NTT Communications Corporation. All rights reserved. 先⾏行行事例例(NTTグループ) 19 http://www.bestiebox.net/ http://gacco.org/ 10/24 トライアル実施
  20. 20. Copyright © NTT Communications Corporation. All rights reserved. 20 Analysis  for
 Potential
  21. 21. Copyright © NTT Communications Corporation. All rights reserved. Potential  WebRTC  users 21 http://disruptive-analysis.com/webrtc.htm
  22. 22. Copyright © NTT Communications Corporation. All rights reserved. Enterprise  adoption  of  WebRTC 22 http://disruptivewireless.blogspot.co.uk/p/blog-page_30.html
  23. 23. Copyright © NTT Communications Corporation. All rights reserved. WebRTC  supporting  devices 23 http://disruptivewireless.blogspot.co.uk/p/blog-page_30.html
  24. 24. Copyright © NTT Communications Corporation. All rights reserved. 本⽇日のアジェンダ 6 • WebRTCの最新事情として   • 市場動向   • 技術仕様 • SkyWay • ゲーム関連ユースケース   を紹介
  25. 25. Copyright © NTT Communications Corporation. All rights reserved. WebRTCとは? 52 ひとことで⾔言うと「ブラウザでテレビ電話を実現する技術」   ブラウザだけで、プラグインのインストール無しに、Web会議、ボ イスチャット、テキストチャット、ファイル転送、電話との連携 等が実現可能。 従来のWeb WebRTC カメラやマイ クを利利⽤用可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利利⽤用不不可 サーバ サーバ
  26. 26. Copyright © NTT Communications Corporation. All rights reserved. シグナリング 71 STUN サーバ Signaling サーバ STUN
 サーバ WebRTC Cli WebRTC Cli ICEの仕組み等を利利⽤用して取得した情報を、互いに交換する仕組み   ・どのような仕組みを⽤用いても良良い     ・WebSocket(主流流)     ・XHRロングポーリング   ・情報はSDPを⽤用いて情報交換する     ・テキストベースのプロトコル     ・IPアドレス、ポート番号、       映像、⾳音声コーデック情報       などを記載して交換する     ・めちゃくちゃ難解
  27. 27. Copyright © NTT Communications Corporation. All rights reserved. ICE(Interactive  Connectivity  Establishment) 5858 STUN サーバ Signaling サーバ STUN
 サーバ WebRTC Cli WebRTC Cli WebRTCクライアント同⼠士がP2Pでネットワークを介してつながるために必要な仕組みを提供す る   STUN     ・⾃自分のグローバルIP、       ポート番号を知る     ・UDPホールパンチングという       仕組みでNATに⽳穴を開ける     ・NATの種類を判定       (WebRTCでは使ってない)   TURN     ・どうしてもNATに⽳穴を開けら       れない場合に、データ通信を       中継する仕組み     ・WebRTCコネクション全体の       8〜~9%はTURNが必要と       ⾔言われている(⽇日本はもっと多いかも) TURN サーバ
  28. 28. Copyright © NTT Communications Corporation. All rights reserved. TURNの使いどころ 66 どうしてもNATに⽳穴があかない場合はTURNを利利⽤用する 互いのNAT Type フルコーン 制限付きフル コーン ポート制限付 きフルコーン シンメトリッ ク フルコーン STUN STUN STUN STUN 制限付きフル コーン STUN STUN STUN TURN ポート制限付 きフルコーン STUN STUN STUN TURN シンメトリッ ク STUN TURN TURN TURN ※厳密に細分化すると9パターンあります。 よりセキュア よりセキュア
  29. 29. Copyright © NTT Communications Corporation. All rights reserved. P2Pによるセキュアなリアルタイム通信 7373 すべての準備が整うとP2Pによる、セ キュアな通信を開始   ・映像・⾳音声       ・セキュアなリアルタイム通信(SRTP)     ・AES(共通鍵暗号化)     ・鍵交換にDTLSを⽤用いる(DTLS-SRTP)   ・データ       ・TCP同様の信頼性、到達順序性、       フロー制御、輻輻輳制御をUDP上で実現     ・セキュアなDTLS上で動作する   ・DTLS     ・通信経路路暗号化     ・データ整合性の保証     ・認証⾏行行為は⾏行行わない(オレオレ証明書) STUN サーバ Signaling サーバ STUN
 サーバ WebRTC Cli WebRTC Cli IP UDP SCTPSRTP DTLS ⾳音声・映像 データ
  30. 30. Copyright © NTT Communications Corporation. All rights reserved. ⾳音声・動画処理理 75 WebRTCクライアントはPCやデバイスの⾳音声映像ストリームにアクセスでき る(以下、Webブラウザの場合)   ・getUserMedia(WebAPI)     プラットフォーム上の     ⾳音声、映像ストリームを取得できる     W3Cによって規定されたAPI   ・ブラウザに実装された     エンジンによって、     エンコード、デコード処理理がなされる   ・コーデック     ・Video:VP8、H.264     ・Audio:Opus、G.711 PCMA & PCMU デバイスハードウェア ⾳音声処理理エンジン コーデック ジッタ/パケロス補正 エコー除去 ノイズリダクション 映像処理理エンジン コーデック ジッタ/パケロス補正 ⾳音声・動画同期 画像補正 ⾳音声キャプチャ 動画キャプチャ 内部WebRTC API WebAPI(W3C) 引⽤用元:オライリー・ジャパン         「ハイパフォーマンスブラウザネットワーキング」 P.301
  31. 31. Copyright © NTT Communications Corporation. All rights reserved. 本⽇日のアジェンダ 6 • WebRTCの最新事情として   • 市場動向   • 技術仕様 • SkyWay • ゲーム関連ユースケース   を紹介
  32. 32. Copyright © NTT Communications Corporation. All rights reserved. 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
  33. 33. Copyright © NTT Communications Corporation. All rights reserved. 33 提供機能 トライアルサービスに付き、無料で利用できます
  34. 34. Copyright © NTT Communications Corporation. All rights reserved. 34 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社のフリープラグインを利用
  35. 35. Copyright © NTT Communications Corporation. All rights reserved. 35 Multi  Party  library https://github.com/nttcom/SkyWay-MultiParty https://html5experts.jp/sakkuru/16397/
  36. 36. Copyright © NTT Communications Corporation. All rights reserved. 36 ⾳音声認識識 https://nttcom.github.io/SkyWay-SpeechRec/ https://html5experts.jp/iwase/16439/
  37. 37. Copyright © NTT Communications Corporation. All rights reserved. 本⽇日のアジェンダ 6 • WebRTCの最新事情として   • 市場動向   • 技術仕様 • SkyWay • ゲーム関連ユースケース   を紹介
  38. 38. Copyright © NTT Communications Corporation. All rights reserved. 38 https://www.cubeslam.com/ Cube  Slam
  39. 39. Copyright © NTT Communications Corporation. All rights reserved. テレプレゼンス・ロボット 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アプリか
 ブラウザを利利⽤用。
  40. 40. Copyright © NTT Communications Corporation. All rights reserved. SkyWay  Driving  Vehicle 34 https://www.youtube.com/watch?v=oO-WjCKX9LY
  41. 41. Copyright © NTT Communications Corporation. All rights reserved. 41 https://github.com/nttcom/SkyWay-DrivingVehicle SkyWay  Driving  Vehicleのソースコード、githubで公開!
  42. 42. もっとWoT/IoTな世界へ Demo: WebRTC on Raspberry PI
  43. 43. かるーくアーキテクチャ シグナリング Audio/ Video
  44. 44. 詳しくは今夜 渋谷にて http://eventdots.jp/event/568004
  45. 45. Copyright © NTT Communications Corporation. All rights reserved. Summary 6 • WebRTCの最新事情として   • 市場動向  ・・・  サービスへの組み込み   • 技術仕様 ・・・ 様々な技術の組み合わせ • SkyWay ・・・ NTTコムが提供するCPaaS • ゲーム関連ユースケース   を紹介しました。
  46. 46. Copyright © NTT Communications Corporation. All rights reserved. 96 Thank  you!!   html5-‐‑‒ia@ntt.com  

×