はじめてのWebRTC/ORTC

Copyright © NTT Communications Corporation. All rights reserved.
HTML5 Conference 2015 in ⿅児島
はじめてのWebRTC/ORTC
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
• 最新Web技術として注⽬を集めている
WebRTC/ORTCに興味を持ってもらう。
• WebRTCは様々なシーンで活⽤できそうだという期待
感を持ってもらう。

想定聴者
• WebRTC/ORTCは初⽿な⽅
• WebRTCを利⽤したアプリ開発をやってみたいと考え
ている、もしくはやっている⼈
• WebRTCについてはかなり深い部分まで理解してる
5

本⽇のアジェンダ
6
• はじめてのWebRTC/ORTC
• WebRTCとは
• 活⽤事例、デモンストレーション
• WebRTCで使われている技術要素の紹介
• 最新標準化動向
• SkyWayをつかって開発してみよう
を紹介

Copyright © NTT Communications Corporation. All rights reserved. 7
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のクライアント対応状況
10
対応状況 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 ネイティブ要コンパイル

11
• WebRTCとは
を紹介

コンシューマ向けWeb会議
12
• インストール不要、認証も不要、URLにアクセスするだけで開始。
• ビデオの場合は8⼈まで、オーディオのみの場合は
20⼈までの、グループチャットに対応。 SkyWaySkyWayで
シグナリング
WebRTCでメッシュ状に接続し、
マイク⾳声、カメラ映像を
すべての相⼿に送信
WebRTC Chat on SkyWay
https://chat.skyway.io
デモ有

• 資料共有機能も簡単（利⽤時はプラグイン/エクステンション導⼊が必要)
スクリーンシェアデモ有

Click to Call
14
• ゲートウェイでWebRTC⇔VoIPを変換することにより、ブラウザからコンタクト
センタに電話がかけられる。
• 電話をかける前の、ログイン情報、ページ遷移、⼊⼒情報などをオペレータのWebブラウザで確認
できる。(IVRの⾼度化)
• 通話中や通話終了後に、テキストや画像のやりとりができる。
ゲートウェイ
WebRTCと
VoIPを変換
WebRTC
ブラウザ
SIP+RTP
IP電話網
固定電話網
電話
回線
コンタクトセンタ
電話機
(既存)
ブラウザ
Internet等
データ中継サーバ
カスタマ
ブラウザの
情報を中継

1click.io : カスタマサポートの新規チャネル
15
• ウェブサイトのカスタマサポートの⼿段として、
お客様が閲覧中に1クリックでカスタマサポートへ接続する
• (前⾴の4の例)
https://1click.io/

字幕付きボイスチャット
16
• ⾳声認識機能を組み合わせ、通話内容をテキストで表⽰。
• 電⾞や会議中等の通話できない環境、議事録の⾃動作成、安全な歩きスマホ等に適⽤
可能。
• ⾳声⇛テキスト変換はGoogle Chromeの⾳声認識APIを利⽤。
字幕付きボイスチャット
相⼿との通話内容が吹き出し⾵に表⽰される
https://skyway.io/example /caption-phone/
SkyWay
0.SkyWay
でシグナリング
4.テキストを送受信
⾳声認識
API
⾳声認識
API
2.⾳声を
テキスト化
3.⾳声を送受信
1.話す 5.⾳声を再⽣
テキストを表⽰
デモ有

テレプレゼンス・ロボット
17
• ビデオ会議機能を備えた遠隔操作ロボット。
• Double Robotics社、Romotive社のロボットは、WebRTC技術を採⽤。
• 難病で登校できない⼦供が、学校に配備されたロボットを利⽤するなどの事例もある
。(VGo社)
0.シグナ
リング
1.映像と⾳声を
送受信
2.会話
2.会話
SkyWay
Romo by Romotive
www.romotive.jp
¥15,660
ロボット側はiPhoneを利⽤。
操作側はiOSアプリか
ブラウザを利⽤。
Double by Double Robotics
www.doublerobotics.com
$2,499
ロボット側はiPadを利⽤。
操作側はiOSアプリか
ブラウザを利⽤。

ROMO TURISMO
18
https://www.youtube.com/watch?v=oO-WjCKX9LY

Skype for Web
19
• Skype for Webのβ版が 2015/6/15 から提供開始（そのうちORTCに？）
• SkypeもNativeクライアントが不要になった
https://web.skype.com/ja/

Facebook ビデオチャット
20
• FacebookにもWebRTCを利⽤したビデオチャット機能が実装されている
デモ有

Zoen：オンライン⾳楽レッスンサービス
21
• 先⽣〜⽣徒間の⾳声映像通信をWebRTCで実現
https://www.thezoen.com/

iCam: WebRTCの監視カメラ
22
• WebRTC機能を備えた監視カメラ
• WebRTCを利⽤できる機器なら何でも遠隔で閲覧できる
http://www.amaryllo.eu/

