WebRTCハンズオン

Copyright © NTT Communications Corporation. All rights reserved.
WebRTCハンズオン
NTTコミュニケーションズ株式会社
技術開発部
仲裕介

⾃⼰紹介
1
uなかゆうすけ（@Tukimikage）
l NTTコミュニケーションズ技術開発部所属
Ø 主にWebエンジニア
l コミュニティ活動
Ø WebRTC Meetup Tokyo主催 http://webrtcjp.info/

⾃⼰紹介
2
u 仕事その１
WebRTC開発者向けプラットフォームSkyWayの開発・運営
・2013年12⽉5⽇に提供開始
・詳しくは後ほど！
https://skyway.io

⾃⼰紹介
3
u 仕事その２
HTML5 Experts.jpの運営
・HTML5に特化した
Web技術者向け情報メディア
・⽇本最⾼峰のWebエキスパート、
コントリビューターによる情報発信
・コントリビューター（寄稿者）募集！
https://html5experts.jp/

今⽇のスケジュール
4
• WebRTCについて知る（座学）
• WebRTCのシグナリングを体感する
• WebRTCで簡単なビデオチャットアプリを開発する
ー休憩ー
• SkyWayについて知る（座学）
• SkyWayを使ってビデオチャットを作る
• WebRTCをビジネスで活⽤するために知っておくこと（座学）

このハンズオンの対象者
• Webデベロッパー
5

• こちらのリポジトリを参照して下さい。
https://github.com/yusuke84/webrtc_handson
事前準備
6

座学
7
WebRTCについて知る

Copyright © NTT Communications Corporation. All rights reserved. 8
HTML5の全体像
HTML5が提供する機能は多岐にわたる。WebRTCはその⼀つの技術。
引⽤元：http://www.slideshare.net/dynamis/web-standards-infographics

WebRTCとは（概要）
ひとことで⾔うと「ブラウザでテレビ電話を実現する技術」
ブラウザだけで、プラグインのインストール無しに、Web会議、
ボイスチャット、テキストチャット、ファイル転送、電話との連
携等が実現可能。
従来のWeb WebRTC
カメラやマイ
クを利⽤可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利⽤不可
サーバサーバ

WebRTCとは（技術⾯）
技術的には2つの側⾯がある。
1.⾳声、映像、データのリアルタイム・コミュニケーションのオープン標準
l 従来のサービス(WebEx、Skype等)は互換性がなく、独⾃技術を含む。
WebRTCは相互接続が保証され、ライセンス使⽤料が不要。
1.ブラウザとネイティブアプリの両⽅で利⽤できる
l 例えば、オープンソースのC++のコードを利⽤しコンパイルすれば、ネイティ
ブアプリにWebRTC機能を組み込むこともできる。

WebRTCのクライアント対応状況
11
対応状況 OS アプリ備考（2015/7/4現在）
✔ Windows Chrome
✔ Windows Firefox テレビ電話機能も搭載
✔ Windows IE プラグインが必要
✘ Windows Edge
2014年10⽉に開発着⼿を発表
ORTCが実装される予定
2015年7⽉段階では⼀部機能の
み実装（getUserMedia）
✔ Windows ネイティブ要コンパイル
✔ Mac Chrome
✔ Mac Firefox テレビ電話機能も搭載
✔ Mac Safari プラグインが必要
✔ Mac ネイティブ要コンパイル
✔ Android Chrome
✔ Android Firefox
✔ Android 標準ブラウザ Android 5.0で対応
✔ Android ネイティブ要コンパイル
✘ iOS Chrome
✘ iOS Safari
✔ iOS ネイティブ要コンパイル

WebRTC技術の全容
12
https://www.flickr.com/photos/noaaphotolib/5041457573

WebRTC技術の全容
13
まずは、海の上に出ている部分を理解
しましょう。

WebRTCの技術要素
14
WebRTCには様々な技術が使われています。
これから使⽤されている技術要素を順番に紹介します。
１．ICE
２．シグナリング
３．P2Pによるセキュアなリアルタイム通信
４．⾳声、映像処理

ICE(Interactive Connectivity Establishment)
1515
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
WebRTC Cli WebRTC Cli
WebRTCクライアント同⼠がP2Pでネットワークを介してつながるために
必要な仕組みを提供する
STUN
・⾃分のグローバルIP、
ポート番号を知る
・UDPホールパンチングという
仕組みでNATに⽳を開ける
TURN
・どうしてもNATに⽳を開けら
れない場合に、データ通信を
中継する仕組み
・WebRTCコネクション全体の
8〜9%はTURNが必要と
⾔われている（⽇本はもっと多いかも）
TURN
サーバ

UDPホールパンチング
16
NAT
STUN
NAT
※後述するNAT Typeにより挙動が変わります

17
俺のグローバル
IPとポート番号
教えて
111.111.111.111
50000番やで
NAT
STUN
NAT

18
俺のグローバル
IPとポート番号
教えて
222.222.222.222
20000番やで
NAT
STUN
NAT
IP:111.111.111.111
PORT:10000番

