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.

WebRTC入門+最新動向

16,180 views

Published on

第15回 HTML5+JS 勉強会 / WebRTC入門+最新動向 / ~本格的な普及が始まる前にマスターしておこう~

Published in: Internet
  • Be the first to comment

WebRTC入門+最新動向

  1. 1. Copyright © NTT Communications Corporation. All right reserved. 第15回  HTML5+JS 勉強会 WebRTC⼊入⾨門+最新動向 ~本格的な普及が始まる前にマスターしておこう~ NTTコミュニケーションズ株式会社 技術開発部 Webコア  Technical  Unit ⼤大津⾕谷 2015年年7⽉月
  2. 2. Copyright © NTT Communications Corporation. All right reserved. ⾃自⼰己紹介  /  ⼤大津⾕谷  亮亮祐(おおつや  りょうすけ) n  NTTコミュニケーションズの HTML5チームのリーダ n  WebRTCプラットフォーム “SkyWay”のプロダクトマネージャ n  WebRTC  Conference  Japan  幹事 n  神奈奈川県  葉葉⼭山町  在住 趣味は海と畑 2
  3. 3. Copyright © NTT Communications Corporation. All right reserved. 想定する聴講者 n  /WebRTCのことを (知らない|なんとなく知っているが)、 (ほとんど)?  書いたことがないWebエンジニア/ 3
  4. 4. Copyright © NTT Communications Corporation. All right reserved. 伝えたいこと n WebRTCは、もう、商⽤用でも使える。 n WebRTCは、個⼈人のキャリアにとっても、 会社のビジネスにとっても、武器になる。 4
  5. 5. 5Copyright © NTT Communications Corporation. All right reserved. WebRTCとは
  6. 6. Copyright © NTT Communications Corporation. All right reserved. リアルタイム・コミュニケーションの歴史 120年年の間、電話会社が リアルタイム・コミュニケーションを独占 6 www.flickr.com/photos/mattb_tv/2550476978
  7. 7. Copyright © NTT Communications Corporation. All right reserved. NapsterやSkype等のスーパーハッカーがインターネット でリアルタイム・コミュニケーションを実現、 電話会社とハッカーによる寡占が10年年続いた 7 www.flickr.com/photos/132889348@N07/18410514419
  8. 8. Copyright © NTT Communications Corporation. All right reserved. WebRTCによって、リアルタイム・コミュニケーションが 我々の⼿手に。 “リアルタイム・コミュニケーションの⺠民主化” 8 www.flickr.com/photos/tjflex/57210112
  9. 9. Copyright © NTT Communications Corporation. All right reserved. HTML5の全体像 n  WebRTCはHTMLのAPIの1つ。 9 www.slideshare.net/dynamis/html-‐‑‒2012
  10. 10. Copyright © NTT Communications Corporation. All right reserved. 上司向けの説明 ブラウザでテレビ電話を実現する技術 10
  11. 11. Copyright © NTT Communications Corporation. All right reserved. Webエンジニア向けの説明 n  ブラウザ間で直接通信ができる n  ストリーミングデータを扱える n  カメラとマイクを使える 11 従来のWeb WebRTC カメラやマイ クを利利⽤用可 ストリーミング データを扱える ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利利⽤用不不可 サーバ サーバ
  12. 12. Copyright © NTT Communications Corporation. All right reserved. エンジニア向けの説明 1.  ⾳音声、映像、データのリアルタイム通信のオープン標準 l  従来のサービス(LINE、Skype等)は独⾃自技術でできていた。 WebRTCはオープン標準、ライセンス使⽤用料料が不不要。 l  中⾝身は3つ。 ①⾳音声と映像の形式(コーデック) ②ネットワーク機器(NAT等)を越えて直接通信する⼿手順 ③暗号化、到達・順序保証、流流量量・輻輻輳制御を実現する   プロトコル 2.  ブラウザとネイティブアプリの両⽅方で利利⽤用できる l  WebRTC対応ブラウザにURLを⼊入⼒力力するだけで、WebRTCを利利 ⽤用したサービスを利利⽤用できる。 l  オープンソースのC++のコードを利利⽤用しコンパイルすれば、ネ イティブアプリにWebRTC機能を組み込むこともできる。 12
  13. 13. Copyright © NTT Communications Corporation. All right reserved. マーケティング的な説明 n  コミュニケーションアプリが作れる n  家電、IoT分野で、リアルタイム通信が 必要な場合に使える(右の写真) n  インストール不不要だから、サポートコストの 削減やITリテラシの低い層の利利⽤用が可能 n  アプリやWebに組み込めるので、 ⼀一貫性のあるユーザ体験が実現できる (例例:Skype英会話に適⽤用) n  電話との連携 Chromecast Withings  Home
  14. 14. Copyright © NTT Communications Corporation. All right reserved. WebRTCの対応状況 14 *1: プラグインで対応可 *2: 2015年年7⽉月発売のWindows  10で⼀一部サポート *3: Ericsson、Temasys等が推進する、オープンソースプロジェクト “WebRTC  in  WebKit”  により、開発がほぼ完了了 OS アプリ Windows Mac Android iOS ネイティブアプリ ✔ ✔ ✔ ✔ Chrome ✔ ✔ ✔ ✘ Firefox ✔ ✔ ✔ IE ✘*1 Edge ✘*2 Safari ✘*1*3 ✘*3
  15. 15. 15Copyright © NTT Communications Corporation. All right reserved. デモ
  16. 16. Copyright © NTT Communications Corporation. All right reserved. テレプレゼンス・ロボット n  ビデオ会議機能を備えた遠隔操作ロボット 16 Romo  by  Romotive www.romotive.jp 15,660 Double  by  Double  Robotics www.doublerobotics.com $2,499
  17. 17. Copyright © NTT Communications Corporation. All right reserved. イベント盛り上げ&質疑応答 n  2000⼈人規模のカンファレンス(HTML  Conference  2013)会場で スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰示 17 SkyWay SkyWayで シグナリング カメラの映像を WebRTCで送信 HTML5  JUMBOTRON jt.skyway.io
  18. 18. Copyright © NTT Communications Corporation. All right reserved. イベント盛り上げ&質疑応答 n  2000⼈人規模のカンファレンス(HTML  Conference  2013)会場で スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰示 18 SkyWay SkyWayで シグナリング カメラの映像を WebRTCで送信 HTML5  JUMBOTRON jt.skyway.io Windows, Mac, Android の Chrome, Firefox でアクセス is.gd/html5jt#0730
  19. 19. 19Copyright © NTT Communications Corporation. All right reserved. WebRTCの技術解説 www.slideshare.net/yusukenaka52/webrtcortc-‐‑‒50153479  を著者の許可を得て⼀一部改編
  20. 20. Copyright © NTT Communications Corporation. All right reserved. NAT越え 2020 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli ICE •  NAT越えの⼿手順 STUN •  ⾃自分のグローバルIP、 ポート番号を知る •  UDPホールパンチングという 仕組みでNATを越える TURN •  どうしてもNATを越えられ ない場合はサーバで中継する •  8〜~9%はTURNが必要 TURN サーバ
  21. 21. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 21 NAT STUN NAT ※後述するNAT Typeにより挙動が変わります
  22. 22. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 22 俺のグローバル IPとポート番号 教えて 111.111.111.111 50000番やで NAT STUN NAT ※後述するNAT Typeにより挙動が変わります
  23. 23. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 23 俺のグローバル IPとポート番号 教えて 222.222.222.222 20000番やで NAT STUN NAT IP:111.111.111.111 PORT:10000番 ※後述するNAT Typeにより挙動が変わります
  24. 24. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 24 NAT STUN NAT IP:111.111.111.111 PORT:10000番 IP:222.222.222.222 PORT:20000番 互いのIPとPORTを何 らかの⼿手段で交換 (シグナリング) ※後述するNAT Typeにより挙動が変わります
  25. 25. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 25 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 アクセスさせ てー! だめー。 ⽳穴開いた! ※後述するNAT Typeにより挙動が変わります
  26. 26. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 26 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 通れる!! アクセスさせてー。 ⽳穴開いた! ※後述するNAT Typeにより挙動が変わります
  27. 27. Copyright © NTT Communications Corporation. All right reserved. UDPホールパンチング 27 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 もしかして! 通れる! ※後述するNAT Typeにより挙動が変わります
  28. 28. Copyright © NTT Communications Corporation. All right reserved. TURNの使いどころ 28 どうしてもNATに⽳穴があかない場合はTURNを利利⽤用する 互いのNAT Type フルコーン 制限付きフ ルコーン ポート制限 付きフル コーン シンメト リック フルコーン STUN STUN STUN STUN 制限付きフ ルコーン STUN STUN STUN TURN ポート制限 付きフル コーン STUN STUN STUN TURN シンメト リック STUN TURN TURN TURN ※NAT Typeは厳密に細分化すると9パターンあります。 よ り セ キ ア よりセキュア ※もっと詳しく知りたい⽅方はこちら。 http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc
  29. 29. Copyright © NTT Communications Corporation. All right reserved. TURNリレー 29 シンメトリックNAT TURN シンメトリックNAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 TURNサーバを中継する (中継するだけなので通信の中⾝身はわからない) IP:11.11.11.11 PORT:443 IP:11.11.11.11 PORT:443 TCPで通信可能TCPで通信可能 FW FW TCP443か、怪しくないな! クライアントはP2Pのつもり
  30. 30. Copyright © NTT Communications Corporation. All right reserved. TURNを使っても通らない場合がある 30 シンメトリックNAT TURN シンメトリックNAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 IP:11.11.11.11 PORT:443 IP:11.11.11.11 PORT:443 Proxy Proxy おいおい、中⾝身が怪しいぞ! 例例えば、マイン・ザ・ミドル可能なProxyが存在する おいおい、中⾝身が怪しいぞ!
  31. 31. Copyright © NTT Communications Corporation. All right reserved. シグナリング 31 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli •  NAT越えに必要な情報を交換する仕組み •  プロトコルは定められていない SIP over WebSocket/XHR, XMPP over WebSocket/XHR, 独⾃自 over WebSocket/XHR等 •  情報の記述⽅方法は、SDPを⽤用いる と定められている
  32. 32. Copyright © NTT Communications Corporation. All right reserved. プロトコル・スタック n  UDPの上で温故知新 32 chimera.labs.oreilly.com/books/1230000000545/ch18.html#_̲real_̲time_̲network_̲transports シグナリング 映像、⾳音声 データ
  33. 33. 33Copyright © NTT Communications Corporation. All right reserved. WebRTCプラット フォームを利利⽤用する
  34. 34. Copyright © NTT Communications Corporation. All right reserved. NAT NAT SkyWay 34 n  NTT  Comが提供するWebRTCアプリ開発者向けプラットフォーム。 n  2013年年12⽉月5⽇日に提供開始 n  2000以上のアプリで利利⽤用 STUN API Signaling API STUN API ライブラリ ライブラリ 開発者はPeer to Peer通信のプログラ ミングに専念念できる SkyWayが シグナリングを 担うので、
  35. 35. Copyright © NTT Communications Corporation. All right reserved. SkyWayのサンプルコード n  シンプルなビデオチャットならわずか⼗十数⾏行行で記述できる。 35 1.  シグナリングサーバに接続する 4.  (受信側の処理理)  相⼿手からビデオが送られてきたら、⾃自分のビデオを相⼿手に送る 3.  (発信側の処理理)  ブラウザの発信ボタンがクリックされたら、⾃自分のビデオを相⼿手に送る 2.  カメラとマイクを起動し、⾃自分のビデオを表⽰示する 5.  相⼿手のビデオを表⽰示する github.com/nttcom/peerjs/tree/master/examples/videochat
  36. 36. Copyright © NTT Communications Corporation. All right reserved. SkyWayの機能⼀一覧 業界をリードするWebRTCプラットフォーム 36 分類 機能 説明 提供時期 API Basic シグナリング WebSocketとHTTPを併⽤用しP2P接続の確⽴立立を仲介 2013/12 NAT 越え STUN フルコーンNATに対し、UDPホールパンチングで NAT越えを実現 2013/12 Pro TURN UDPホールパンチングが不不可能な際に使⽤用するリ レーサーバ 2015/01 SDK/ ライブラリ Basic JavaScript SDK ブラウザで動作するWebアプリ向けSDK 2013/01 iOS/Android SDK iOS/Androidで動作するのネイティブアプリ向け SDK 2015/05 IE/Safariプラグイン 対応 WebRTC未対応のIE/SafariでもSkyWayを利利⽤用可能 にするTemasys社提供のブラウザプラグインに対応 2015/06 Pro ⾳音声認識識ライブラリ ⾳音声認識識(Speech-to-Text)を実現 2015/06 多⼈人数接続ライブラリ 多⼈人数フルメッシュ接続のビデオ会議アプリを容易易 に開発可能 2015/06 画⾯面共有ライブラリ 画⾯面共有機能を提供するライブラリおよびブラウザ 拡張機能 2015/06 ポータル Basic API設定変更更 APIキーの追加/削除、利利⽤用可能なドメインの追加/変 更更、TURN利利⽤用申請 2014/10 セキュリティ⽂文書 WebRTCのセキュリティ解説⽂文書をオープンソース 公開し企業でのWebRTC利利⽤用を促進 2015/06
  37. 37. 37Copyright © NTT Communications Corporation. All right reserved. WebRTCの事例例
  38. 38. Copyright © NTT Communications Corporation. All right reserved. Amazon  Mayday 38 www.youtube.com/watch?v=X40j57v5g6I
  39. 39. Copyright © NTT Communications Corporation. All right reserved. 楽天⽣生命  ネット保険デスク 39 www.rakuten-life.co.jp/videochat/
  40. 40. Copyright © NTT Communications Corporation. All right reserved. ChatWork Live 40 blog-ja.chatwork.com/2013/05/chatwork-live.html
  41. 41. Copyright © NTT Communications Corporation. All right reserved. MistCDN  /  フジテレビオンデマンド 41 fod.fujitv.co.jp/s/fodlabo/ 著作権に配慮
  42. 42. Copyright © NTT Communications Corporation. All right reserved. V-‐‑‒Sido n  ⼈人型ロボットを制御するミドルウェア 42 ぶ    し    ど    う www.asratec.co.jp/product/connect/webcon/
  43. 43. Copyright © NTT Communications Corporation. All right reserved. Romoでみつける!⼦子どもの表情(⽇日本科学未来館) n  遊び場の⼦子供の様⼦子を離離れた場所から⾒見見守る 43 www.miraikan.jst.go.jp/event/1503241118096.html
  44. 44. Copyright © NTT Communications Corporation. All right reserved. BestieBox n  グループ向けコミュニケーションアプリの 無料料ビデオ通話機能に採⽤用 44 506506.ntt.com/smp_ap/bestiebox/
  45. 45. 45Copyright © NTT Communications Corporation. All right reserved. WebRTCの最新動向
  46. 46. Copyright © NTT Communications Corporation. All right reserved. ORTC  /  Object  RTCとは n  現⾏行行のWebRTCを改善すべく提案されたもう⼀一つのRTC  API n  W3CのORTC(Object  Real-‐‑‒time  Communications)  Community  Groupで議論論 46 www.slideshare.net/yusukenaka52/webrtcortc-50153479
  47. 47. Copyright © NTT Communications Corporation. All right reserved. IE  /  Microsoft  Edgeは? n  Edgeはカメラ・マイクの利利⽤用(getUserMedia  API)に対応済み! ORTCも開発中! n  IEはダメっぽい。 47 dev.modern.ie/platform/status/
  48. 48. Copyright © NTT Communications Corporation. All right reserved. Safari n  EricssonとTemasysが、WebKitのWebRTC実装を⼿手伝っている 48
  49. 49. 49Copyright © NTT Communications Corporation. All right reserved. 最後に
  50. 50. Copyright © NTT Communications Corporation. All right reserved. 最後に WebRTCを使って 世界を変えるサービスを作ろう! 50

×