webrtc boot camp (webrtc conference japan 2016) 事前公開版

WebRTC Boot Camp

WebRTC Conference Japan http://webrtcconference.jp/

2016/02/16~17

2016/02/17金城 雄

NTTアドバンステクノロジ Twitter @youkinjoh GitHub @youkinjoh SlideShare @You_Kinjoh

事前公開版

Boot Camp

WebRTCとは

ブラウザでビデオチャットを するための仕様。 テキストやバイナリも送信可能。 ブラウザ間をP2Pで接続。

ビデオチャットを 実現するために必要な機能

マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.

ビデオチャットを 実現するために必要な機能

マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.

盛り沢山

ビデオチャットを 実現するために必要な機能

マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.

これらの多くを Wrap

ビデオチャットを 実現するために必要な機能

マイク・カメラへのアクセス IPアドレスとPortの取得 IPアドレスとPort情報の交換 音声・映像コーデック情報の交換 UDP(暗号化含む) NAT越え メディア制御(ジッタ・パケロス制御含む) etc.

バッドノウハウ いっぱい

最低限 知らないといけないこと

Media Capture and Streams WebRTC 1.0: Real-time Communication Between Browsers signaling

最低限 知らないといけないこと

Media Capture and Streams WebRTC 1.0: Real-time Communication Between Browsers signaling

今日はこのふたつを 三分間クッキング 方式でやりつつ...

こちらを手動で行う ところまでを 実践する予定です。

主な2つの仕様Media Capture and Streams ブラウザからカメラやマイクの メディアストリームを取得するための仕様 WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザをP2Pで接続し 通信を行うための仕様

カメラやマイクに ブラウザからアクセス

Media Capture and Streams

ブラウザからマイクやカメラにアクセス 再生するにはVideo/Audio要素との連携が必要

メソッド名がgetUserMediaのためgetUserMediaと呼ばれることが多い 略してgUMと記述されることもある

JavaScript

<audio /><video />

getUserMedia

MediaStream

MediaStream

取得 再生/表示

ブラウザとブラウザの 接続(P2P)

WebRTC 1.0: Real-time Communication Between

BrowsersブラウザとブラウザをP2Pで接続 IPアドレス/Port番号取得 P2Pの為にはシグナリングが必要(後述) IP/Port・音声・映像コーデック etc.

etc. PeerConnectionと呼ばれることもある

SignalingSTUN

Global IPとPort番号を取得

NAT NAT

WebRTC 1.0: Real-time Communication Between

Browsersキーワード SDP 音声・映像コーデック等

ICE Candidate 経路候補 IPアドレス/Port番号

アドレス(等)の交換

シグナリング (signaling)

P2P接続の前に交換が必要な情報 音声や映像のコーデック(符号化形式)等 IPアドレス/Port番号

その手段は仕様では定められていない WebSocketが使われることが多い

呼制御と呼ばれることも...

SignalingSTUN

IP/Port等をSignalingサーバを

介して交換

NAT NAT

その他

NAT越え

越えられるかな? この俺を!

NAT越え

NAT : ルータ等のネットワーク機器 別々のLAN配下のブラウザは直接通信できない WebRTCにはNAT越えの手段が用意されている(が、それなりに隠匿されている) 理解していないと開発ツライ

SignalingSTUN

NATが邪魔で直接通信できない

NAT NAT

SignalingSTUN

NAT NAT

UDPホールパンチング

更なる発展のために

キーワードシグナリング関連 SDP / ICE Candidate

NAT越え関連 STUN / TURN / ICE / UDPホールパンチング

配信関連 SFU / MCU / SVC テキスト・バイナリ通信関連 DataChannel / SCTP

WebRTCの仕様は まさに今、移行期

getUserMediaの仕様が変わる Promiseを知る必要がある

ORTCの仕様が取り込まれる もっと事細かな制御が可能になる つまりもっと複雑になる

ここでは触れません

くじけないための 参考資料

参考資料書籍

ハイパフォーマンス ブラウザネットワーキング̶̶ネットワークアプリケーションのためのパフォーマンス最適化http://www.oreilly.co.jp/books/9784873116761/

WebRTC ブラウザベースのP2P技術http://www.ric.co.jp/book/contents/book_958.html

初級

WebRTCの技術解説 第二版 公開版 完全版 http://www.slideshare.net/nttwestcon/20140805-technical-description-of-webrtc-second-edition-public-edition-full-version

getUserMediahttp://www.slideshare.net/yusukenaka52/getusermedia

IP電話の次に起こるパラダイムシフト “WebRTC”への挑戦http://www.ntt.co.jp/journal/1508/files/jn201508036.pdf

中級

WebRTCのICEについて知るhttp://www.slideshare.net/iwashi86/webrtcice

WebRTCの裏側にあるNATの話 - A talk on NAT behind WebRTChttp://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc

SDP for WebRTC - From Basics to Maniacs -http://www.slideshare.net/iwashi86/20150311-web-rtcmeetup7sdp

TrickleICEとは - WebRTCの要素技術 -http://iwashi.co/2014/05/13/trickleice/

WebRTC スタックコトハジメhttps://gist.github.com/voluntas/6fcece7f424607c957d5

上級WebRTC is secure, or not secure? - WebRTC セキュリティ概説 -http://www.slideshare.net/iwashi86/20150128-web-rtcsecurity

WebRTCを支えるマイナーなプロトコル SRTP/DTLS/SCTPを分かった気になるhttp://www.slideshare.net/iwashi86/20140801-web-rtcmeetup3r3

ORTCについてそろそろ書いてみるhttp://iwashi.co/2015/08/13/ortc-and-webrtc/

ORTC が切り開く SVC サイマルキャストと WebRTC NVhttp://jxck.hatenablog.com/entry/ortc-to-webrtcnv

当資料の写真は、 PAKUTASO/ぱくたそ

の写真素材を利用しています。

https://pakutaso.com