はじめに


WebRTC とは?

シンプルな答え

  • Web(ブラウザ)でビデオチャットをやるための仕様

もう少し詳しい答え

  • Web(ブラウザ)でビデオ/オーディオ/データのリアルタイム通信を行うための仕様
    • 双方向、片方向どちらも
  • Peer-to-Peer (P2P) で通信可能
  • 暗号化の仕組みを持つ
  • HTML5の一部、他の要素と組み合わせて利用
  • ブラウザだけでなく、Webに繋がるデバイス間で共通利用できることがゴール
    • ※以降の説明で「ブラウザ」とあるのは、適宜「デバイス」と読み替えてください

何ができるの?

webrtc_fig.png


どこで使えるの?

Windows Mac Linux Android iOS
Chrome ⚪︎ ⚪︎ ⚪︎ ⚪︎ ×
Firefox ⚪︎ ⚪︎ ⚪︎ ⚪︎ ×
Edge ⚪︎
IE ×
Safari ⚪︎ ⚪︎
App ⚪︎ ⚪︎ ⚪︎ ⚪︎ ⚪︎
  • ※ Mac OS X / iOS のSafariは、2017秋のSafari 11から対応(H.264のみ)。(What's new in Safari)
    • promiseベースの新しいAPIのみ対応
    • カメラ/マイクへのアクセスにはhttps:// 必須。Mac OS X の場合は開発者メニューから http://を使えるようにできる
  • Edge:ORTCに対応、WebRTCにCreators Update(2017.04.11)で対応(参考記事)。STUN利用やDataChannelには未対応
  • ?:iOS / Android 向けEdgeのリリース予告あり。対応状況未確認
  • ×: IEはサードパーティプラグイン有

誰が決めているの?

  • API ... W3C
    • ブラウザからどうやって使うか
  • アーキテクチャ、通信の仕様 ... IETF
    • 映像、音声のコーデック(圧縮方式)
    • 実際のデータの送り方(プロトコル)

誰が実装しているの?


P2P通信行うまで(1-1):シグナリング

P2P通信を行う前には

  • 通信相手の情報を知らなければならない
    • 電話なら、相手の電話番号
    • WebRTCなら、相手のIPアドレスや通信ポート
  • さらに、通信する内容を合わせる必要がある
    • 電話なら、日本語で話すのか英語で話すのか
    • WebRTCなら、映像/音声の有無とコーデック、などなど

signalling1.png


P2P通信行うまで(1-2):シグナリング

※ これをやり取りするのが「シグナリング」

  • 方法はWebRTCでは決められていない(自由に選べる)
  • シグナリングサーバーを用意するのが一般的
  • SDPと呼ばれる形式でやり取りする

signalling2.png


P2P通信行うまで(1-3):Offer / Answer

  • 通信を始める側から送るSDP: Offer
  • 通信に応答する側から送るSDP: Answer

offer_answer.png


P2P通信行うまで(2-1):NAT越え

  • P2P通信は、お互いのIPアドレスとポートを指定して行う
  • 実際の環境ではNATが挟まるケースが多い。例えば
    • 自宅内と外側
    • 会社内と外側
    • 異なるモバイルネットワーク
  • NATが入ると、相手から見えるIPアドレスとポートが変わってしまう
    • 自分では分からない

nat.png


P2P通信行うまで(2-2):NAT越え

  • 外部から見たIPアドレスとポートを知るための仕組み ... STUN
  • NATで変換されたIPアドレス/ポートをSTUNサーバーに教えてもらう

stan.png


P2P通信行うまで(2-3):NAT越え

  • STUNサーバーから取得した情報を、通信相手と交換する

stan2.png

※実際に繋ぐにはUDPホールパンチングという手法が用いられる(今日は省略)


P2P通信行うまで(3):Firewall越え

  • WebRTCではUDP/IPを利用、ポート番号は動的に決定
  • Firewallによって、ポートが制限されたり、UDPが禁止されることがある
  • このようなケースでも通信を可能にする仕組み ... TURN
    • TURNサーバーが全てのパケットを中継する
    • ポート範囲の制限や、固定が可能
    • UDPだけでなく、TCPでの通信も可能
    • パケットは暗号化されたまま扱う

turn.png


STUN/TURNとシグナリング

シグナリングで交換する情報

  • SDP
  • STUN/TURNを含む通信経路の情報: ICE Candidate
    • ローカルネットワーク内の直接通信
    • STUNで取得した外部IPアドレス/ポートを使ったNAT越え
    • TURNサーバー経由

適切な通信経路を選ぶ仕組み → ICE

参考:WebRTCのICEについて知る


2つの方式: Vanilla ICE と Trickle ICE

  • 経路情報であるICE Candidateは、非同期に収集される
  • Vanilla ICE
    • 全てのICE Candidateが出揃ってから、SDPに含めて交換する方式
    • 処理がシンプル
  • Trickle ICE
    • 初期SDPを交換し、ICE Candidateを発見するたびに順次交換する方式
    • 全てのICE Candidateを収集する前に、P2P通信に成功する可能性がある

Vanilla ICEの場合

vanilla.png


Trickle ICEの場合

trickle.png


参考資料


なにかご質問は?

それでは、準備に進みましょう