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/ORTC

3,587 views

Published on

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

  • Dating for everyone is here: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/2F4cEJi ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

はじめてのWebRTC/ORTC

  1. 1. Copyright © NTT Communications Corporation. All rights reserved. HTML5 Conference 2015 in ⿅児島 はじめてのWebRTC/ORTC NTTコミュニケーションズ株式会社 技術開発部 仲 裕介
  2. 2. Copyright © NTT Communications Corporation. All rights reserved. ⾃⼰紹介 1 uなかゆうすけ(@Tukimikage) l NTTコミュニケーションズ 技術開発部 所属 Ø 主にWebエンジニア l コミュニティ活動 Ø WebRTC Meetup Tokyo主催 http://webrtcjp.info/
  3. 3. Copyright © NTT Communications Corporation. All rights reserved. ⾃⼰紹介 2 u 仕事その1 WebRTC開発者向けプラットフォームSkyWayの開発・運営 ・2013年12⽉5⽇に提供開始 ・詳しくは後ほど! https://skyway.io
  4. 4. Copyright © NTT Communications Corporation. All rights reserved. ⾃⼰紹介 3 u 仕事その2 HTML5 Experts.jpの運営 ・HTML5に特化した Web技術者向け情報メディア ・⽇本最⾼峰のWebエキスパート、 コントリビューターによる情報発信 ・コントリビューター(寄稿者)募集! https://html5experts.jp/
  5. 5. Copyright © NTT Communications Corporation. All rights reserved. 今⽇のセッションのゴール 4 • 最新Web技術として注⽬を集めている WebRTC/ORTCに興味を持ってもらう。 • WebRTCは様々なシーンで活⽤できそうだという期待 感を持ってもらう。
  6. 6. Copyright © NTT Communications Corporation. All rights reserved. 想定聴者 • WebRTC/ORTCは初⽿な⽅ • WebRTCを利⽤したアプリ開発をやってみたいと考え ている、もしくはやっている⼈ • WebRTCについてはかなり深い部分まで理解してる 5
  7. 7. Copyright © NTT Communications Corporation. All rights reserved. 本⽇のアジェンダ 6 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
  8. 8. Copyright © NTT Communications Corporation. All rights reserved. 7 HTML5の全体像 HTML5が提供する機能は多岐にわたる。WebRTCはその⼀つの技術。 引⽤元:http://www.slideshare.net/dynamis/web-standards-infographics
  9. 9. Copyright © NTT Communications Corporation. All rights reserved. 8 WebRTCとは(概要) ひとことで⾔うと「ブラウザでテレビ電話を実現する技術」 ブラウザだけで、プラグインのインストール無しに、Web会議、 ボイスチャット、テキストチャット、ファイル転送、電話との連 携等が実現可能。 従来のWeb WebRTC カメラやマイ クを利⽤可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利⽤不可 サーバ サーバ
  10. 10. Copyright © NTT Communications Corporation. All rights reserved. 9 WebRTCとは(技術⾯) 技術的には2つの側⾯がある。 1.⾳声、映像、データのリアルタイム・コミュニケーションのオープン標準 l 従来のサービス(WebEx、Skype等)は互換性がなく、独⾃技術を含む。 WebRTCは相互接続が保証され、ライセンス使⽤料が不要。 1.ブラウザとネイティブアプリの両⽅で利⽤できる l 例えば、オープンソースのC++のコードを利⽤しコンパイルすれば、ネイティ ブアプリにWebRTC機能を組み込むこともできる。
  11. 11. Copyright © NTT Communications Corporation. All rights reserved. WebRTCのクライアント対応状況 10 対応状況 OS アプリ 備考(2015/7/4現在) ✔ Windows Chrome ✔ Windows Firefox テレビ電話機能も搭載 ✔ Windows IE プラグインが必要 ✘ Windows Edge 2014年10⽉に開発着⼿を発表 ORTCが実装される予定 2015年7⽉段階では⼀部機能の み実装(getUserMedia) ✔ Windows ネイティブ 要コンパイル ✔ Mac Chrome ✔ Mac Firefox テレビ電話機能も搭載 ✔ Mac Safari プラグインが必要 ✔ Mac ネイティブ 要コンパイル ✔ Android Chrome ✔ Android Firefox ✔ Android 標準ブラウザ Android 5.0で対応 ✔ Android ネイティブ 要コンパイル ✘ iOS Chrome ✘ iOS Safari ✔ iOS ネイティブ 要コンパイル
  12. 12. Copyright © NTT Communications Corporation. All rights reserved. 本⽇のアジェンダ 11 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
  13. 13. Copyright © NTT Communications Corporation. All rights reserved. コンシューマ向けWeb会議 12 • インストール不要、認証も不要、URLにアクセスするだけで開始。 • ビデオの場合は8⼈まで、オーディオのみの場合は 20⼈までの、グループチャットに対応。 SkyWaySkyWayで シグナリング WebRTCでメッシュ状に接続し、 マイク⾳声、カメラ映像を すべての相⼿に送信 WebRTC Chat on SkyWay https://chat.skyway.io デモ有
  14. 14. Copyright © NTT Communications Corporation. All rights reserved. 13 • 資料共有機能も簡単 (利⽤時はプラグイン/エクステンション導⼊が必要) スクリーンシェア デモ有
  15. 15. Copyright © NTT Communications Corporation. All rights reserved. Click to Call 14 • ゲートウェイでWebRTC⇔VoIPを変換することにより、ブラウザからコンタクト センタに電話がかけられる。 • 電話をかける前の、ログイン情報、ページ遷移、⼊⼒情報などをオペレータのWebブラウザで確認 できる。(IVRの⾼度化) • 通話中や通話終了後に、テキストや画像のやりとりができる。 ゲートウェイ WebRTCと VoIPを変換 WebRTC ブラウザ SIP+RTP IP電話網 固定電話網 電話 回線 コンタクトセンタ 電話機 (既存) ブラウザ Internet等 データ中継サーバ カスタマ ブラウザの 情報を中継
  16. 16. Copyright © NTT Communications Corporation. All rights reserved. 1click.io : カスタマサポートの新規チャネル 15 • ウェブサイトのカスタマサポートの⼿段として、 お客様が閲覧中に1クリックでカスタマサポートへ接続する • (前⾴の4の例) https://1click.io/
  17. 17. Copyright © NTT Communications Corporation. All rights reserved. 字幕付きボイスチャット 16 • ⾳声認識機能を組み合わせ、通話内容をテキストで表⽰。 • 電⾞や会議中等の通話できない環境、議事録の⾃動作成、安全な歩きスマホ等に適⽤ 可能。 • ⾳声⇛テキスト変換はGoogle Chromeの⾳声認識APIを利⽤。 字幕付きボイスチャット 相⼿との通話内容が吹き出し⾵に表⽰される https://skyway.io/example /caption-phone/ SkyWay 0.SkyWay でシグナリング 4.テキストを送受信 ⾳声認識 API ⾳声認識 API 2.⾳声を テキスト化 3.⾳声を送受信 1.話す 5.⾳声を再⽣ テキストを表⽰ デモ有
  18. 18. Copyright © NTT Communications Corporation. All rights reserved. テレプレゼンス・ロボット 17 • ビデオ会議機能を備えた遠隔操作ロボット。 • 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アプリか ブラウザを利⽤。
  19. 19. Copyright © NTT Communications Corporation. All rights reserved. ROMO TURISMO 18 https://www.youtube.com/watch?v=oO-WjCKX9LY
  20. 20. Copyright © NTT Communications Corporation. All rights reserved. Skype for Web 19 • Skype for Webのβ版が 2015/6/15 から提供開始(そのうちORTCに?) • SkypeもNativeクライアントが不要になった https://web.skype.com/ja/
  21. 21. Copyright © NTT Communications Corporation. All rights reserved. Facebook ビデオチャット 20 • FacebookにもWebRTCを利⽤したビデオチャット機能が実装されている デモ有
  22. 22. Copyright © NTT Communications Corporation. All rights reserved. Zoen:オンライン⾳楽レッスンサービス 21 • 先⽣〜⽣徒間の⾳声映像通信をWebRTCで実現 https://www.thezoen.com/
  23. 23. Copyright © NTT Communications Corporation. All rights reserved. iCam: WebRTCの監視カメラ 22 • WebRTC機能を備えた監視カメラ • WebRTCを利⽤できる機器なら何でも遠隔で閲覧できる http://www.amaryllo.eu/
  24. 24. Copyright © NTT Communications Corporation. All rights reserved. スマホで撮った多数の映像を表⽰ 23 • 2000⼈規模のカンファレンス(HTML Conference 2013)会場で スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰した。 SkyWay SkyWayで シグナリング カメラの映像を WebRTCで送信 HTML5 JUMBOTRON jt.skyway.io デモ有
  25. 25. Copyright © NTT Communications Corporation. All rights reserved. スマホで撮った多数の映像を表⽰ 24 • 2000⼈規模のカンファレンス(HTML Conference 2013)会場で スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰した。 デモ有 http://is.gd/html5jt#0100 Chrome、Firefox(PC・Android限定)でアクセス!
  26. 26. Copyright © NTT Communications Corporation. All rights reserved. MistCDN 25 ・ブラウザ間でコンテンツをシェアするCDNサービス ・WebRTCのdata channelを利⽤している https://www.mist-t.co.jp/#demo デモ有
  27. 27. Copyright © NTT Communications Corporation. All rights reserved. 本⽇のアジェンダ 26 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
  28. 28. Copyright © NTT Communications Corporation. All rights reserved. WebRTC技術の全容 27 https://www.flickr.com/photos/noaaphotolib/5041457573
  29. 29. Copyright © NTT Communications Corporation. All rights reserved. WebRTC技術の全容 28 まずは、海の上に出ている部分を理解 しましょう。
  30. 30. Copyright © NTT Communications Corporation. All rights reserved. WebRTCの技術要素 29 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
  31. 31. Copyright © NTT Communications Corporation. All rights reserved. ICE(Interactive Connectivity Establishment) 3030 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli WebRTCクライアント同⼠がP2Pでネットワークを介してつながるために 必要な仕組みを提供する STUN ・⾃分のグローバルIP、 ポート番号を知る ・UDPホールパンチングという 仕組みでNATに⽳を開ける TURN ・どうしてもNATに⽳を開けら れない場合に、データ通信を 中継する仕組み ・WebRTCコネクション全体の 8〜9%はTURNが必要と ⾔われている(⽇本はもっと多いかも) TURN サーバ
  32. 32. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 31 NAT STUN NAT ※後述するNAT Typeにより挙動が変わります
  33. 33. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 32 俺のグローバル IPとポート番号 教えて 111.111.111.111 50000番やで NAT STUN NAT ※後述するNAT Typeにより挙動が変わります
  34. 34. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 33 俺のグローバル IPとポート番号 教えて 222.222.222.222 20000番やで NAT STUN NAT IP:111.111.111.111 PORT:10000番 ※後述するNAT Typeにより挙動が変わります
  35. 35. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 34 NAT STUN NAT IP:111.111.111.111 PORT:10000番 IP:222.222.222.222 PORT:20000番 互いのIPとPORTを 何らかの⼿段で交換 (シグナリング) ※後述するNAT Typeにより挙動が変わります
  36. 36. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 35 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 アクセスさせ てー! だめー。 ⽳開いた! ※後述するNAT Typeにより挙動が変わります
  37. 37. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 36 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 通れる!! アクセスさせてー。 ⽳開いた! ※後述するNAT Typeにより挙動が変わります
  38. 38. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 37 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 もしかして! 通れる! ※後述するNAT Typeにより挙動が変わります
  39. 39. Copyright © NTT Communications Corporation. All rights reserved. TURNの使いどころ 38 どうしてもNATに⽳があかない場合はTURNを利⽤する 互いのNAT Type フルコーン 制限付きフ ルコーン ポート制限 付きフル コーン シンメト リック フルコーン STUN STUN STUN STUN 制限付きフ ルコーン STUN STUN STUN STUN ポート制限 付きフル コーン STUN STUN STUN TURN シンメト リック STUN STUN TURN TURN ※NAT Typeは厳密に細分化すると9パターンあります。 よ り セ キ ュ ア よりセキュア ※もっと詳しく知りたい⽅はこちら。 http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc
  40. 40. Copyright © NTT Communications Corporation. All rights reserved. TURNリレー 39 シンメトリック NAT TURN シンメトリック NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 TURNサーバを中継する (中継するだけなので通信の中⾝はわからない) クライアントはP2Pのつもり IP:11.11.11.11 PORT:3478 IP:11.11.11.11 PORT:3478
  41. 41. Copyright © NTT Communications Corporation. All rights reserved. TURNリレー 40 シンメトリック 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か、怪しくないな!
  42. 42. Copyright © NTT Communications Corporation. All rights reserved. TURNを使っても通らない場合がある 41 シンメトリック 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が存在する おいおい、中⾝が怪しいぞ!
  43. 43. Copyright © NTT Communications Corporation. All rights reserved. WebRTCの技術要素 42 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
  44. 44. Copyright © NTT Communications Corporation. All rights reserved. シグナリング 43 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli ICEの仕組み等を利⽤して取得した情報を、互いに交換する仕組み ・どのような仕組みを⽤いても良い ・WebSocket(主流) ・XHRロングポーリング ・情報はSDPを⽤いて情報交換する ・テキストベースのプロトコル ・IPアドレス、ポート番号、 映像、⾳声コーデック情報 などを記載して交換する ・めちゃくちゃ難解
  45. 45. Copyright © NTT Communications Corporation. All rights reserved. WebRTCの技術要素 44 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
  46. 46. Copyright © NTT Communications Corporation. All rights reserved. P2Pによるセキュアなリアルタイム通信 4545 すべての準備が整うとP2Pによる、セ キュアな通信を開始 ・映像・⾳声 ・セキュアなリアルタイム通信(SRTP) ・AES(共通鍵暗号化) ・鍵交換にDTLSを⽤いる(DTLS-SRTP) ・データ ・TCP同様の信頼性、到達順序性、 フロー制御、輻輳制御をUDP上で実現 ・セキュアなDTLS上で動作する ・DTLS ・通信経路暗号化 ・データ整合性の保証 ・認証⾏為は⾏わない(オレオレ証明書) NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli IP UDP SCTPSRTP DTLS ⾳声・映像 データ
  47. 47. Copyright © NTT Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 WebRTCはP2Pの通信が前提だが、ユースケースとしては多対多も 求められている。 46 フルメッシュでやる⽅法もあるが、端末への負荷がかかる チューニングしても同時8つぐらいが限界
  48. 48. Copyright © NTT Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 MCU(Multipoint Control Unit)を利⽤する。 メディアを集約、ミキシングし各デバイスに流す。 クライアント側の負荷が⼩さい。 サーバ側の負荷はエンコード、デコード処理が⼊るため負荷が⾼い。 47 MCU
  49. 49. Copyright © NTT Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 SFU(Selective Forwarding Unit)を利⽤する。 クライアントからのストリームを必要なエンドポイントに転送する。 サーバ側の負荷は⼩さい。 48 SFU
  50. 50. Copyright © NTT Communications Corporation. All rights reserved. WebRTCの技術要素 49 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
  51. 51. Copyright © NTT Communications Corporation. All rights reserved. ⾳声・動画処理 50 WebRTCクライアントはPCやデバイスの⾳声映像ストリームにアクセスでき る(以下、Webブラウザの場合) ・getUserMedia(WebAPI) プラットフォーム上の ⾳声、映像ストリームを取得できる W3Cによって規定されたAPI ・ブラウザに実装された エンジンによって、 エンコード、デコード処理がなされる ・コーデック ・Video:VP8、H.264 ・Audio:Opus、G.711 PCMA & PCMU デバイスハードウェア ⾳声処理エンジン コーデック ジッタ/パケロス補正 エコー除去 ノイズリダクション 映像処理エンジン コーデック ジッタ/パケロス補正 ⾳声・動画同期 画像補正 ⾳声キャプチャ 動画キャプチャ 内部WebRTC API WebAPI(W3C) 引⽤元:オライリー・ジャパン 「ハイパフォーマンスブラウザネットワーキング」 P.301
  52. 52. Copyright © NTT Communications Corporation. All rights reserved. 本⽇のアジェンダ 51 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
  53. 53. Copyright © NTT Communications Corporation. All rights reserved. WebRTCに関する標準化動向 52 WebRTCとIETFによって標準化が進められている。 •W3C • Web Real-Time Communications Working Group • http://www.w3.org/2011/04/webrtc/ • Webブラウザに実装するAPIの標準化を担当する •IETF • Real-Time Communication in WEB-browsers Working Group • http://tools.ietf.org/wg/rtcweb/ • プロトコルレベルでの標準化を担当する • オーディオやビデオのコーデック、セキュリティ、JSEP、ICE、データ通信プロトコル等 の標準化を担当する 今回はW3Cの話をします
  54. 54. Copyright © NTT Communications Corporation. All rights reserved. W3Cによる標準化ロードマップ 53 Media Capture and Streams WebRTC 1.0 RTC Between Browsers MediaStream Recording MediaStream Image Capture MediaStream Depth Stream Extensions Identifiers for WebRTC’s Statistics API ※W3C公式のWorking draftになっているものだけ記載 2013/9/3 ●WD 2013 2013/9/10 ●WD 2013/2/5 ●WD 2013/7/9 ●WD 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 ●CR ●PR WD:Working Doraft / 草案 CR :Candidate Recomendation / 勧告候補 PR:Proposed Recommendation / 勧告案 Rec:Recommendation / 勧告 1Q : 1⽉〜3⽉ 2Q:4⽉〜6⽉ 3Q:7⽉〜9⽉ 4Q:10⽉〜12⽉ ●Rec ●CR ●PR 2017/1Q ●Rec 2017 2018 2017/1Q ●Rec ●CR ●PR 3Q ●Rec ●CR 2017/2Q ●PR 3Q ●Rec ●CR 2017/2Q ●PR ●CR ●PR 2017/1Q ●Rec 出展:http://www.w3.org/2015/06/webrtc-charter.html 2014/10/7 ●WD 2014/10/21 ●WD
  55. 55. Copyright © NTT Communications Corporation. All rights reserved. W3Cによる標準化ロードマップ 54 Audio Oputpu Devices API Screen Capture WebRTC Next Version ※W3C公式のWorking draftになっているものだけ記載 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 ●PR ●Rec 2017 Media Capture from DOM Elements ●CR ●PR ●Rec WD:Working Doraft / 草案 CR :Candidate Recomendation / 勧告候補 PR:Proposed Recommendation / 勧告案 Rec:Recommendation / 勧告 1Q : 1⽉〜3⽉ 2Q:4⽉〜6⽉ 3Q:7⽉〜9⽉ 4Q:10⽉〜12⽉ 出展:http://www.w3.org/2015/06/webrtc-charter.html ●CR ●CR ●PR ●Rec 2016/1Q ●WD 2017/2Q ●CR 2017/4Q ●PR 2018/1Q ●Rec 2018 2015/2/10 ●WD 2015/2/10 ●WD 2015/2/19 ●WD
  56. 56. Copyright © NTT Communications Corporation. All rights reserved. W3Cによる標準化ロードマップ 55 Media Capture and Streams WebRTC 1.0 RTC Between Browsers MediaStream Recording MediaStream Image Capture MediaStream Depth Stream Extensions Identifiers for WebRTC’s Statistics API ※W3C公式のWorking draftになっているものだけ記載 2013/9/3 ●WD 2013 2013/9/10 ●WD 2013/2/5 ●WD 2013/7/9 ●WD 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 ●CR ●PR WD:Working Doraft / 草案 CR :Candidate Recomendation / 勧告候補 PR:Proposed Recommendation / 勧告案 Rec:Recommendation / 勧告 1Q : 1⽉〜3⽉ 2Q:4⽉〜6⽉ 3Q:7⽉〜9⽉ 4Q:10⽉〜12⽉ ●Rec ●CR ●PR 2017/1Q ●Rec 2017 2018 2017/1Q ●Rec ●CR ●PR 3Q ●Rec ●CR 2017/2Q ●PR 3Q ●Rec ●CR 2017/2Q ●PR ●CR ●PR 2017/1Q ●Rec 出展:http://www.w3.org/2015/06/webrtc-charter.html 2014/10/7 ●WD 2014/10/21 ●WD getUserMediaとか P2Pを⾏うための通 信系のAPI 認証とか、統計情 報取得のためのAPI メディアストリー ムを録⾳/録画す るためのAPI
  57. 57. Copyright © NTT Communications Corporation. All rights reserved. W3Cによる標準化ロードマップ 56 Audio Oputpu Devices API Screen Capture WebRTC Next Version ※W3C公式のWorking draftになっているものだけ記載 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 ●PR ●Rec 2017 Media Capture from DOM Elements ●CR ●PR ●Rec WD:Working Doraft / 草案 CR :Candidate Recomendation / 勧告候補 PR:Proposed Recommendation / 勧告案 Rec:Recommendation / 勧告 1Q : 1⽉〜3⽉ 2Q:4⽉〜6⽉ 3Q:7⽉〜9⽉ 4Q:10⽉〜12⽉ 出展:http://www.w3.org/2015/06/webrtc-charter.html ●CR ●CR ●PR ●Rec 2016/1Q ●WD 2017/2Q ●CR 2017/4Q ●PR 2018/1Q ●Rec 2018 2015/2/10 ●WD 2015/2/10 ●WD 2015/2/19 ●WD スクリーンキャプ チャAPI
  58. 58. Copyright © NTT Communications Corporation. All rights reserved. ここまで聞いて、皆さん、思いますよね? 57 注⽬されてるとか⾔ってるけど、まだまだ先やんかー。
  59. 59. Copyright © NTT Communications Corporation. All rights reserved. その通りです! 58 WebRTCはGoogleやMozillaの実装ドリブンで検討が進んでいるの で、仕様化は⼆の次・三の次。 ブラウザで実装してみる ↓ ここが使いにくいな・・等、フィードバック ↓ ある程度実装がFIXしたので仕様書に落とそう
  60. 60. Copyright © NTT Communications Corporation. All rights reserved. WebRTCの今後 59 WebRTCのロードマップの中にNext Versionというものあります WebRTC 1.1または2.0と⾔われてますが、次のバージョンを語る 上で外せないのが、ORTCという兄弟仕様の存在。 WebRTC Next Version 2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 2017 2016/1Q ●WD 2017/2Q ●CR 2017/4Q ●PR 2018/1Q ●Rec 2018
  61. 61. Copyright © NTT Communications Corporation. All rights reserved. ORTC ORTCとはなにか? • 現⾏のWebRTC1.0のイケてない点を改善すべく提 案されたもう⼀つのRTC API どこで議論されているのか? • ORTC(Object Real-time Communications) Community Group https://www.w3.org/community/ortc/ • 最新Draft:2015/6/23 http://ortc.org/wp- content/uploads/2015/06/ortc.html 60
  62. 62. Copyright © NTT Communications Corporation. All rights reserved. ORTCの特徴 61 • 仕様⾯(今のWebRTCの不便な点を克服) • SDPを直接JavaScriptで操作しない • ステートレスにリアルタイム通信を⾏うためのAPI設計 • H.264/SVCなどのモバイルにやさしいコーデックを推奨する • 実装⾯(実は今のWebRTCでは規定されていない) • モバイル・アプリケーションとの互換性を担保(SDKを⽤意) • キャリアスケールオペレーションに必要な監視、診断機能を⽤意 • サーバサイドのORTC Client実装をリファレンス提供 • STUN/TURNの認証管理の仕組みを提供 • オーディオ、ビデオのミキシングの仕組みをリファレンス提供 等
  63. 63. Copyright © NTT Communications Corporation. All rights reserved. ORTCはマイクロソフトがやる気です 62 http://dev.modern.ie/platform/status/multicolumnfullsupport?filter=f3f0000bf&search=RTC • Microsoft Edgeでサポートされることはほぼ確定路線
  64. 64. Copyright © NTT Communications Corporation. All rights reserved. 本⽇のアジェンダ 63 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
  65. 65. Copyright © NTT Communications Corporation. All rights reserved. 64 WebRTCはWeb開発者にとってちょっと難しい 64 ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を ⾏う必要があり、実装にはネットワークの知識が必要。 64ようやく直接通信できる これらの通信が 完了してから…
  66. 66. Copyright © NTT Communications Corporation. All rights reserved. そこで登場、SkyWay! 65 n WebRTC利⽤アプリを簡単に開発できるクラウド基盤 2013年12⽉5⽇に提供開始 無料! 提供内容 シグナリングAPI STUN/TURN API JavaScriptライブラリ(PeerJS互換) iOS/Androidライブラリ サンプルアプリ ⽇本語ドキュメント https://skyway.io
  67. 67. Copyright © NTT Communications Corporation. All rights reserved. 66 SkyWayの特徴 SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので 、開発者は簡単にWebRTC利⽤アプリを開発できる。 STUN API Signaling API STUN API ライブラリ ライブラリ APIとライブ ラリが複雑な 処理を担う TURN API
  68. 68. Copyright © NTT Communications Corporation. All rights reserved. 67 開発者登録を⾏う まずはアクセス → https://skyway.io ここをクリック
  69. 69. Copyright © NTT Communications Corporation. All rights reserved. 68 APIキーの申請にはドメインが必要 n APIキーの申請に必要なもの n お名前 n 連絡先メールアドレス n SkyWayを利⽤するドメイン n SkyWayを利⽤するドメイン APIキーの不正利⽤を防ぐ⽬的のドメ イン認証 n 例えば・・・ n ローカルで動かしたい n 127.0.0.1 n localhost n 開発サーバで動かしたい n dev.domain.jp n 本番サーバで動かしたい n www.domain.jp n iOSとAndroidは独⾃に設定
  70. 70. Copyright © NTT Communications Corporation. All rights reserved. 69 開発してみる(JavaScriptの場合) n STEP0 - ライブラリの読み込み <script src="https://skyway.io/dist/0.3/peer.js"></script> n STEP1 - Peerオブジェクトの⽣成 var APIKEY = '6165842a-5c0d-11e3-b514-75d3313b9d05’; var peer = new Peer({ key: APIKEY});
  71. 71. Copyright © NTT Communications Corporation. All rights reserved. 70 開発してみる(JavaScriptの場合) n STEP2 - 相⼿からの着信イベントを処理するハンドラーを設置 peer.on('open', function(){ //⾃分のPeerID(いわゆる電話番号)が⽣成されたら発⽕する }); peer.on('call', function(call){ //相⼿からの着信があった場合に応答する call.answer(window.localStream); }); peer.on('error', function(err){ //何らかのエラーが発⽣した場合に発⽕する console.log(err.message); });
  72. 72. Copyright © NTT Communications Corporation. All rights reserved. 71 n STEP3 - ⾃分⾃⾝のオーディオ、ビデオストリームを取得 navigator.getUserMedia({audio: true, video: true}, function(stream){ //⾃分のVideoタグに表⽰ $('#my-video').prop('src', URL.createObjectURL(stream)); //相⼿に送るために保存 window.localStream = stream; }, function(err){ //エラー処理は必須 console.log(err); }); ※getUserMediaにはブラウザごとにベンダープレフィックスがあります 開発してみる(JavaScriptの場合)
  73. 73. Copyright © NTT Communications Corporation. All rights reserved. 72 開発してみる(JavaScriptの場合) n STEP4 - 相⼿に発信&発信後のイベントを処理するハンドラを設置 var call = peer.call(PeerId, window.localStream); call.on('stream', function(stream){ //相⼿のオーディオ、ビデオストリームをVideoタグに表⽰ $('#their-video').prop('src', URL.createObjectURL(stream)); }); call.on('close’,function(){ //相⼿が切断した場合に切断処理を⾏う }); ※PeerIDの受け渡しは開発者が独⾃に実装する必要あり peer.listAllPeers()というメソッドも⽤意しています
  74. 74. Copyright © NTT Communications Corporation. All rights reserved. 73 開発に必要な情報を提供 ⽇本語ドキュメントを公開中 http://nttcom.github.io/skyway/docs/
  75. 75. Copyright © NTT Communications Corporation. All rights reserved. 74 開発に必要な情報を提供 サンプルアプリはGitHub上にてオープンソースで公開中 https://github.com/nttcom/
  76. 76. Copyright © NTT Communications Corporation. All rights reserved. 75 開発に必要な情報を提供 開発者向けフォーラムを⽤意 SkyWay Technical Forum • だれでも参加可能! • 中の⼈が懇切丁寧に開発者の疑問質問にお答え! • WebRTCに関す⽇本語での情報交換に活⽤してください http://goo.gl/enBkcF
  77. 77. Copyright © NTT Communications Corporation. All rights reserved. まとめ 76 • はじめてのWebRTC/ORTC • WebRTCとは • 活⽤事例、デモンストレーション • WebRTCで使われている技術要素の紹介 • 最新標準化動向 • SkyWayをつかって開発してみよう を紹介
  78. 78. Copyright © NTT Communications Corporation. All rights reserved. 77 ご清聴ありがとうございました!

×