19
NAT
STUN
NAT
IP:111.111.111.111
PORT:10000番
IP:222.222.222.222
PORT:20000番
互いのIPとPORTを
何らかの⼿段で交換
（シグナリング）

20
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
アクセスさせ
てー！だめー。
⽳開いた！

21
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
通れる！！
アクセスさせてー。
⽳開いた！

22
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
もしかして！
通れる！

TURNの使いどころ
23
どうしてもNATに⽳があかない場合はTURNを利⽤する
互いのNAT
Type
フルコーン制限付きフ
ルコーン
ポート制限
付きフル
コーン
シンメト
リック
フルコーン STUN STUN STUN STUN
制限付きフ
ルコーン
STUN STUN STUN STUN
ポート制限
付きフル
コーン
STUN STUN STUN TURN
シンメト
リック
STUN STUN TURN TURN
※NAT Typeは厳密に細分化すると９パターンあります。
よ
り
セ
キ
ュ
ア
よりセキュア
※もっと詳しく知りたい⽅はこちら。
http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc

TURNリレー
24
シンメトリック
NAT
TURN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
TURNサーバを中継する
（中継するだけなので通信の中⾝はわからない）
クライアントはP2Pのつもり
IP:11.11.11.11
PORT:3478
IP:11.11.11.11
PORT:3478

TURNリレー
25
NAT
TURN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
TURNサーバを中継する
（中継するだけなので通信の中⾝はわからない）
IP:11.11.11.11
PORT:443
IP:11.11.11.11
PORT:443
TCPで通信可能TCPで通信可能
FW FW
TCP443か、怪しくないな！

TURNを使っても通らない場合がある
26
NAT
TURN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
IP:11.11.11.11
PORT:443
IP:11.11.11.11
PORT:443
Proxy Proxy
おいおい、中⾝が怪しいぞ！
例えば、マイン・ザ・ミドル可能なProxyが存在する
おいおい、中⾝が怪しいぞ！

27
１．ICE

シグナリング
28
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
ICEの仕組み等を利⽤して取得した情報を、互いに交換する仕組み
・どのような仕組みを⽤いても良い
・WebSocket（主流）
・XHRロングポーリング
・情報はSDPを⽤いて情報交換する
・テキストベースのプロトコル
・IPアドレス、ポート番号、
映像、⾳声コーデック情報
などを記載して交換する
・めちゃくちゃ難解

29
１．ICE

P2Pによるセキュアなリアルタイム通信
3030
すべての準備が整うとP2Pによる、セ
キュアな通信を開始
・映像・⾳声
・セキュアなリアルタイム通信（SRTP）
・AES（共通鍵暗号化）
・鍵交換にDTLSを⽤いる（DTLS-SRTP）
・データ
・TCP同様の信頼性、到達順序性、
フロー制御、輻輳制御をUDP上で実現
・セキュアなDTLS上で動作する
・DTLS
・通信経路暗号化
・データ整合性の保証
・認証⾏為は⾏わない（オレオレ証明書）
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
IP
UDP
SCTPSRTP
DTLS
⾳声・映像データ

P2Pだけじゃない・・多対多の通信
WebRTCはP2Pの通信が前提だが、ユースケースとしては多対多も
求められている。
31
フルメッシュでやる⽅法もあるが、端末への負荷がかかる
チューニングしても同時８つぐらいが限界

MCU（Multipoint Control Unit）を利⽤する。
メディアを集約、ミキシングし各デバイスに流す。
クライアント側の負荷が⼩さい。
サーバ側の負荷はエンコード、デコード処理が⼊るため負荷が⾼い。
32
MCU

SFU（Selective Forwarding Unit）を利⽤する。
クライアントからのストリームをコピーしてエンドポイントに転送する。
サーバ側の負荷は⼩さい。
33
SFU

34
１．ICE

⾳声・動画処理
35
WebRTCクライアントはPCやデバイスの⾳声映像ストリームにアクセスでき
る（以下、Webブラウザの場合）
・getUserMedia（WebAPI）
プラットフォーム上の
⾳声、映像ストリームを取得できる
W3Cによって規定されたAPI
・ブラウザに実装された
エンジンによって、
エンコード、デコード処理がなされる
・コーデック
・Video：VP8、H.264
・Audio：Opus、G.711 PCMA & PCMU
デバイスハードウェア
⾳声処理エンジン
コーデック
ジッタ/パケロス補正
エコー除去
ノイズリダクション
映像処理エンジン
コーデック
ジッタ/パケロス補正
⾳声・動画同期
画像補正
⾳声キャプチャ動画キャプチャ
内部WebRTC API
WebAPI（W3C）
引⽤元：オライリー・ジャパン
「ハイパフォーマンスブラウザネットワーキング」 P.301

ハンズオン
36
WebRTCのシグナリングを体感する
https://github.com/yusuke84/webrtc_handson/STEP1
WebRTCで簡単なビデオチャットアプリを
開発する

座学
37
SkyWayについて知る

