2016 February - WebRTC Conference Japan - 日本語

WebRTC 1.0 …
Finally!
Dr. Alex Gouaillard
(訳者: Yoshimasa Iwase / @iwashi86)
© Dr. Alex Gouaillard @ Citrix Systems, 2015. Document provided under CC BY-NC 4.0

全体像
• 2015年初頭のWebRTC
• オブジェクトモデルAPIs
• のり (Transceiver)
• もっとはやくICE
• Ports
• サイマルキャスト
• その他、WebRTC 1.0に入るトピック

2015年初頭のP2PのWebRTCモデル
http://www.html5rocks.com/en/tutorials/webrtc/basics/
シグナリングシグナリング
メディア
発信側着信側

シグナリング
サーバ
PeerConnection
JavaScriptアプリ (送信側) JavaScriptアプリ (受信側)
PeerConnection
メディア
ストリーム
データ
チャネル
CreateOffer
SetLocal
SetRemote
SetLocal
SetRemote
オファー (SDP) アンサー (SDP)
Candidates
(SDP)
メディア
ストリーム
データ
チャネル
OnCandidate
AddCandidate
CreateAnswer
ICE
バインディング
＋接続テスト

シグナリング
サーバ
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
＋接続テスト
万能なPeerConnection
メディア
ストリーム
データ
チャネル
メディア
ストリーム
データ
チャネル

シグナリング
サーバ
ICE UADTLS
RTP
Code
c
CreateOffer
収集
SetLocal
SetRemote
ICE UA DTLS
RTP
Code
c
収集
SetLocal
SetRemote
Candidates
(SDP)
OnCandidate
AddCandidate
CreateAnswer
ICE
＋接続テスト
万能なPeerConnection
メディア
ストリーム
データ
チャネル
メディア
ストリーム
データ
チャネル

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

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.

シグナリング
サーバ
CreateOffer
SetLocal
SetRemote
SetLocal
SetRemote
Candidates
(SDP)
OnCandidate
AddCandidate
CreateAnswer
SDP, O/A, JSEP, Signaling
メディア
ストリーム
データ
チャネル
メディア
ストリーム
データ
チャネル

2015年初頭 Object Model API
~~ API だけ ~~
メディア
ストリーム
データ
チャネル
メディア
ストリーム
データ
チャネル

2015年第二四半期,
W3C WebRTCの新しいチャーター(憲章)
• => ORTC と WebRTCの統合
• オブジェクトモデルAPIの概念(ORTCにインスパイア)
http://ortc.org/wp-content/uploads/2014/08/ortc.html

オブジェクトモデルって何？
• 各オブジェクトは1つの仕事だけ
• 各オブジェクトは能力を調べられる(JS)
• パラメタはJSから動的に読み書きできる

Early 2015, peer-to-peer webRTC Model
Open Questions
最後のAPIを手に入れた
• どうやって帯域設定すればいいのか
• (マン・イン・ザ・ミドルアタックを防ぐために)
どうやってフィンガープリントを確認するのか
• どのCandidateペアが使われているのか
• どうやってICEの失敗についての詳細な情報を得るのか
• JSEP、SDP、オファー/アンサーをどうやったら除去できる？
• ネゴシエーションを再度実施せずに、フロント/自身のビューをス
イッチできる？
いくつかAPIがある、もっと良いやり方もある
• コーデックとそのパラメータをどうやって扱えばいいのか
• ICE収集をどうやって制限すればいいのか(自分のIPを晒したくない)
まだ解決されてない
• ICEハンドシェイクをどうやったら早くできるのか？

WebRTC = Obj. Model + JSEP ?
Obj Model

Obj Model API => PeerConnection API
Easy
PEERCONNECTION PEERCONNECTION

Peerconnection API => Easy
メディア
ストリーム
データ
チャネル
メディア
ストリーム
データ
チャネル

シグナリング
サーバ
Candidates
(SDP)
Obj. Model API  SDP
HARD
メディア
ストリーム
データ
チャネル
メディア
ストリーム
データ
チャネル

オブジェクトモデルを備えたWebRTC 1.0
と JSEP を足すと…
問題:
1. SDPのm行は本質的に双方向
2. SDPのm行はsender/receiverオブジェクトモデル
(mid)に合致する属性が無い。あったとしても、
重複してしまう。
オブジェクトモデルの上に、どのようにしてm行相当
のものを追加すればいいのか？ (将来的にSDPや
JSEPを捨てる場合にどうすればいいのか) ?

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
APP APP
SDP
API API

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/
Trickle:10秒から1秒へ
Q:どうやって100ミリ秒へ？

