Contenu connexe
Similaire à はじめてのWebRTC/ORTC (20)
はじめてのWebRTC/ORTC
- 1. Copyright © NTT Communications Corporation. All rights reserved.
HTML5 Conference 2015 in ⿅児島
はじめてのWebRTC/ORTC
NTTコミュニケーションズ株式会社
技術開発部
仲 裕介
- 2. Copyright © NTT Communications Corporation. All rights reserved.
⾃⼰紹介
1
uなかゆうすけ(@Tukimikage)
l NTTコミュニケーションズ 技術開発部 所属
Ø 主にWebエンジニア
l コミュニティ活動
Ø WebRTC Meetup Tokyo主催 http://webrtcjp.info/
- 3. Copyright © NTT Communications Corporation. All rights reserved.
⾃⼰紹介
2
u 仕事その1
WebRTC開発者向けプラットフォームSkyWayの開発・運営
・2013年12⽉5⽇に提供開始
・詳しくは後ほど!
https://skyway.io
- 4. Copyright © NTT Communications Corporation. All rights reserved.
⾃⼰紹介
3
u 仕事その2
HTML5 Experts.jpの運営
・HTML5に特化した
Web技術者向け情報メディア
・⽇本最⾼峰のWebエキスパート、
コントリビューターによる情報発信
・コントリビューター(寄稿者)募集!
https://html5experts.jp/
- 5. Copyright © NTT Communications Corporation. All rights reserved.
今⽇のセッションのゴール
4
• 最新Web技術として注⽬を集めている
WebRTC/ORTCに興味を持ってもらう。
• WebRTCは様々なシーンで活⽤できそうだという期待
感を持ってもらう。
- 6. Copyright © NTT Communications Corporation. All rights reserved.
想定聴者
• WebRTC/ORTCは初⽿な⽅
• WebRTCを利⽤したアプリ開発をやってみたいと考え
ている、もしくはやっている⼈
• WebRTCについてはかなり深い部分まで理解してる
5
- 7. Copyright © NTT Communications Corporation. All rights reserved.
本⽇のアジェンダ
6
• はじめてのWebRTC/ORTC
• WebRTCとは
• 活⽤事例、デモンストレーション
• WebRTCで使われている技術要素の紹介
• 最新標準化動向
• SkyWayをつかって開発してみよう
を紹介
- 8. Copyright © NTT Communications Corporation. All rights reserved. 7
HTML5の全体像
HTML5が提供する機能は多岐にわたる。WebRTCはその⼀つの技術。
引⽤元:http://www.slideshare.net/dynamis/web-standards-infographics
- 9. Copyright © NTT Communications Corporation. All rights reserved. 8
WebRTCとは(概要)
ひとことで⾔うと「ブラウザでテレビ電話を実現する技術」
ブラウザだけで、プラグインのインストール無しに、Web会議、
ボイスチャット、テキストチャット、ファイル転送、電話との連
携等が実現可能。
従来のWeb WebRTC
カメラやマイ
クを利⽤可
リアルタイ
ムに送受信
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利⽤不可
サーバ サーバ
- 10. Copyright © NTT Communications Corporation. All rights reserved. 9
WebRTCとは(技術⾯)
技術的には2つの側⾯がある。
1.⾳声、映像、データのリアルタイム・コミュニケーションのオープン標準
l 従来のサービス(WebEx、Skype等)は互換性がなく、独⾃技術を含む。
WebRTCは相互接続が保証され、ライセンス使⽤料が不要。
1.ブラウザとネイティブアプリの両⽅で利⽤できる
l 例えば、オープンソースのC++のコードを利⽤しコンパイルすれば、ネイティ
ブアプリにWebRTC機能を組み込むこともできる。
- 11. Copyright © NTT Communications Corporation. All rights reserved.
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 ネイティブ 要コンパイル
- 12. Copyright © NTT Communications Corporation. All rights reserved.
本⽇のアジェンダ
11
• はじめてのWebRTC/ORTC
• WebRTCとは
• 活⽤事例、デモンストレーション
• WebRTCで使われている技術要素の紹介
• 最新標準化動向
• SkyWayをつかって開発してみよう
を紹介
- 13. Copyright © NTT Communications Corporation. All rights reserved.
コンシューマ向けWeb会議
12
• インストール不要、認証も不要、URLにアクセスするだけで開始。
• ビデオの場合は8⼈まで、オーディオのみの場合は
20⼈までの、グループチャットに対応。 SkyWaySkyWayで
シグナリング
WebRTCでメッシュ状に接続し、
マイク⾳声、カメラ映像を
すべての相⼿に送信
WebRTC Chat on SkyWay
https://chat.skyway.io
デモ有
- 14. Copyright © NTT Communications Corporation. All rights reserved. 13
• 資料共有機能も簡単 (利⽤時はプラグイン/エクステンション導⼊が必要)
スクリーンシェア デモ有
- 15. Copyright © NTT Communications Corporation. All rights reserved.
Click to Call
14
• ゲートウェイでWebRTC⇔VoIPを変換することにより、ブラウザからコンタクト
センタに電話がかけられる。
• 電話をかける前の、ログイン情報、ページ遷移、⼊⼒情報などをオペレータのWebブラウザで確認
できる。(IVRの⾼度化)
• 通話中や通話終了後に、テキストや画像のやりとりができる。
ゲートウェイ
WebRTCと
VoIPを変換
WebRTC
ブラウザ
SIP+RTP
IP電話網
固定電話網
電話
回線
コンタクトセンタ
電話機
(既存)
ブラウザ
Internet等
データ中継サーバ
カスタマ
ブラウザの
情報を中継
- 16. Copyright © NTT Communications Corporation. All rights reserved.
1click.io : カスタマサポートの新規チャネル
15
• ウェブサイトのカスタマサポートの⼿段として、
お客様が閲覧中に1クリックでカスタマサポートへ接続する
• (前⾴の4の例)
https://1click.io/
- 17. Copyright © NTT Communications Corporation. All rights reserved.
字幕付きボイスチャット
16
• ⾳声認識機能を組み合わせ、通話内容をテキストで表⽰。
• 電⾞や会議中等の通話できない環境、議事録の⾃動作成、安全な歩きスマホ等に適⽤
可能。
• ⾳声⇛テキスト変換はGoogle Chromeの⾳声認識APIを利⽤。
字幕付きボイスチャット
相⼿との通話内容が吹き出し⾵に表⽰される
https://skyway.io/example /caption-phone/
SkyWay
0.SkyWay
でシグナリング
4.テキストを送受信
⾳声認識
API
⾳声認識
API
2.⾳声を
テキスト化
3.⾳声を送受信
1.話す 5.⾳声を再⽣
テキストを表⽰
デモ有
- 18. Copyright © NTT Communications Corporation. All rights reserved.
テレプレゼンス・ロボット
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アプリか
ブラウザを利⽤。
- 19. Copyright © NTT Communications Corporation. All rights reserved.
ROMO TURISMO
18
https://www.youtube.com/watch?v=oO-WjCKX9LY
- 20. Copyright © NTT Communications Corporation. All rights reserved.
Skype for Web
19
• Skype for Webのβ版が 2015/6/15 から提供開始(そのうちORTCに?)
• SkypeもNativeクライアントが不要になった
https://web.skype.com/ja/
- 21. Copyright © NTT Communications Corporation. All rights reserved.
Facebook ビデオチャット
20
• FacebookにもWebRTCを利⽤したビデオチャット機能が実装されている
デモ有
- 22. Copyright © NTT Communications Corporation. All rights reserved.
Zoen:オンライン⾳楽レッスンサービス
21
• 先⽣〜⽣徒間の⾳声映像通信をWebRTCで実現
https://www.thezoen.com/
- 23. Copyright © NTT Communications Corporation. All rights reserved.
iCam: WebRTCの監視カメラ
22
• WebRTC機能を備えた監視カメラ
• WebRTCを利⽤できる機器なら何でも遠隔で閲覧できる
http://www.amaryllo.eu/
- 24. Copyright © NTT Communications Corporation. All rights reserved.
スマホで撮った多数の映像を表⽰
23
• 2000⼈規模のカンファレンス(HTML Conference 2013)会場で
スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰した。
SkyWay
SkyWayで
シグナリング
カメラの映像を
WebRTCで送信
HTML5 JUMBOTRON
jt.skyway.io
デモ有
- 25. Copyright © NTT Communications Corporation. All rights reserved.
スマホで撮った多数の映像を表⽰
24
• 2000⼈規模のカンファレンス(HTML Conference 2013)会場で
スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰した。
デモ有
http://is.gd/html5jt#0100
Chrome、Firefox(PC・Android限定)でアクセス!
- 26. Copyright © NTT Communications Corporation. All rights reserved.
MistCDN
25
・ブラウザ間でコンテンツをシェアするCDNサービス
・WebRTCのdata channelを利⽤している
https://www.mist-t.co.jp/#demo
デモ有
- 27. Copyright © NTT Communications Corporation. All rights reserved.
本⽇のアジェンダ
26
• はじめてのWebRTC/ORTC
• WebRTCとは
• 活⽤事例、デモンストレーション
• WebRTCで使われている技術要素の紹介
• 最新標準化動向
• SkyWayをつかって開発してみよう
を紹介
- 28. Copyright © NTT Communications Corporation. All rights reserved.
WebRTC技術の全容
27
https://www.flickr.com/photos/noaaphotolib/5041457573
- 29. Copyright © NTT Communications Corporation. All rights reserved.
WebRTC技術の全容
28
まずは、海の上に出ている部分を理解
しましょう。
- 30. Copyright © NTT Communications Corporation. All rights reserved.
WebRTCの技術要素
29
WebRTCには様々な技術が使われています。
これから使⽤されている技術要素を順番に紹介します。
1.ICE
2.シグナリング
3.P2Pによるセキュアなリアルタイム通信
4.⾳声、映像処理
- 31. Copyright © NTT Communications Corporation. All rights reserved.
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
サーバ
- 32. Copyright © NTT Communications Corporation. All rights reserved.
UDPホールパンチング
31
NAT
STUN
NAT
※後述するNAT Typeにより挙動が変わります
- 33. Copyright © NTT Communications Corporation. All rights reserved.
UDPホールパンチング
32
俺のグローバル
IPとポート番号
教えて
111.111.111.111
50000番やで
NAT
STUN
NAT
※後述するNAT Typeにより挙動が変わります
- 34. Copyright © NTT Communications Corporation. All rights reserved.
UDPホールパンチング
33
俺のグローバル
IPとポート番号
教えて
222.222.222.222
20000番やで
NAT
STUN
NAT
IP:111.111.111.111
PORT:10000番
※後述するNAT Typeにより挙動が変わります
- 35. Copyright © NTT Communications Corporation. All rights reserved.
UDPホールパンチング
34
NAT
STUN
NAT
IP:111.111.111.111
PORT:10000番
IP:222.222.222.222
PORT:20000番
互いのIPとPORTを
何らかの⼿段で交換
(シグナリング)
※後述するNAT Typeにより挙動が変わります
- 36. Copyright © NTT Communications Corporation. All rights reserved.
UDPホールパンチング
35
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
アクセスさせ
てー! だめー。
⽳開いた!
※後述するNAT Typeにより挙動が変わります
- 37. Copyright © NTT Communications Corporation. All rights reserved.
UDPホールパンチング
36
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
通れる!!
アクセスさせてー。
⽳開いた!
※後述するNAT Typeにより挙動が変わります
- 38. Copyright © NTT Communications Corporation. All rights reserved.
UDPホールパンチング
37
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
もしかして!
通れる!
※後述するNAT Typeにより挙動が変わります
- 39. Copyright © NTT Communications Corporation. All rights reserved.
TURNの使いどころ
38
どうしてもNATに⽳があかない場合はTURNを利⽤する
互いのNAT
Type
フルコーン 制限付きフ
ルコーン
ポート制限
付きフル
コーン
シンメト
リック
フルコーン STUN STUN STUN STUN
制限付きフ
ルコーン
STUN STUN STUN STUN
ポート制限
付きフル
コーン
STUN STUN STUN TURN
シンメト
リック
STUN STUN TURN TURN
※NAT Typeは厳密に細分化すると9パターンあります。
よ
り
セ
キ
ュ
ア
よりセキュア
※もっと詳しく知りたい⽅はこちら。
http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc
- 40. Copyright © NTT Communications Corporation. All rights reserved.
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
- 41. Copyright © NTT Communications Corporation. All rights reserved.
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か、怪しくないな!
- 42. Copyright © NTT Communications Corporation. All rights reserved.
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が存在する
おいおい、中⾝が怪しいぞ!
- 43. Copyright © NTT Communications Corporation. All rights reserved.
WebRTCの技術要素
42
WebRTCには様々な技術が使われています。
これから使⽤されている技術要素を順番に紹介します。
1.ICE
2.シグナリング
3.P2Pによるセキュアなリアルタイム通信
4.⾳声、映像処理
- 44. Copyright © NTT Communications Corporation. All rights reserved.
シグナリング
43
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
WebRTC Cli WebRTC Cli
ICEの仕組み等を利⽤して取得した情報を、互いに交換する仕組み
・どのような仕組みを⽤いても良い
・WebSocket(主流)
・XHRロングポーリング
・情報はSDPを⽤いて情報交換する
・テキストベースのプロトコル
・IPアドレス、ポート番号、
映像、⾳声コーデック情報
などを記載して交換する
・めちゃくちゃ難解
- 45. Copyright © NTT Communications Corporation. All rights reserved.
WebRTCの技術要素
44
WebRTCには様々な技術が使われています。
これから使⽤されている技術要素を順番に紹介します。
1.ICE
2.シグナリング
3.P2Pによるセキュアなリアルタイム通信
4.⾳声、映像処理
- 46. Copyright © NTT Communications Corporation. All rights reserved.
P2Pによるセキュアなリアルタイム通信
4545
すべての準備が整うとP2Pによる、セ
キュアな通信を開始
・映像・⾳声
・セキュアなリアルタイム通信(SRTP)
・AES(共通鍵暗号化)
・鍵交換にDTLSを⽤いる(DTLS-SRTP)
・データ
・TCP同様の信頼性、到達順序性、
フロー制御、輻輳制御をUDP上で実現
・セキュアなDTLS上で動作する
・DTLS
・通信経路暗号化
・データ整合性の保証
・認証⾏為は⾏わない(オレオレ証明書)
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
WebRTC Cli WebRTC Cli
IP
UDP
SCTPSRTP
DTLS
⾳声・映像 データ
- 47. Copyright © NTT Communications Corporation. All rights reserved.
P2Pだけじゃない・・多対多の通信
WebRTCはP2Pの通信が前提だが、ユースケースとしては多対多も
求められている。
46
フルメッシュでやる⽅法もあるが、端末への負荷がかかる
チューニングしても同時8つぐらいが限界
- 48. Copyright © NTT Communications Corporation. All rights reserved.
P2Pだけじゃない・・多対多の通信
MCU(Multipoint Control Unit)を利⽤する。
メディアを集約、ミキシングし各デバイスに流す。
クライアント側の負荷が⼩さい。
サーバ側の負荷はエンコード、デコード処理が⼊るため負荷が⾼い。
47
MCU
- 49. Copyright © NTT Communications Corporation. All rights reserved.
P2Pだけじゃない・・多対多の通信
SFU(Selective Forwarding Unit)を利⽤する。
クライアントからのストリームを必要なエンドポイントに転送する。
サーバ側の負荷は⼩さい。
48
SFU
- 50. Copyright © NTT Communications Corporation. All rights reserved.
WebRTCの技術要素
49
WebRTCには様々な技術が使われています。
これから使⽤されている技術要素を順番に紹介します。
1.ICE
2.シグナリング
3.P2Pによるセキュアなリアルタイム通信
4.⾳声、映像処理
- 51. Copyright © NTT Communications Corporation. All rights reserved.
⾳声・動画処理
50
WebRTCクライアントはPCやデバイスの⾳声映像ストリームにアクセスでき
る(以下、Webブラウザの場合)
・getUserMedia(WebAPI)
プラットフォーム上の
⾳声、映像ストリームを取得できる
W3Cによって規定されたAPI
・ブラウザに実装された
エンジンによって、
エンコード、デコード処理がなされる
・コーデック
・Video:VP8、H.264
・Audio:Opus、G.711 PCMA & PCMU
デバイスハードウェア
⾳声処理エンジン
コーデック
ジッタ/パケロス補正
エコー除去
ノイズリダクション
映像処理エンジン
コーデック
ジッタ/パケロス補正
⾳声・動画同期
画像補正
⾳声キャプチャ 動画キャプチャ
内部WebRTC API
WebAPI(W3C)
引⽤元:オライリー・ジャパン
「ハイパフォーマンスブラウザネットワーキング」 P.301
- 52. Copyright © NTT Communications Corporation. All rights reserved.
本⽇のアジェンダ
51
• はじめてのWebRTC/ORTC
• WebRTCとは
• 活⽤事例、デモンストレーション
• WebRTCで使われている技術要素の紹介
• 最新標準化動向
• SkyWayをつかって開発してみよう
を紹介
- 53. Copyright © NTT Communications Corporation. All rights reserved.
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の話をします
- 54. Copyright © NTT Communications Corporation. All rights reserved.
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
- 55. Copyright © NTT Communications Corporation. All rights reserved.
W3Cによる標準化ロードマップ
54
Audio Oputpu
Devices API
Screen Capture
WebRTC
Next Version
※W3C公式のWorking draftになっているものだけ記載
2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014
●PR ●Rec
2017
Media Capture
from DOM
Elements
●CR ●PR ●Rec
WD:Working Doraft / 草案
CR :Candidate Recomendation / 勧告候補
PR:Proposed Recommendation / 勧告案
Rec:Recommendation / 勧告
1Q : 1⽉〜3⽉
2Q:4⽉〜6⽉
3Q:7⽉〜9⽉
4Q:10⽉〜12⽉
出展:http://www.w3.org/2015/06/webrtc-charter.html
●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
- 56. Copyright © NTT Communications Corporation. All rights reserved.
W3Cによる標準化ロードマップ
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
※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
getUserMediaとか
P2Pを⾏うための通
信系のAPI
認証とか、統計情
報取得のためのAPI
メディアストリー
ムを録⾳/録画す
るためのAPI
- 57. Copyright © NTT Communications Corporation. All rights reserved.
W3Cによる標準化ロードマップ
56
Audio Oputpu
Devices API
Screen Capture
WebRTC
Next Version
※W3C公式のWorking draftになっているものだけ記載
2013 2015.3Q 2015.4Q 2016.1Q 2016.2Q 2016.3Q 2016.4Q2014
●PR ●Rec
2017
Media Capture
from DOM
Elements
●CR ●PR ●Rec
WD:Working Doraft / 草案
CR :Candidate Recomendation / 勧告候補
PR:Proposed Recommendation / 勧告案
Rec:Recommendation / 勧告
1Q : 1⽉〜3⽉
2Q:4⽉〜6⽉
3Q:7⽉〜9⽉
4Q:10⽉〜12⽉
出展:http://www.w3.org/2015/06/webrtc-charter.html
●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
- 58. Copyright © NTT Communications Corporation. All rights reserved.
ここまで聞いて、皆さん、思いますよね?
57
注⽬されてるとか⾔ってるけど、まだまだ先やんかー。
- 59. Copyright © NTT Communications Corporation. All rights reserved.
その通りです!
58
WebRTCはGoogleやMozillaの実装ドリブンで検討が進んでいるの
で、仕様化は⼆の次・三の次。
ブラウザで実装してみる
↓
ここが使いにくいな・・等、フィードバック
↓
ある程度実装がFIXしたので仕様書に落とそう
- 60. Copyright © NTT Communications Corporation. All rights reserved.
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
- 61. Copyright © NTT Communications Corporation. All rights reserved.
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
- 62. Copyright © NTT Communications Corporation. All rights reserved.
ORTCの特徴
61
• 仕様⾯(今のWebRTCの不便な点を克服)
• SDPを直接JavaScriptで操作しない
• ステートレスにリアルタイム通信を⾏うためのAPI設計
• H.264/SVCなどのモバイルにやさしいコーデックを推奨する
• 実装⾯(実は今のWebRTCでは規定されていない)
• モバイル・アプリケーションとの互換性を担保(SDKを⽤意)
• キャリアスケールオペレーションに必要な監視、診断機能を⽤意
• サーバサイドのORTC Client実装をリファレンス提供
• STUN/TURNの認証管理の仕組みを提供
• オーディオ、ビデオのミキシングの仕組みをリファレンス提供 等
- 63. Copyright © NTT Communications Corporation. All rights reserved.
ORTCはマイクロソフトがやる気です
62
http://dev.modern.ie/platform/status/multicolumnfullsupport?filter=f3f0000bf&search=RTC
• Microsoft Edgeでサポートされることはほぼ確定路線
- 64. Copyright © NTT Communications Corporation. All rights reserved.
本⽇のアジェンダ
63
• はじめてのWebRTC/ORTC
• WebRTCとは
• 活⽤事例、デモンストレーション
• WebRTCで使われている技術要素の紹介
• 最新標準化動向
• SkyWayをつかって開発してみよう
を紹介
- 65. Copyright © NTT Communications Corporation. All rights reserved. 64
WebRTCはWeb開発者にとってちょっと難しい
64
ブラウザ間で直接通信する前に、サーバ経由で「シグナリング」を
⾏う必要があり、実装にはネットワークの知識が必要。
64ようやく直接通信できる
これらの通信が
完了してから…
- 66. Copyright © NTT Communications Corporation. All rights reserved.
そこで登場、SkyWay!
65
n WebRTC利⽤アプリを簡単に開発できるクラウド基盤
2013年12⽉5⽇に提供開始
無料!
提供内容
シグナリングAPI
STUN/TURN API
JavaScriptライブラリ(PeerJS互換)
iOS/Androidライブラリ
サンプルアプリ
⽇本語ドキュメント
https://skyway.io
- 67. Copyright © NTT Communications Corporation. All rights reserved. 66
SkyWayの特徴
SkyWayのシグナリングAPIとライブラリが複雑な処理を担うので
、開発者は簡単にWebRTC利⽤アプリを開発できる。
STUN
API
Signaling
API
STUN
API
ライブラリ ライブラリ
APIとライブ
ラリが複雑な
処理を担う
TURN
API
- 68. Copyright © NTT Communications Corporation. All rights reserved. 67
開発者登録を⾏う
まずはアクセス → https://skyway.io
ここをクリック
- 69. Copyright © NTT Communications Corporation. All rights reserved. 68
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は独⾃に設定
- 70. Copyright © NTT Communications Corporation. All rights reserved. 69
開発してみる(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});
- 71. Copyright © NTT Communications Corporation. All rights reserved. 70
開発してみる(JavaScriptの場合)
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);
});
- 72. Copyright © NTT Communications Corporation. All rights reserved. 71
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にはブラウザごとにベンダープレフィックスがあります
開発してみる(JavaScriptの場合)
- 73. Copyright © NTT Communications Corporation. All rights reserved. 72
開発してみる(JavaScriptの場合)
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()というメソッドも⽤意しています
- 74. Copyright © NTT Communications Corporation. All rights reserved. 73
開発に必要な情報を提供
⽇本語ドキュメントを公開中
http://nttcom.github.io/skyway/docs/
- 75. Copyright © NTT Communications Corporation. All rights reserved. 74
開発に必要な情報を提供
サンプルアプリはGitHub上にてオープンソースで公開中
https://github.com/nttcom/
- 76. Copyright © NTT Communications Corporation. All rights reserved. 75
開発に必要な情報を提供
開発者向けフォーラムを⽤意
SkyWay Technical Forum
• だれでも参加可能!
• 中の⼈が懇切丁寧に開発者の疑問質問にお答え!
• WebRTCに関す⽇本語での情報交換に活⽤してください
http://goo.gl/enBkcF
- 77. Copyright © NTT Communications Corporation. All rights reserved.
まとめ
76
• はじめてのWebRTC/ORTC
• WebRTCとは
• 活⽤事例、デモンストレーション
• WebRTCで使われている技術要素の紹介
• 最新標準化動向
• SkyWayをつかって開発してみよう
を紹介
- 78. Copyright © NTT Communications Corporation. All rights reserved. 77
ご清聴ありがとうございました!