ドキュメント
Computer Science
Networking
Protocols
WebRTC

WebRTC

WebRTC（Web Real-Time Communication）は、ブラウザ間(かん) でピアツーピア接続(せつぞく) を確立(かくりつ) し、音声(おんせい) ・映像(えいぞう) ・データをリアルタイムで交換(こうかん) する JavaScript API。

概要

  • ブラウザ標準(ひょうじゅん) サポート、プラグイン不要(ふよう)
  • ピアツーピア（P2P）接続(せつぞく) 、低遅延(ていちえん)
  • 音声(おんせい) ・映像(えいぞう) ・データ転送(てんそう) に対応(たいおう)
  • Signaling Server で接続(せつぞく) を調整(ちょうせい)

WebRTC vs WebSocket

特性(とくせい)WebRTCWebSocket
接続(せつぞく) モードP2PClient-Server
転送(てんそう) プロトコルUDP（主(おも) に）TCP
遅延(ちえん)極(きわ) めて低(ひく) い低(ひく) い
用途(ようと)リアルタイム音声(おんせい) 映像(えいぞう)リアルタイムメッセージ

WebRTC が WebSocket を必要(ひつよう) とする理由(りゆう)

  • UDP はデータを検証(けんしょう) しない、重要(じゅうよう) なデータの転送(てんそう) には不向(ふむ) き
  • WebRTC には内蔵(ないぞう) の Signaling 機能(きのう) がない
  • 初期(しょき) 接続(せつぞく) 調整(ちょうせい) に WebSocket が必要(ひつよう)

コアフロー

WebRTC Process

接続確立フロー

  1. 双方(そうほう) の Peer が Signaling Server に接続(せつぞく)
  2. PeerA が自身(じしん) の SDP を取得(しゅとく) し setLocalDescription を呼(よ) び出(だ) す
  3. PeerA が SDP を Signaling Server に送信(そうしん)
  4. Signaling Server が PeerA の SDP を PeerB に送信(そうしん)
  5. PeerB が setRemoteDescription で PeerA の SDP を設定(せってい)
  6. PeerB が自身(じしん) の SDP を取得(しゅとく) し setLocalDescription を呼(よ) び出(だ) す
  7. PeerB が SDP を Signaling Server に送信(そうしん)
  8. Signaling Server が PeerB の SDP を PeerA に送信(そうしん)
  9. PeerA が setRemoteDescription で PeerB の SDP を設定(せってい)
  10. PeerA が STUN Server に public IP を問(と) い合(あ) わせ
  11. STUN Server が public IP を返答(へんとう)
  12. PeerA が TURN Server に relay 情報(じょうほう) を問(と) い合(あ) わせ（STUN 失敗(しっぱい) 時(じ) ）
  13. TURN Server が relay 情報(じょうほう) を返答(へんとう)
  14. PeerA が ICE Candidates を Signaling Server に送信(そうしん)
  15. Signaling Server が PeerA の ICE Candidates を PeerB に送信(そうしん)
  16. PeerB が setRemoteIceCandidate で設定(せってい)
  17. PeerB が手順(てじゅん) 10-16 を繰(く) り返(かえ) す
  18. P2P 通信(つうしん) 路(ろ) の確立(かくりつ) 完了(かんりょう)

Signaling

Signaling は通信(つうしん) セッションの設定(せってい) ・制御(せいぎょ) ・終了(しゅうりょう) のプロセス。

三大機能

  1. Session Control Information - セッション制御(せいぎょ) 情報(じょうほう)
  2. Exchange IP and Port - IP と Port 情報(じょうほう) の交換(こうかん)
  3. Exchange Codecs - コーデックとメディアタイプの交換(こうかん)

NAT トラバーサル技術

STUN（Session Traversal Utilities for NAT）

  • パブリック IP と Port の発見(はっけん) に使用(しよう)
  • 軽量(けいりょう) プロトコル
  • Google が無料(むりょう) STUN Server を提供(ていきょう)

TURN（Traversal Using Relay NAT）

  • STUN 失敗(しっぱい) 時(じ) に使用(しよう)
  • リレーサーバー経由(けいゆ) でデータを転送(てんそう)
  • TCP/UDP で NAT やファイアウォールを越(こ) える

ICE（Interactive Connectivity Establishment）

ICE は STUN、TURN などの NAT 穿通(せんつう) 技術(ぎじゅつ) を統合(とうごう) するフレームワーク。

{
  "sdpMLineIndex": 0,
  "sdpMid": "",
  "candidate": "a=candidate:2999745851 1 udp 2113937151 192.168.56.1 51411 typ host generation 0"
}

ICE は複数(ふくすう) の ICE Candidates を収集(しゅうしゅう) し、最適(さいてき) な接続(せつぞく) を見(み) つけるまで試行(しこう) 。

Trickle ICE

従来(じゅうらい) の方式(ほうしき) ではすべての ICE Candidates の収集(しゅうしゅう) 完了(かんりょう) を待(ま) つ必要(ひつよう) があった：

ICE Traditional

Trickle ICE は収集(しゅうしゅう) しながら送信(そうしん) でき、接続(せつぞく) を高速化(こうそくか) ：

ICE Trickle

ストリーミングメディア概念 

  flowchart LR
    VcC[音声採集]
    VdC[映像採集]
    VcEc[音声エンコード]
    VdEc[映像エンコード]
    Enc[パッケージ化]
    Network[ネットワーク転送]
    DeEnc[アンパッケージ]
    Dc[デコード]
    Output[出力デバイス]

    VcC --> VcEc --> Enc
    VdC --> VdEc --> Enc
    Enc --> Network --> DeEnc --> Dc --> Output

OSI レイヤー対応

レイヤープロトコル
3 (Network)IP
4 (Transport)TCP, UDP, SCTP
4 (Transport)ICE, STUN, TURN
6 (Presentation)TLS, DTLS
7 (Application)HTTP, SRTP

WebRTC API

Media Capture

  • navigator.mediaDevices.getUserMedia() - 音声(おんせい) 映像(えいぞう) ストリームを取得(しゅとく)
  • MediaStream - メディアストリームインターフェース
  • MediaStreamTrack - 単一(たんいつ) トラック（音声(おんせい) または映像(えいぞう) ）
  • MediaRecorder - マルチメディアデータの録画(ろくが)

Peer Connection

  • RTCPeerConnection - P2P 接続(せつぞく) の確立(かくりつ) と管理(かんり)
    • setLocalDescription() - ローカル SDP の設定(せってい)
    • setRemoteDescription() - リモート SDP の設定(せってい)
    • addIceCandidate() - ICE Candidate の追加(ついか)

Data Channel

  • RTCDataChannel - 双方向(そうほうこう) データチャネルの確立(かくりつ) 、任意(にんい) のデータを送信(そうしん)

ネットワークアーキテクチャ

アーキテクチャ説明(せつめい)
Mesh Network各(かく) ノードが直接(ちょくせつ) 相互(そうご) 接続(せつぞく)
MCU（Multipoint Conferencing Unit）中央(ちゅうおう) サーバーでストリームを合成(ごうせい)
SFU（Selective Forwarding Unit）選択的(せんたくてき) に転送(てんそう) 、合成(ごうせい) しない

関連トピック

TCPWebSocket