Help us understand the problem. What is going on with this article?

WebRTCハンズオン 概要編

WebRTCハンズオン 概要編

by massie_g
1 / 24

はじめに


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
    • 映像、音声のコーデック(圧縮方式)
    • 実際のデータの送り方(プロトコル)

誰が実装しているの?

  • 本家 WebRTC.org ... Google, Mozilla など
  • 対抗 OpenWebRTC(※休眠中) ... Ericsson など

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


参考資料


参考:コーデックについて

  • ビデオコーデック

    • 仕様では VP8, H.264が必須
    • デスクトップ版 Chrome, Firefoxでは VP9をデフォルトに
    • Safariでは H.264 のみサポート
    • 次世代としてAV1が有望視 .. by Alliance for Open Media
  • オーディオコーデック


参考:WebRTCのトポロジー

  • P2P (Peer-to-Peer) ... ブラウザ同士が直接通信、フルメッシュ
  • MCU (Multipoint Control Unit) ... サーバー側で映像/音声を合成、再圧縮
  • SFU (Selective Forwarding Unit) ... サーバー側で映像/音声を配布

P2P

webrtc_p2p.png


MCU

webrtc_mcu.png


SFU

webrtc_sfu.png


なにかご質問は?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away