スマホで撮った多数の映像を表⽰
23
• 2000⼈規模のカンファレンス(HTML Conference 2013)会場で
スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰した。
SkyWay
SkyWayで
シグナリング
カメラの映像を
WebRTCで送信
HTML5 JUMBOTRON
jt.skyway.io
デモ有

スマホで撮った多数の映像を表⽰
24
• 2000⼈規模のカンファレンス(HTML Conference 2013)会場で
スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰した。
デモ有
http://is.gd/html5jt#0100
Chrome、Firefox（PC・Android限定）でアクセス！

MistCDN
25
・ブラウザ間でコンテンツをシェアするCDNサービス
・WebRTCのdata channelを利⽤している
https://www.mist-t.co.jp/#demo
デモ有

26
• WebRTCとは
を紹介

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

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

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

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

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

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

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

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

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

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

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

TURNの使いどころ
38
どうしても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リレー
39
シンメトリック
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リレー
40
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を使っても通らない場合がある
41
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が存在する
おいおい、中⾝が怪しいぞ！

42
１．ICE

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

44
１．ICE

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

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

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

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

49
１．ICE

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

51
• WebRTCとは
を紹介

WebRTCに関する標準化動向
52
WebRTCとIETFによって標準化が進められている。
•W3C
• Web Real-Time Communications Working Group
• http://www.w3.org/2011/04/webrtc/
• Webブラウザに実装するAPIの標準化を担当する
•IETF
• Real-Time Communication in WEB-browsers Working Group
• http://tools.ietf.org/wg/rtcweb/
• プロトコルレベルでの標準化を担当する
• オーディオやビデオのコーデック、セキュリティ、JSEP、ICE、データ通信プロトコル等
の標準化を担当する
今回はW3Cの話をします

W3Cによる標準化ロードマップ
53
Media Capture
and Streams
WebRTC 1.0
RTC Between
Browsers
MediaStream
Recording
MediaStream
Image Capture
MediaStream
Depth Stream
Extensions
Identifiers for
WebRTC’s
Statistics API
※W3C公式のWorking draftになっているものだけ記載
2013/9/3
●WD
2013
2013/9/10
●WD
2013/2/5
●WD
2013/7/9
●WD
2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014
●CR ●PR
WD：Working Doraft / 草案
CR :Candidate Recomendation / 勧告候補
PR：Proposed Recommendation / 勧告案
Rec：Recommendation / 勧告
1Q : 1⽉〜3⽉
2Q：4⽉〜6⽉
3Q：7⽉〜9⽉
4Q：10⽉〜12⽉
●Rec
●CR ●PR
2017/1Q
●Rec
2017 2018
2017/1Q
●Rec
●CR ●PR
3Q
●Rec
●CR 2017/2Q
●PR
3Q
●Rec
●CR 2017/2Q
●PR
●CR ●PR
2017/1Q
●Rec
出展：http://www.w3.org/2015/06/webrtc-charter.html
2014/10/7
●WD
2014/10/21
●WD

54
Audio Oputpu
Devices API
Screen Capture
WebRTC
Next Version
2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014
●PR ●Rec
2017
Media Capture
from DOM
Elements
●CR ●PR ●Rec
1Q : 1⽉〜3⽉
2Q：4⽉〜6⽉
3Q：7⽉〜9⽉
4Q：10⽉〜12⽉
●CR
●CR ●PR ●Rec
2016/1Q
●WD
2017/2Q
●CR
2017/4Q
●PR
2018/1Q
●Rec
2018
2015/2/10
●WD
2015/2/10
●WD
2015/2/19
●WD

55
Media Capture
and Streams
WebRTC 1.0
RTC Between
Browsers
MediaStream
Recording
MediaStream
Image Capture
MediaStream
Depth Stream
Extensions
Identifiers for
WebRTC’s
Statistics API
2013/9/3
●WD
2013
2013/9/10
●WD
2013/2/5
●WD
2013/7/9
●WD
2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014
●CR ●PR
1Q : 1⽉〜3⽉
2Q：4⽉〜6⽉
3Q：7⽉〜9⽉
4Q：10⽉〜12⽉
●Rec
●CR ●PR
2017/1Q
●Rec
2017 2018
2017/1Q
●Rec
●CR ●PR
3Q
●Rec
●CR 2017/2Q
●PR
3Q
●Rec
●CR 2017/2Q
●PR
●CR ●PR
2017/1Q
●Rec
2014/10/7
●WD
2014/10/21
●WD
getUserMediaとか
P2Pを⾏うための通
信系のAPI
認証とか、統計情
報取得のためのAPI
メディアストリー
ムを録⾳／録画す
るためのAPI