WebRTCはWeb開発者にとってちょっと難しい
38
ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を
⾏う必要があり、実装にはネットワークの知識が必要。
38ようやく直接通信できる
これらの通信が
完了してから…

そこで登場、SkyWay！
39
n WebRTC利⽤アプリを簡単に開発できるクラウド基盤
2013年12⽉5⽇に提供開始
無料！
提供内容
シグナリングAPI
STUN/TURN API
JavaScriptライブラリ（PeerJS互換）
iOS/Androidライブラリ
サンプルアプリ
各種ライブラリ
⽇本語ドキュメント
https://skyway.io

SkyWayの特徴
SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので
、開発者は簡単にWebRTC利⽤アプリを開発できる。
STUN
API
Signaling
API
STUN
API
ライブラリライブラリ
APIとライブ
ラリが複雑な
処理を担う
TURN
API

開発者登録を⾏う
まずはアクセス → https://skyway.io
ここをクリック

APIキーの申請にはドメインが必要
n APIキーの申請に必要なもの
n お名前
n 連絡先メールアドレス
n SkyWayを利⽤するドメイン
n SkyWayを利⽤するドメイン
APIキーの不正利⽤を防ぐ⽬的のドメ
イン認証
n 例えば・・・
n ローカルで動かしたい
n 127.0.0.1
n localhost
n 開発サーバで動かしたい
n dev.domain.jp
n 本番サーバで動かしたい
n www.domain.jp
n iOSとAndroidは独⾃に設定

開発に必要な情報を提供
⽇本語ドキュメントを公開中
http://nttcom.github.io/skyway/docs/

開発に必要な情報を提供
開発者向けフォーラムを⽤意
SkyWay Technical Forum
• だれでも参加可能！
• 中の⼈が懇切丁寧に開発者の疑問質問にお答え！
• WebRTCに関す⽇本語での情報交換に活⽤してください
http://goo.gl/enBkcF

様々な機能を活⽤する

ハンズオン
46
SkyWayを使ってビデオチャットを作る

座学
47
WebRTCをビジネスで活⽤するために知っ
ておくこと

現状対応ブラウザでも細かな実装が異なる部分があります。
JavaScriptレベルの違い、スタックレベルでの違いなど、その差分
は様々です。
商⽤サービスを開発し運⽤していくうえで、⽇々変わるブラウザの
実装について、可能な限り追いかけて⾏くことが必要とされます。
ブラウザ毎の実装差分を理解せよ
48

iOSの場合はネイティブクライアントの導⼊が必須となります。モ
バイルクライアントを利⽤するのであれば、ネイティブアプリ開発
の知識が必要になります。
ネイティブクライアント開発も避けては通れない
49

ICEというNATを越える仕組みが⽤意されていますが、現実のネッ
トワークはそんなに⽢いモノではありません。
Wiresharkでの通信パケット解析の技術は合ったほうがいいです。
また、シグナリングで交換されるICE Candidate、SDPの中⾝につ
いては読めるようになっている⽅が良いでしょう。
「よくわからないけどつながらない」に備えよ
50

WebRTCを構成する技術で、JavaScriptAPI以外はほぼすべて、
IETFの中で議論がなされています。
ICEの話に始まり、リアルタイム通信プロトコルである
RTP/SRTP/RTCPやDTLS、SCTP、各種コーデックなどなど・・・
・実に幅広い技術が利⽤されています。
ガチでやるなら、避けては通れません。
IETFとも仲良くしよう
51

W3Cでは現在WebRTC1.0の仕様策定が進められていますが、
ORTCという兄弟仕様が既に登場しています。これは、Extensible
Webの流れに乗るものです。
WebRTC1.0は限定的なユースケースを元にAPI仕様が策定されて
きましたが、ORTCでは、ローレイヤーなAPIも仕様として定義さ
れています。ORTCの登場によって、WebRTCのユースケースは更
に広がりを⾒せてきます。また、Edgeは現在ORTCを実装中です。
WebRTC1.0制定後は、WebRTC1.0はORTCは今後融合し、
WebRTC NV（Next Version）へ移⾏する予定です。
標準化の動向をきちんとウォッチすることが重要です。
W3Cでの標準化は今まさに激動中
52

• ⽇本のWebRTC開発者が集まるSlack
http://webrtc-jp-slackin.herokuapp.com/
• WebRTCの⽇本語による最新情報
https://twitter.com/hashtag/webrtcjp
• SkyWayの開発者フォーラム
https://groups.google.com/forum/#!forum/skywayjs
• 最新情報はここで⼿に⼊れろ（英語だけど）
https://groups.google.com/forum/#!forum/discuss-webrtc
https://webrtchacks.com/
とりあえず、⼀⼈で開発するのは無理
53

ご清聴ありがとうございました！

WebRTCハンズオン

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to WebRTCハンズオン

Similar to WebRTCハンズオン (20)

More from Yusuke Naka

More from Yusuke Naka (18)

Recently uploaded

Recently uploaded (10)

WebRTCハンズオン