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.111PORT:10000番




19

NAT

STUN

NAT

IP:111.111.111.111PORT:10000番

IP:222.222.222.222PORT:20000番

互いのIPとPORTを何らかの⼿段で交換（シグナリング）




20

NAT

STUN

NAT

IP:222.222.222.222PORT:20000番

IP:111.111.111.111PORT:10000番

アクセスさせてー！だめー。

⽳開いた！




21

NAT

STUN

NAT

IP:222.222.222.222PORT:20000番

IP:111.111.111.111PORT:10000番

通れる！！アクセスさせてー。

⽳開いた！




22

NAT

STUN

NAT

IP:222.222.222.222PORT:20000番

IP:111.111.111.111PORT:10000番

もしかして！通れる！



TURNの使いどころ

23

どうしてもNATに⽳があかない場合はTURNを利⽤する

互いのNATType

フルコーン制限付きフルコーン

ポート制限付きフルコーン

シンメトリック

フルコーン 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


IP:222.222.222.222PORT:20000番

IP:111.111.111.111PORT:10000番

TURNサーバを中継する（中継するだけなので通信の中⾝はわからない）

クライアントはP2Pのつもり

IP:11.11.11.11PORT:3478

IP:11.11.11.11PORT:3478


TURNリレー

25


TURN


IP:222.222.222.222PORT:20000番

IP:111.111.111.111PORT:10000番

TURNサーバを中継する（中継するだけなので通信の中⾝はわからない）

IP:11.11.11.11PORT:443

IP:11.11.11.11PORT:443

TCPで通信可能TCPで通信可能

FW FW

TCP443か、怪しくないな！


TURNを使っても通らない場合がある

26


TURN


IP:222.222.222.222PORT:20000番

IP:111.111.111.111PORT:10000番

IP:11.11.11.11PORT:443

IP:11.11.11.11PORT: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サーバ


IPUDP

SCTPSRTPDTLS

⾳声・映像データ


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⽇に提供開始無料！

提供内容シグナリングAPISTUN/TURN APIJavaScriptライブラリ（PeerJS互換）iOS/Androidライブラリサンプルアプリ各種ライブラリ⽇本語ドキュメント

https://skyway.io


SkyWayの特徴

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

STUNAPI

SignalingAPI STUN

API

ライブラリライブラリ

APIとライブラリが複雑な処理を担う

TURNAPI


開発者登録を⾏う

まずはアクセス → https://skyway.io

ここをクリック


APIキーの申請にはドメインが必要

n APIキーの申請に必要なものn お名前n 連絡先メールアドレスn SkyWayを利⽤するドメイン

n SkyWayを利⽤するドメインAPIキーの不正利⽤を防ぐ⽬的のドメ

イン認証

n 例えば・・・n ローカルで動かしたい

n 127.0.0.1n 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開発者が集まるSlackhttp://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-webrtchttps://webrtchacks.com/

とりあえず、⼀⼈で開発するのは無理

53


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

webrtcハンズオン

Technology