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.

2016 February - WebRTC Conference Japan - 日本語

525 views

Published on

WebRTCはエキサイティングな技術であり、過去数年間非常に速く変化して来ました。
WeRTCが選ばれていることと、それがもたらす破壊力は疑いの余地がありません。しかし、進化のペースが速く、ブラウザの更新サイクルが短いことで、WebRTCを利用して複雑なソリューションを構築することを難しくしています。
2015年後期、WebRTCを策定する様々な標準委員会と対応するワーキンググループ が最終的な合意に至り、全ての彼らの取り組みの収束より安 定した仕様が生ま れました。
GoToMeetingおよびその他のソフトウェアの事例を通して、私達はWebRTCを使用した場合に最も良く経験する困難について解説します。次に、ピア・ツー・ ピアのAPIとして始まったWebRTC APIが、P2Pのシンプルさを維持しながらより多くのオプションと制御を必要な人たちに提供するために、どの様にオブジェクトモデルAPIを使用して拡張されたかを説明します。
また、新しいオブジェクトモデルAPIとORTC API (Edgeに実装されています)との 類似点に関しても解説します。

Published in: Engineering
  • Be the first to comment

2016 February - WebRTC Conference Japan - 日本語

  1. 1. WebRTC 1.0 … Finally! Dr. Alex Gouaillard (訳者: Yoshimasa Iwase / @iwashi86) © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  2. 2. 全体像 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 • 2015年初頭のWebRTC • オブジェクトモデルAPIs • のり (Transceiver) • もっとはやくICE • Ports • サイマルキャスト • その他、WebRTC 1.0に入るトピック
  3. 3. 2015年初頭のP2PのWebRTCモデル http://www.html5rocks.com/en/tutorials/webrtc/basics/ シグナリング シグナリング メディア 発信側 着信側 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  4. 4. シグナリング サーバ PeerConnection JavaScriptアプリ (送信側) JavaScriptアプリ (受信側) PeerConnection メディア ストリーム データ チャネル CreateOffer SetLocal SetRemote SetLocal SetRemote オファー (SDP) アンサー (SDP) Candidates (SDP) メディア ストリーム データ チャネル OnCandidate AddCandidate CreateAnswer ICE バインディング +接続テスト © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 2015年初頭のP2PのWebRTCモデル
  5. 5. シグナリング サーバ PeerConnection JavaScriptアプリ (送信側) JavaScriptアプリ (受信側) PeerConnection ICE UADTLS RTP Code c CreateOffer 収集 トランスポート SetLocal SetRemote ICE UA DTLS RTP Code c 収集 トランスポート SetLocal SetRemote Candidates (SDP) OnCandidate AddCandidate CreateAnswer ICE バインディング +接続テスト © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 2015年初頭のP2PのWebRTCモデル 万能なPeerConnection オファー (SDP) アンサー (SDP) メディア ストリーム データ チャネル メディア ストリーム データ チャネル
  6. 6. シグナリング サーバ ICE UADTLS RTP Code c CreateOffer 収集 トランスポート SetLocal SetRemote ICE UA DTLS RTP Code c 収集 トランスポート SetLocal SetRemote Candidates (SDP) OnCandidate AddCandidate CreateAnswer ICE バインディング +接続テスト © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 2015年初頭のP2PのWebRTCモデル 万能なPeerConnection オファー (SDP) アンサー (SDP) メディア ストリーム データ チャネル メディア ストリーム データ チャネル
  7. 7. DONEFROZENINCALLコネクションハンドシェイク(SDPO/A). new checking connected disconnected failed Completed close new gathering complete 発信者 シグナリングサーバ 着信者 stable have-local-offer stable Close OFFER ANSWER Create PC Add local stream(s) Create offer <sdpの修正> SetLocal(offer) Sending offer Create PC SetRemote(offer) addRemoteStream(s) Add local stream(s) Create answer <sdpの修正> SetLocal(answer) Send answer stable Have-remote- offer stable new gathering complete onIceCandidate <candidatesの フィルタリング> Send candidate <candidatesの フィルタリング> addIceCandidate onIceCandidate < candidatesの フィルタリング> Send candidate <candidates のフィルタリング> addIceCandidate new checking connected disconnected failed Completed close Close © Temasys Communications, pvt, ltd, 2014 Document provided under CC BY-NC 4.0 CANDIDATES Peer Connection ICE Connection ICE Gathering SetRemote(answer) addRemoteStream BYE
  8. 8. Early 2015, peer-to-peer webRTC Model Open Questions 1. How do I handle bandwidth preferences? 2. How do I check fingerprint (MITM attacks prevention)? 3. How do I handle codecs and their parameters? => Hum, ……. Just modify the SDP and pray it works. 4. How to know which pair of candidate is being used? 5. How do I restrict the ICE gathering (not to expose my IPs) 6. How do I get more info about ICE failures? 7. How do I make the (ICE) handshake faster? 8. How do I get rid of JSEP, SDP, O/A, …..? 9. Can I switch front / self view without renegotiation? => No can’t do. © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  9. 9. 全体像 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 • 2015年初頭のWebRTC • オブジェクトモデルAPIs • のり (Transceiver) • もっとはやくICE • Ports • サイマルキャスト • その他、WebRTC 1.0に入るトピック
  10. 10. シグナリング サーバ CreateOffer SetLocal SetRemote SetLocal SetRemote Candidates (SDP) OnCandidate AddCandidate CreateAnswer © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 2015年初頭のP2PのWebRTCモデル SDP, O/A, JSEP, Signaling オファー (SDP) アンサー (SDP) メディア ストリーム データ チャネル メディア ストリーム データ チャネル
  11. 11. © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 2015年初頭 Object Model API ~~ API だけ ~~ メディア ストリーム データ チャネル メディア ストリーム データ チャネル
  12. 12. 2015年第二四半期, W3C WebRTCの新しいチャーター(憲章) • => ORTC と WebRTCの統合 • オブジェクトモデルAPIの概念(ORTCにインスパイア) © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 http://ortc.org/wp-content/uploads/2014/08/ortc.html
  13. 13. オブジェクトモデルって何? • 各オブジェクトは1つの仕事だけ • 各オブジェクトは能力を調べられる(JS) • パラメタはJSから動的に読み書きできる © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 http://ortc.org/wp-content/uploads/2014/08/ortc.html
  14. 14. Early 2015, peer-to-peer webRTC Model Open Questions 最後のAPIを手に入れた • どうやって帯域設定すればいいのか • (マン・イン・ザ・ミドルアタックを防ぐために) どうやってフィンガープリントを確認するのか • どのCandidateペアが使われているのか • どうやってICEの失敗についての詳細な情報を得るのか • JSEP、SDP、オファー/アンサーをどうやったら除去できる? • ネゴシエーションを再度実施せずに、フロント/自身のビューをス イッチできる? いくつかAPIがある、もっと良いやり方もある • コーデックとそのパラメータをどうやって扱えばいいのか • ICE収集をどうやって制限すればいいのか(自分のIPを晒したくない) まだ解決されてない • ICEハンドシェイクをどうやったら早くできるのか? © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  15. 15. 全体像 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 • 2015年初頭のWebRTC • オブジェクトモデルAPIs • のり (Transceiver) • もっとはやくICE • Ports • サイマルキャスト • その他、WebRTC 1.0に入るトピック
  16. 16. WebRTC = Obj. Model + JSEP ? Obj Model © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 http://ortc.org/wp-content/uploads/2014/08/ortc.html
  17. 17. WebRTC = Obj. Model + JSEP ? Obj Model API => PeerConnection API Easy © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 http://ortc.org/wp-content/uploads/2014/08/ortc.html PEERCONNECTION PEERCONNECTION
  18. 18. © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 WebRTC = Obj. Model + JSEP ? Peerconnection API => Easy メディア ストリーム データ チャネル メディア ストリーム データ チャネル
  19. 19. シグナリング サーバ Candidates (SDP) © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 WebRTC = Obj. Model + JSEP ? Obj. Model API  SDP HARD オファー (SDP) アンサー (SDP) メディア ストリーム データ チャネル メディア ストリーム データ チャネル
  20. 20. オブジェクトモデルを備えたWebRTC 1.0 と JSEP を足すと… 問題: 1. SDPのm行は本質的に双方向 2. SDPのm行はsender/receiverオブジェクトモデル (mid)に合致する属性が無い。あったとしても、 重複してしまう。 オブジェクトモデルの上に、どのようにしてm行相当 のものを追加すればいいのか? (将来的にSDPや JSEPを捨てる場合にどうすればいいのか) ? © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  21. 21. Rtp Sender Rtp Receiver Dtls Transport Ice Transport Local Track NET Ice Transport Dtls Transport Rtp Sender WebRTC / Object Model Example 1: Audio only, 1:1 Dtls Transport Ice Transport Rtp Receiver Remote Track Dtls Transport Ice Transport Rtp Transceiver Remote Track Local Track Rtp Transceiver © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 APP APP SDP API API
  22. 22. 全体像 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 • 2015年初頭のWebRTC • オブジェクトモデルAPIs • のり (Transceiver) • もっとはやくICE • Ports • サイマルキャスト • その他、WebRTC 1.0に入るトピック
  23. 23. What’s your flavor? Full, Trickle, Lite Feature flavor Full Trickle Lite Make connectivity checks Yes Yes NO Answer connectivity checks Yes Yes Yes Controlling or controled Both Both Controlled Candidates send in the Offer/Answer Yes No ? Flag Ice-option: trickle a=ice-lite https://tools.ietf.org/html/draft-ietf-mmusic-trickle-ice-02 https://webrtchacks.com/trickle-ice/ © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 Trickle:10秒から1秒へ Q:どうやって100ミリ秒へ?
  24. 24. より早いICE - コールする前に処理を開始! - ICEプール - プレ候補収集 - ペアリングと接続確認を単純化・高速化 - “ウォームアップ” - ICE, DTLS, メディア中継をシグナリングの前に準備する - アーリーメディア - SDPアンサー送ると同時にメディア送信開始 - デフォルトSTUN/TURNサーバ © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  25. 25. 全体像 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 • 2015年初頭のWebRTC • オブジェクトモデルAPIs • のり (Transceiver) • もっとはやくICE • Ports • サイマルキャスト • その他、WebRTC 1.0に入るトピック
  26. 26. RTP/RTCP within a PeerConnection Default 4 A V RTP RTCP http://tools.ietf.org/html/draft-ietf-mmusic-sdp-bundle-negotiation http://datatracker.ietf.org/doc/rfc5761/ © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  27. 27. RTP/RTCP Default 4 Bundle 2 A V RTP RTCP A V RTP RTCP a=group:BUNDLE http://tools.ietf.org/html/draft-ietf-mmusic-sdp-bundle-negotiation http://datatracker.ietf.org/doc/rfc5761/ © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  28. 28. RTP/RTCP Default 4 Bundle 2 Rtcp-mux 2 A V RTP RTCP A V RTP RTCP A V RTP RTCP a=rtcp-muxa=group:BUNDLE http://tools.ietf.org/html/draft-ietf-mmusic-sdp-bundle-negotiation http://datatracker.ietf.org/doc/rfc5761/ © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  29. 29. RTP/RTCP Default 4 Bundle 2 Rtcp-mux 2 Both 1 A V RTP RTCP A V RTP RTCP A V RTP RTCP A V RTP RTCP a=rtcp-muxa=group:BUNDLE http://tools.ietf.org/html/draft-ietf-mmusic-sdp-bundle-negotiation http://datatracker.ietf.org/doc/rfc5761/ © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  30. 30. RTP/RTCP – extrapolation to n tracks Default 2n Bundle n Rtcp-mux n Both 1 A V RTP RTCP A V RTP RTCP A V RTP RTCP A V RTP RTCP a=rtcp-muxa=group:BUNDLE http://tools.ietf.org/html/draft-ietf-mmusic-sdp-bundle-negotiation http://datatracker.ietf.org/doc/rfc5761/ © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  31. 31. Rtp Sender Rtp Receiver Dtls Transport Ice Transport Local Track NET Ice Transport Dtls Transport Rtp Sender WebRTC / Object Model Example 1: Audio only, 1:1 Dtls Transport Ice Transport Rtp Receiver Remote Track Dtls Transport Ice Transport Rtp Transceiver Remote Track Local Track Rtp Transceiver RTP RTCP © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 Default 2n
  32. 32. Rtp Sender Rtp Receiver Local Track NET Remote Track Rtp Sender Local Track WebRTC / Object Model Example 1: Audio only, 1:1 rtcp-mux Dtls Transport Ice Transport Rtp Receiver Remote Track Dtls Transport Ice Transport Rtp Transceiver Rtp Transceiver © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 Rtcp-mux n
  33. 33. WebRTC / Object Model Example 2: Audio + Video, 1:1 rtcp-mux Rtp Sender Rtp Receiver Local Track NET Remote Track Rtp Sender Local Track Dtls Transport Ice Transport Rtp Receiver Remote Track Dtls Transport Ice Transport Rtp Transceiver Rtp Transceiver Rtp Sender Rtp Receiver Local Track NET Remote Track Rtp Sender Local Track Dtls Transport Ice Transport Rtp Receiver Remote Track Dtls Transport Ice Transport Rtp Transceiver Rtp Transceiver AUDIO VIDEO © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 Rtcp-mux n
  34. 34. RtpTransceiver RtpTransceiver Rtp Sender Rtp Sender Rtp Sender Rtp ReceiverTrack Rtp Sender Rtp Receiver Dtls Transport Ice Transport Local Track NET Ice Transport Dtls Transport Track Remote Track Rtp ReceiverTrack Remote Track Rtp Sender Track Local Track WebRTC / Object Model Example 2: Audio + Video, 1:1 rtcp-mux + BUNDLE RtpTransceiver RtpTransceiver © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 Both 1
  35. 35. Data Channel Data Channel WebRTC / Object Model Generic & Default ! RtpTransceiver RtpTransceiver Rtp Sender Rtp Sender Rtp Sender Rtp ReceiverTrack Rtp Sender Rtp Receiver Dtls Transport Ice Transport Local Track NET Ice Transport Dtls Transport Track Remote Track Rtp ReceiverTrack Remote Track Rtp Sender Track Local Track RtpTransceiver RtpTransceiver Sctp Transport Data Channel Sctp Transport Data Channel © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 Both 1
  36. 36. 全体像 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 • 2015年初頭のWebRTC • オブジェクトモデルAPIs • のり (Transceiver) • もっとはやくICE • サイマルキャスト • その他、WebRTC 1.0に入るトピック
  37. 37. 復習 マルチキャスト vs サイマルキャスト vs SVC © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 A B C マルチキャスト • 複数トラック • 別々にデコード可能 • 帯域管理も別々 HD SD QVGA サイマルキャスト • 複数トラック • 同一のメディアソースから • 別々にデコード可能 • 可能であれば賢く帯域管理 1SSRC Δ2 Δ1 QVGA SVCエンコーディング • 複数トラック • 同一のメディアソースから • 別々にデコード不可 (ベースレイヤを除く) • 賢い帯域管理は必須 • 少ない帯域、さらに柔軟に 1SSRC E E E E E E SVCEnc. D D D HD SD QVGA
  38. 38. 復習 マルチキャストシグナリングの状態 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 WebRTCの開始時より、別々のPeerConnectionを使っ て複数のメディアストリームを送信可能だったが、 多くのポートを消費し、トラック間の同期が無かった (リップシンクのずれ、…) A B C E E E マルチキャスト • 複数トラック • 別々にデコード可能 • 帯域管理も別々
  39. 39. 復習 マルチキャストシグナリングの状態 1つのPeerConnectionで複数のストリームを扱う! © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  40. 40. © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 A B C Multicast • Several tracks • Decodable separately • Bandwidth management separated HD SD QVGA 1SSRC Δ2 Δ1 QVGA SVC Encoding • Several tracks • Coming from the same source • Not Decodable separately (Except base layer) • Smart bandwidth management mandatory • Less bandwidth, more resilience. 1SSRC E E E E E E SVCEnc. D D D HD SD QVGA 復習 マルチキャスト vs サイマルキャスト vs SVC サイマルキャスト • 複数トラック • 同一のメディアソースから • 別々にデコード可能 • 可能であれば賢く帯域管理
  41. 41. サイマルキャスト: webRTC 1.0でのユースケース - webrtc 1.0のユースケース: SFU - ブラウザはマルチキャストで送る、 だけど受信はできない (WebRTC 1.0 では) デスク トップ HD SFU SD QVGA Chrome Book モバイル デスク トップ HD SD QVGA © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  42. 42. サイマルキャスト (SVCは後で): 3 レイヤ, 3つのWG, 2つの標準団体 - 以下の様に分割する - “on-the-wire※”の情報(1), - JSのAPI (2), - シグナリング (3) シグナリング サーバ Web サーバ Bob (ブラウザ) Alice (ブラウザ) Media (3) (2) (1) © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 ※: (訳注)実際に流れてい るメディア(RTPなど)だと考え ると分かりやすいです
  43. 43. 全体像 © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0 • 2015年初頭のWebRTC • オブジェクトモデルAPIs • のり (Transceiver) • ICEと最適化 • サイマルキャスト • その他、WebRTC 1.0に入るトピック
  44. 44. スクリーンキャプチャAPIの簡易化 - スクリーン、ウィンドウ、アプリ間での区別無し => これ以上の制約なし、フラットなリスト • Screen Capture http://w3c.github.io/mediacapture-screen-share/ © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  45. 45. ストリームを録画(ローカル)、だけど全てじゃない(リモート) http://www.w3.org/TR/mediastream-recording/ メディアストリーム録画(クライアント側) © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  46. 46. <AUDIO> または <VIDEO>をソースとして使う! http://w3c.github.io/mediacapture-fromelement/ DOMエレメントのMedia Capture および Image Capture (スナップショット) © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  47. 47. 異なるストリームを異なるアウトプットへ http://w3c.github.io/mediacapture-output/ オーディオ出力デバイス API © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  48. 48. http://www.w3.org/TR/webrtc-stats/ WebRTCの統計APIに対する識別子 データチャネル、コーデック、FECに対する完全な統計… © Dr. Alex Gouaillard @ Cosmo Consulting., 2015. Document provided under CC BY-NC 4.0
  49. 49. 譲渡できるデータチャネル つまりワーカ内でデータチャネルを使う © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  50. 50. セキュリティ: IPアドレス漏洩 候補収集に関する4つのレベル - 全部 [同意有り] - 制限その1 (ホスト + 1918) [デフォルト] - 制限その2 (ホスト無し) [設定/拡張] - プロキシ/VPNだけ [設定/拡張] © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0
  51. 51. 結論 WebRTC 1.0はハンパじゃない [邪悪な笑いを浮かべつつ] © Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0

×