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ハンズオン

1,511 views

Published on

WebRTCハンズオンの為の資料です。

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

Published in: Technology

WebRTCハンズオン

  1. 1. Copyright © NTT Communications Corporation. All rights reserved. WebRTCハンズオン 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 • WebRTCについて知る(座学) • WebRTCのシグナリングを体感する • WebRTCで簡単なビデオチャットアプリを開発する ー休憩ー • SkyWayについて知る(座学) • SkyWayを使ってビデオチャットを作る • WebRTCをビジネスで活⽤するために知っておくこと(座学)
  6. 6. Copyright © NTT Communications Corporation. All rights reserved. このハンズオンの対象者 • Webデベロッパー 5
  7. 7. Copyright © NTT Communications Corporation. All rights reserved. • こちらのリポジトリを参照して下さい。 https://github.com/yusuke84/webrtc_handson 事前準備 6
  8. 8. Copyright © NTT Communications Corporation. All rights reserved. 座学 7 WebRTCについて知る
  9. 9. Copyright © NTT Communications Corporation. All rights reserved. 8 HTML5の全体像 HTML5が提供する機能は多岐にわたる。WebRTCはその⼀つの技術。 引⽤元:http://www.slideshare.net/dynamis/web-standards-infographics
  10. 10. Copyright © NTT Communications Corporation. All rights reserved. 9 WebRTCとは(概要) ひとことで⾔うと「ブラウザでテレビ電話を実現する技術」 ブラウザだけで、プラグインのインストール無しに、Web会議、 ボイスチャット、テキストチャット、ファイル転送、電話との連 携等が実現可能。 従来のWeb WebRTC カメラやマイ クを利⽤可 リアルタイ ムに送受信 ブラウザ間 の直接通信 サーバ⇔ク ライアント 間の通信 リクエストと レスポンスの 繰り返し カメラやマイ クの利⽤不可 サーバ サーバ
  11. 11. Copyright © NTT Communications Corporation. All rights reserved. 10 WebRTCとは(技術⾯) 技術的には2つの側⾯がある。 1.⾳声、映像、データのリアルタイム・コミュニケーションのオープン標準 l 従来のサービス(WebEx、Skype等)は互換性がなく、独⾃技術を含む。 WebRTCは相互接続が保証され、ライセンス使⽤料が不要。 1.ブラウザとネイティブアプリの両⽅で利⽤できる l 例えば、オープンソースのC++のコードを利⽤しコンパイルすれば、ネイティ ブアプリにWebRTC機能を組み込むこともできる。
  12. 12. Copyright © NTT Communications Corporation. All rights reserved. WebRTCのクライアント対応状況 11 対応状況 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 ネイティブ 要コンパイル
  13. 13. Copyright © NTT Communications Corporation. All rights reserved. WebRTC技術の全容 12 https://www.flickr.com/photos/noaaphotolib/5041457573
  14. 14. Copyright © NTT Communications Corporation. All rights reserved. WebRTC技術の全容 13 まずは、海の上に出ている部分を理解 しましょう。
  15. 15. Copyright © NTT Communications Corporation. All rights reserved. WebRTCの技術要素 14 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
  16. 16. Copyright © NTT Communications Corporation. All rights reserved. ICE(Interactive Connectivity Establishment) 1515 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli WebRTCクライアント同⼠がP2Pでネットワークを介してつながるために 必要な仕組みを提供する STUN ・⾃分のグローバルIP、 ポート番号を知る ・UDPホールパンチングという 仕組みでNATに⽳を開ける TURN ・どうしてもNATに⽳を開けら れない場合に、データ通信を 中継する仕組み ・WebRTCコネクション全体の 8〜9%はTURNが必要と ⾔われている(⽇本はもっと多いかも) TURN サーバ
  17. 17. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 16 NAT STUN NAT ※後述するNAT Typeにより挙動が変わります
  18. 18. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 17 俺のグローバル IPとポート番号 教えて 111.111.111.111 50000番やで NAT STUN NAT ※後述するNAT Typeにより挙動が変わります
  19. 19. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 18 俺のグローバル IPとポート番号 教えて 222.222.222.222 20000番やで NAT STUN NAT IP:111.111.111.111 PORT:10000番 ※後述するNAT Typeにより挙動が変わります
  20. 20. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 19 NAT STUN NAT IP:111.111.111.111 PORT:10000番 IP:222.222.222.222 PORT:20000番 互いのIPとPORTを 何らかの⼿段で交換 (シグナリング) ※後述するNAT Typeにより挙動が変わります
  21. 21. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 20 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 アクセスさせ てー! だめー。 ⽳開いた! ※後述するNAT Typeにより挙動が変わります
  22. 22. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 21 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 通れる!! アクセスさせてー。 ⽳開いた! ※後述するNAT Typeにより挙動が変わります
  23. 23. Copyright © NTT Communications Corporation. All rights reserved. UDPホールパンチング 22 NAT STUN NAT IP:222.222.222.222 PORT:20000番 IP:111.111.111.111 PORT:10000番 もしかして! 通れる! ※後述するNAT Typeにより挙動が変わります
  24. 24. Copyright © NTT Communications Corporation. All rights reserved. TURNの使いどころ 23 どうしても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
  25. 25. Copyright © NTT Communications Corporation. All rights reserved. TURNリレー 24 シンメトリック 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
  26. 26. Copyright © NTT Communications Corporation. All rights reserved. TURNリレー 25 シンメトリック 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か、怪しくないな!
  27. 27. Copyright © NTT Communications Corporation. All rights reserved. TURNを使っても通らない場合がある 26 シンメトリック 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が存在する おいおい、中⾝が怪しいぞ!
  28. 28. Copyright © NTT Communications Corporation. All rights reserved. WebRTCの技術要素 27 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
  29. 29. Copyright © NTT Communications Corporation. All rights reserved. シグナリング 28 NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli ICEの仕組み等を利⽤して取得した情報を、互いに交換する仕組み ・どのような仕組みを⽤いても良い ・WebSocket(主流) ・XHRロングポーリング ・情報はSDPを⽤いて情報交換する ・テキストベースのプロトコル ・IPアドレス、ポート番号、 映像、⾳声コーデック情報 などを記載して交換する ・めちゃくちゃ難解
  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. P2Pによるセキュアなリアルタイム通信 3030 すべての準備が整うとP2Pによる、セ キュアな通信を開始 ・映像・⾳声 ・セキュアなリアルタイム通信(SRTP) ・AES(共通鍵暗号化) ・鍵交換にDTLSを⽤いる(DTLS-SRTP) ・データ ・TCP同様の信頼性、到達順序性、 フロー制御、輻輳制御をUDP上で実現 ・セキュアなDTLS上で動作する ・DTLS ・通信経路暗号化 ・データ整合性の保証 ・認証⾏為は⾏わない(オレオレ証明書) NAT NAT STUN サーバ Signaling サーバ STUN サーバ WebRTC Cli WebRTC Cli IP UDP SCTPSRTP DTLS ⾳声・映像 データ
  32. 32. Copyright © NTT Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 WebRTCはP2Pの通信が前提だが、ユースケースとしては多対多も 求められている。 31 フルメッシュでやる⽅法もあるが、端末への負荷がかかる チューニングしても同時8つぐらいが限界
  33. 33. Copyright © NTT Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 MCU(Multipoint Control Unit)を利⽤する。 メディアを集約、ミキシングし各デバイスに流す。 クライアント側の負荷が⼩さい。 サーバ側の負荷はエンコード、デコード処理が⼊るため負荷が⾼い。 32 MCU
  34. 34. Copyright © NTT Communications Corporation. All rights reserved. P2Pだけじゃない・・多対多の通信 SFU(Selective Forwarding Unit)を利⽤する。 クライアントからのストリームをコピーしてエンドポイントに転送する。 サーバ側の負荷は⼩さい。 33 SFU
  35. 35. Copyright © NTT Communications Corporation. All rights reserved. WebRTCの技術要素 34 WebRTCには様々な技術が使われています。 これから使⽤されている技術要素を順番に紹介します。 1.ICE 2.シグナリング 3.P2Pによるセキュアなリアルタイム通信 4.⾳声、映像処理
  36. 36. Copyright © NTT Communications Corporation. All rights reserved. ⾳声・動画処理 35 WebRTCクライアントはPCやデバイスの⾳声映像ストリームにアクセスでき る(以下、Webブラウザの場合) ・getUserMedia(WebAPI) プラットフォーム上の ⾳声、映像ストリームを取得できる W3Cによって規定されたAPI ・ブラウザに実装された エンジンによって、 エンコード、デコード処理がなされる ・コーデック ・Video:VP8、H.264 ・Audio:Opus、G.711 PCMA & PCMU デバイスハードウェア ⾳声処理エンジン コーデック ジッタ/パケロス補正 エコー除去 ノイズリダクション 映像処理エンジン コーデック ジッタ/パケロス補正 ⾳声・動画同期 画像補正 ⾳声キャプチャ 動画キャプチャ 内部WebRTC API WebAPI(W3C) 引⽤元:オライリー・ジャパン 「ハイパフォーマンスブラウザネットワーキング」 P.301
  37. 37. Copyright © NTT Communications Corporation. All rights reserved. ハンズオン 36 WebRTCのシグナリングを体感する https://github.com/yusuke84/webrtc_handson/STEP1 WebRTCで簡単なビデオチャットアプリを 開発する https://github.com/yusuke84/webrtc_handson/STEP2
  38. 38. Copyright © NTT Communications Corporation. All rights reserved. 座学 37 SkyWayについて知る
  39. 39. Copyright © NTT Communications Corporation. All rights reserved. 38 WebRTCはWeb開発者にとってちょっと難しい 38 ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を ⾏う必要があり、実装にはネットワークの知識が必要。 38ようやく直接通信できる これらの通信が 完了してから…
  40. 40. Copyright © NTT Communications Corporation. All rights reserved. そこで登場、SkyWay! 39 n WebRTC利⽤アプリを簡単に開発できるクラウド基盤 2013年12⽉5⽇に提供開始 無料! 提供内容 シグナリングAPI STUN/TURN API JavaScriptライブラリ(PeerJS互換) iOS/Androidライブラリ サンプルアプリ 各種ライブラリ ⽇本語ドキュメント https://skyway.io
  41. 41. Copyright © NTT Communications Corporation. All rights reserved. 40 SkyWayの特徴 SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので 、開発者は簡単にWebRTC利⽤アプリを開発できる。 STUN API Signaling API STUN API ライブラリ ライブラリ APIとライブ ラリが複雑な 処理を担う TURN API
  42. 42. Copyright © NTT Communications Corporation. All rights reserved. 41 開発者登録を⾏う まずはアクセス → https://skyway.io ここをクリック
  43. 43. Copyright © NTT Communications Corporation. All rights reserved. 42 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は独⾃に設定
  44. 44. Copyright © NTT Communications Corporation. All rights reserved. 43 開発に必要な情報を提供 ⽇本語ドキュメントを公開中 http://nttcom.github.io/skyway/docs/
  45. 45. Copyright © NTT Communications Corporation. All rights reserved. 44 開発に必要な情報を提供 開発者向けフォーラムを⽤意 SkyWay Technical Forum • だれでも参加可能! • 中の⼈が懇切丁寧に開発者の疑問質問にお答え! • WebRTCに関す⽇本語での情報交換に活⽤してください http://goo.gl/enBkcF
  46. 46. Copyright © NTT Communications Corporation. All rights reserved. 45 様々な機能を活⽤する
  47. 47. Copyright © NTT Communications Corporation. All rights reserved. ハンズオン 46 SkyWayを使ってビデオチャットを作る https://github.com/yusuke84/webrtc_handson/STEP3
  48. 48. Copyright © NTT Communications Corporation. All rights reserved. 座学 47 WebRTCをビジネスで活⽤するために知っ ておくこと
  49. 49. Copyright © NTT Communications Corporation. All rights reserved. 現状対応ブラウザでも細かな実装が異なる部分があります。 JavaScriptレベルの違い、スタックレベルでの違いなど、その差分 は様々です。 商⽤サービスを開発し運⽤していくうえで、⽇々変わるブラウザの 実装について、可能な限り追いかけて⾏くことが必要とされます。 ブラウザ毎の実装差分を理解せよ 48
  50. 50. Copyright © NTT Communications Corporation. All rights reserved. iOSの場合はネイティブクライアントの導⼊が必須となります。モ バイルクライアントを利⽤するのであれば、ネイティブアプリ開発 の知識が必要になります。 ネイティブクライアント開発も避けては通れない 49
  51. 51. Copyright © NTT Communications Corporation. All rights reserved. ICEというNATを越える仕組みが⽤意されていますが、現実のネッ トワークはそんなに⽢いモノではありません。 Wiresharkでの通信パケット解析の技術は合ったほうがいいです。 また、シグナリングで交換されるICE Candidate、SDPの中⾝につ いては読めるようになっている⽅が良いでしょう。 「よくわからないけどつながらない」に備えよ 50
  52. 52. Copyright © NTT Communications Corporation. All rights reserved. WebRTCを構成する技術で、JavaScriptAPI以外はほぼすべて、 IETFの中で議論がなされています。 ICEの話に始まり、リアルタイム通信プロトコルである RTP/SRTP/RTCPやDTLS、SCTP、各種コーデックなどなど・・・ ・実に幅広い技術が利⽤されています。 ガチでやるなら、避けては通れません。 IETFとも仲良くしよう 51
  53. 53. Copyright © NTT Communications Corporation. All rights reserved. W3Cでは現在WebRTC1.0の仕様策定が進められていますが、 ORTCという兄弟仕様が既に登場しています。これは、Extensible Webの流れに乗るものです。 WebRTC1.0は限定的なユースケースを元にAPI仕様が策定されて きましたが、ORTCでは、ローレイヤーなAPIも仕様として定義さ れています。ORTCの登場によって、WebRTCのユースケースは更 に広がりを⾒せてきます。また、Edgeは現在ORTCを実装中です。 WebRTC1.0制定後は、WebRTC1.0はORTCは今後融合し、 WebRTC NV(Next Version)へ移⾏する予定です。 標準化の動向をきちんとウォッチすることが重要です。 W3Cでの標準化は今まさに激動中 52
  54. 54. Copyright © NTT Communications Corporation. All rights reserved. • ⽇本のWebRTC開発者が集まるSlack http://webrtc-jp-slackin.herokuapp.com/ • WebRTCの⽇本語による最新情報 https://twitter.com/hashtag/webrtcjp • SkyWayの開発者フォーラム https://groups.google.com/forum/#!forum/skywayjs • 最新情報はここで⼿に⼊れろ(英語だけど) https://groups.google.com/forum/#!forum/discuss-webrtc https://webrtchacks.com/ とりあえず、⼀⼈で開発するのは無理 53
  55. 55. Copyright © NTT Communications Corporation. All rights reserved. 54 ご清聴ありがとうございました!

×