より早いICE
- コールする前に処理を開始！
- ICEプール
- プレ候補収集
- ペアリングと接続確認を単純化・高速化
- “ウォームアップ”
- ICE, DTLS, メディア中継をシグナリングの前に準備する
- アーリーメディア
- SDPアンサー送ると同時にメディア送信開始
- デフォルトSTUN/TURNサーバ

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/

RTP/RTCP
Default
4
Bundle
2
A
V
RTP RTCP
A
V
RTP RTCP
a=group:BUNDLE

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

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

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

Rtp
Sender
Rtp
Receiver
Dtls
Transport
Ice
Transport
Local
Track
NET
Ice
Transport
Dtls
Transport
Rtp
Sender
Dtls
Transport
Ice
Transport
Rtp
Receiver
Remote
Track
Dtls
Transport
Ice
Transport
Rtp
Transceiver
Remote
Track
Local
Track
Rtp
Transceiver
RTP
RTCP
Default
2n

Rtp
Sender
Rtp
Receiver
Local
Track
NET
Remote
Track
Rtp
Sender
Local
Track
rtcp-mux
Dtls
Transport
Ice
Transport
Rtp
Receiver
Remote
Track
Dtls
Transport
Ice
Transport
Rtp
Transceiver
Rtp
Transceiver
Rtcp-mux
n

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
Rtcp-mux
n

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
Example 2: Audio + Video, 1:1
rtcp-mux + BUNDLE
RtpTransceiver
RtpTransceiver
Both
1

Data
Channel
Data
Channel
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
Both
1

全体像
• もっとはやくICE

復習
マルチキャスト vs サイマルキャスト vs SVC
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

復習
マルチキャストシグナリングの状態
WebRTCの開始時より、別々のPeerConnectionを使っ
て複数のメディアストリームを送信可能だったが、
多くのポートを消費し、トラック間の同期が無かった
（リップシンクのずれ、…）
A
B
C
E
E
E
マルチキャスト
• 帯域管理も別々

復習
マルチキャストシグナリングの状態
１つのPeerConnectionで複数のストリームを扱う！

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
サイマルキャスト
• 可能であれば賢く帯域管理

サイマルキャスト:
webRTC 1.0でのユースケース
- webrtc 1.0のユースケース: SFU
- ブラウザはマルチキャストで送る、
だけど受信はできない
(WebRTC 1.0 では)
デスク
トップ
HD
SFU
SD
QVGA
Chrome
Book
モバイル
デスク
トップ
HD
SD
QVGA

サイマルキャスト (SVCは後で):
3 レイヤ, 3つのWG, 2つの標準団体
- 以下の様に分割する
- “on-the-wire※”の情報(1),
- JSのAPI (2),
- シグナリング (3)
シグナリング
サーバ
Web
サーバ
Bob
(ブラウザ)
Alice
(ブラウザ)
Media
(3)
(2)
(1)
※： (訳注)実際に流れてい
るメディア(RTPなど)だと考え
ると分かりやすいです

全体像
• ICEと最適化

スクリーンキャプチャAPIの簡易化
- スクリーン、ウィンドウ、アプリ間での区別無し
=> これ以上の制約なし、フラットなリスト
• Screen Capture
http://w3c.github.io/mediacapture-screen-share/

ストリームを録画(ローカル)、だけど全てじゃない(リモート)
http://www.w3.org/TR/mediastream-recording/
メディアストリーム録画(クライアント側)

<AUDIO> または <VIDEO>をソースとして使う！
http://w3c.github.io/mediacapture-fromelement/
DOMエレメントのMedia Capture
および Image Capture (スナップショット)

異なるストリームを異なるアウトプットへ
http://w3c.github.io/mediacapture-output/
オーディオ出力デバイス API

http://www.w3.org/TR/webrtc-stats/
WebRTCの統計APIに対する識別子
データチャネル、コーデック、FECに対する完全な統計…

譲渡できるデータチャネル
つまりワーカ内でデータチャネルを使う

セキュリティ: IPアドレス漏洩
候補収集に関する４つのレベル
- 全部 [同意有り]
- 制限その1 (ホスト + 1918) [デフォルト]
- 制限その2 (ホスト無し) [設定/拡張]
- プロキシ/VPNだけ [設定/拡張]

結論
WebRTC 1.0はハンパじゃない
[邪悪な笑いを浮かべつつ]

2016 February - WebRTC Conference Japan - 日本語

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to 2016 February - WebRTC Conference Japan - 日本語

Similar to 2016 February - WebRTC Conference Japan - 日本語 (20)

More from Alexandre Gouaillard

More from Alexandre Gouaillard (20)

2016 February - WebRTC Conference Japan - 日本語

Editor's Notes