56
Audio Oputpu
Devices API
Screen Capture
WebRTC
Next Version
2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014
●PR ●Rec
2017
Media Capture
from DOM
Elements
●CR ●PR ●Rec
1Q : 1⽉〜3⽉
2Q：4⽉〜6⽉
3Q：7⽉〜9⽉
4Q：10⽉〜12⽉
●CR
●CR ●PR ●Rec
2016/1Q
●WD
2017/2Q
●CR
2017/4Q
●PR
2018/1Q
●Rec
2018
2015/2/10
●WD
2015/2/10
●WD
2015/2/19
●WD
スクリーンキャプ
チャAPI

ここまで聞いて、皆さん、思いますよね？
57
注⽬されてるとか⾔ってるけど、まだまだ先やんかー。

その通りです！
58
WebRTCはGoogleやMozillaの実装ドリブンで検討が進んでいるの
で、仕様化は⼆の次・三の次。
ブラウザで実装してみる
↓
ここが使いにくいな・・等、フィードバック
↓
ある程度実装がFIXしたので仕様書に落とそう

WebRTCの今後
59
WebRTCのロードマップの中にNext Versionというものあります
WebRTC 1.1または2.0と⾔われてますが、次のバージョンを語る
上で外せないのが、ORTCという兄弟仕様の存在。
WebRTC
Next Version
2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014 2017
2016/1Q
●WD
2017/2Q
●CR
2017/4Q
●PR
2018/1Q
●Rec
2018

ORTC
ORTCとはなにか？
• 現⾏のWebRTC1.0のイケてない点を改善すべく提
案されたもう⼀つのRTC API
どこで議論されているのか？
• ORTC(Object Real-time Communications) Community
Group
https://www.w3.org/community/ortc/
• 最新Draft：2015/6/23
http://ortc.org/wp-
content/uploads/2015/06/ortc.html
60

ORTCの特徴
61
• 仕様⾯（今のWebRTCの不便な点を克服）
• SDPを直接JavaScriptで操作しない
• ステートレスにリアルタイム通信を⾏うためのAPI設計
• H.264/SVCなどのモバイルにやさしいコーデックを推奨する
• 実装⾯（実は今のWebRTCでは規定されていない）
• モバイル・アプリケーションとの互換性を担保（SDKを⽤意）
• キャリアスケールオペレーションに必要な監視、診断機能を⽤意
• サーバサイドのORTC Client実装をリファレンス提供
• STUN/TURNの認証管理の仕組みを提供
• オーディオ、ビデオのミキシングの仕組みをリファレンス提供等

ORTCはマイクロソフトがやる気です
62
http://dev.modern.ie/platform/status/multicolumnfullsupport?filter=f3f0000bf&search=RTC
• Microsoft Edgeでサポートされることはほぼ確定路線

63
• WebRTCとは
を紹介

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

そこで登場、SkyWay！
65
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は独⾃に設定

開発してみる（JavaScriptの場合）
n STEP0 - ライブラリの読み込み
<script src="https://skyway.io/dist/0.3/peer.js"></script>
n STEP1 - Peerオブジェクトの⽣成
var APIKEY = '6165842a-5c0d-11e3-b514-75d3313b9d05’;
var peer = new Peer({ key: APIKEY});

n STEP2 - 相⼿からの着信イベントを処理するハンドラーを設置
peer.on('open', function(){
//⾃分のPeerID（いわゆる電話番号）が⽣成されたら発⽕する
});
peer.on('call', function(call){
//相⼿からの着信があった場合に応答する
call.answer(window.localStream);
});
peer.on('error', function(err){
//何らかのエラーが発⽣した場合に発⽕する
console.log(err.message);
});

n STEP3 - ⾃分⾃⾝のオーディオ、ビデオストリームを取得
navigator.getUserMedia({audio: true, video: true}, function(stream){
//⾃分のVideoタグに表⽰
$('#my-video').prop('src', URL.createObjectURL(stream));
//相⼿に送るために保存
window.localStream = stream;
}, function(err){
//エラー処理は必須
console.log(err);
});
※getUserMediaにはブラウザごとにベンダープレフィックスがあります

n STEP4 - 相⼿に発信＆発信後のイベントを処理するハンドラを設置
var call = peer.call(PeerId, window.localStream);
call.on('stream', function(stream){
//相⼿のオーディオ、ビデオストリームをVideoタグに表⽰
$('#their-video').prop('src', URL.createObjectURL(stream));
});
call.on('close’,function(){
//相⼿が切断した場合に切断処理を⾏う
});
※PeerIDの受け渡しは開発者が独⾃に実装する必要あり
peer.listAllPeers()というメソッドも⽤意しています

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

サンプルアプリはGitHub上にてオープンソースで公開中
https://github.com/nttcom/

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

まとめ
76
• WebRTCとは
を紹介

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

はじめてのWebRTC/ORTC

More Related Content

What's hot

Similar to はじめてのWebRTC/ORTC

More from Yusuke Naka