More Related Content
Similar to WebRTC入門+最新動向 (20)
More from Ryosuke Otsuya (11)
WebRTC入門+最新動向
- 1. Copyright © NTT Communications Corporation. All right reserved.
第15回 HTML5+JS 勉強会
WebRTC⼊入⾨門+最新動向
~本格的な普及が始まる前にマスターしておこう~
NTTコミュニケーションズ株式会社
技術開発部
Webコア Technical Unit
⼤大津⾕谷
2015年年7⽉月
- 2. Copyright © NTT Communications Corporation. All right reserved.
⾃自⼰己紹介 / ⼤大津⾕谷 亮亮祐(おおつや りょうすけ)
n NTTコミュニケーションズの
HTML5チームのリーダ
n WebRTCプラットフォーム
“SkyWay”のプロダクトマネージャ
n WebRTC Conference Japan 幹事
n 神奈奈川県 葉葉⼭山町 在住
趣味は海と畑
2
- 3. Copyright © NTT Communications Corporation. All right reserved.
想定する聴講者
n /WebRTCのことを
(知らない|なんとなく知っているが)、
(ほとんど)? 書いたことがないWebエンジニア/
3
- 4. Copyright © NTT Communications Corporation. All right reserved.
伝えたいこと
n WebRTCは、もう、商⽤用でも使える。
n WebRTCは、個⼈人のキャリアにとっても、
会社のビジネスにとっても、武器になる。
4
- 6. Copyright © NTT Communications Corporation. All right reserved.
リアルタイム・コミュニケーションの歴史
120年年の間、電話会社が
リアルタイム・コミュニケーションを独占
6 www.flickr.com/photos/mattb_tv/2550476978
- 7. Copyright © NTT Communications Corporation. All right reserved.
NapsterやSkype等のスーパーハッカーがインターネット
でリアルタイム・コミュニケーションを実現、
電話会社とハッカーによる寡占が10年年続いた
7 www.flickr.com/photos/132889348@N07/18410514419
- 8. Copyright © NTT Communications Corporation. All right reserved.
WebRTCによって、リアルタイム・コミュニケーションが
我々の⼿手に。
“リアルタイム・コミュニケーションの⺠民主化”
8 www.flickr.com/photos/tjflex/57210112
- 9. Copyright © NTT Communications Corporation. All right reserved.
HTML5の全体像
n WebRTCはHTMLのAPIの1つ。
9
www.slideshare.net/dynamis/html-‐‑‒2012
- 10. Copyright © NTT Communications Corporation. All right reserved.
上司向けの説明
ブラウザでテレビ電話を実現する技術
10
- 11. Copyright © NTT Communications Corporation. All right reserved.
Webエンジニア向けの説明
n ブラウザ間で直接通信ができる
n ストリーミングデータを扱える
n カメラとマイクを使える
11
従来のWeb WebRTC
カメラやマイ
クを利利⽤用可
ストリーミング
データを扱える
ブラウザ間
の直接通信
サーバ⇔ク
ライアント
間の通信
リクエストと
レスポンスの
繰り返し
カメラやマイ
クの利利⽤用不不可
サーバ サーバ
- 12. Copyright © NTT Communications Corporation. All right reserved.
エンジニア向けの説明
1. ⾳音声、映像、データのリアルタイム通信のオープン標準
l 従来のサービス(LINE、Skype等)は独⾃自技術でできていた。
WebRTCはオープン標準、ライセンス使⽤用料料が不不要。
l 中⾝身は3つ。
①⾳音声と映像の形式(コーデック)
②ネットワーク機器(NAT等)を越えて直接通信する⼿手順
③暗号化、到達・順序保証、流流量量・輻輻輳制御を実現する
プロトコル
2. ブラウザとネイティブアプリの両⽅方で利利⽤用できる
l WebRTC対応ブラウザにURLを⼊入⼒力力するだけで、WebRTCを利利
⽤用したサービスを利利⽤用できる。
l オープンソースのC++のコードを利利⽤用しコンパイルすれば、ネ
イティブアプリにWebRTC機能を組み込むこともできる。
12
- 13. Copyright © NTT Communications Corporation. All right reserved.
マーケティング的な説明
n コミュニケーションアプリが作れる
n 家電、IoT分野で、リアルタイム通信が
必要な場合に使える(右の写真)
n インストール不不要だから、サポートコストの
削減やITリテラシの低い層の利利⽤用が可能
n アプリやWebに組み込めるので、
⼀一貫性のあるユーザ体験が実現できる
(例例:Skype英会話に適⽤用)
n 電話との連携
Chromecast
Withings Home
- 14. Copyright © NTT Communications Corporation. All right reserved.
WebRTCの対応状況
14
*1: プラグインで対応可
*2: 2015年年7⽉月発売のWindows 10で⼀一部サポート
*3: Ericsson、Temasys等が推進する、オープンソースプロジェクト
“WebRTC in WebKit” により、開発がほぼ完了了
OS
アプリ
Windows Mac Android iOS
ネイティブアプリ ✔ ✔ ✔ ✔
Chrome ✔ ✔ ✔ ✘
Firefox ✔ ✔ ✔
IE ✘*1
Edge ✘*2
Safari ✘*1*3 ✘*3
- 16. Copyright © NTT Communications Corporation. All right reserved.
テレプレゼンス・ロボット
n ビデオ会議機能を備えた遠隔操作ロボット
16
Romo by Romotive
www.romotive.jp
15,660
Double by Double Robotics
www.doublerobotics.com
$2,499
- 17. Copyright © NTT Communications Corporation. All right reserved.
イベント盛り上げ&質疑応答
n 2000⼈人規模のカンファレンス(HTML Conference 2013)会場で
スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰示
17
SkyWay
SkyWayで
シグナリング
カメラの映像を
WebRTCで送信
HTML5 JUMBOTRON
jt.skyway.io
- 18. Copyright © NTT Communications Corporation. All right reserved.
イベント盛り上げ&質疑応答
n 2000⼈人規模のカンファレンス(HTML Conference 2013)会場で
スマホで撮った約150名の来場者の顔を、壇上のスクリーンに表⽰示
18
SkyWay
SkyWayで
シグナリング
カメラの映像を
WebRTCで送信
HTML5 JUMBOTRON
jt.skyway.io
Windows, Mac, Android の
Chrome, Firefox でアクセス
is.gd/html5jt#0730
- 19. 19Copyright © NTT Communications Corporation. All right reserved.
WebRTCの技術解説
www.slideshare.net/yusukenaka52/webrtcortc-‐‑‒50153479 を著者の許可を得て⼀一部改編
- 20. Copyright © NTT Communications Corporation. All right reserved.
NAT越え
2020
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
WebRTC Cli WebRTC Cli
ICE
• NAT越えの⼿手順
STUN
• ⾃自分のグローバルIP、
ポート番号を知る
• UDPホールパンチングという
仕組みでNATを越える
TURN
• どうしてもNATを越えられ
ない場合はサーバで中継する
• 8〜~9%はTURNが必要
TURN
サーバ
- 21. Copyright © NTT Communications Corporation. All right reserved.
UDPホールパンチング
21
NAT
STUN
NAT
※後述するNAT Typeにより挙動が変わります
- 22. Copyright © NTT Communications Corporation. All right reserved.
UDPホールパンチング
22
俺のグローバル
IPとポート番号
教えて
111.111.111.111
50000番やで
NAT
STUN
NAT
※後述するNAT Typeにより挙動が変わります
- 23. Copyright © NTT Communications Corporation. All right reserved.
UDPホールパンチング
23
俺のグローバル
IPとポート番号
教えて
222.222.222.222
20000番やで
NAT
STUN
NAT
IP:111.111.111.111
PORT:10000番
※後述するNAT Typeにより挙動が変わります
- 24. Copyright © NTT Communications Corporation. All right reserved.
UDPホールパンチング
24
NAT
STUN
NAT
IP:111.111.111.111
PORT:10000番
IP:222.222.222.222
PORT:20000番
互いのIPとPORTを何
らかの⼿手段で交換
(シグナリング)
※後述するNAT Typeにより挙動が変わります
- 25. Copyright © NTT Communications Corporation. All right reserved.
UDPホールパンチング
25
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
アクセスさせ
てー! だめー。
⽳穴開いた!
※後述するNAT Typeにより挙動が変わります
- 26. Copyright © NTT Communications Corporation. All right reserved.
UDPホールパンチング
26
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
通れる!!
アクセスさせてー。
⽳穴開いた!
※後述するNAT Typeにより挙動が変わります
- 27. Copyright © NTT Communications Corporation. All right reserved.
UDPホールパンチング
27
NAT
STUN
NAT
IP:222.222.222.222
PORT:20000番
IP:111.111.111.111
PORT:10000番
もしかして!
通れる!
※後述するNAT Typeにより挙動が変わります
- 28. Copyright © NTT Communications Corporation. All right reserved.
TURNの使いどころ
28
どうしてもNATに⽳穴があかない場合はTURNを利利⽤用する
互いのNAT
Type
フルコーン 制限付きフ
ルコーン
ポート制限
付きフル
コーン
シンメト
リック
フルコーン STUN STUN STUN STUN
制限付きフ
ルコーン
STUN STUN STUN TURN
ポート制限
付きフル
コーン
STUN STUN STUN TURN
シンメト
リック
STUN TURN TURN TURN
※NAT Typeは厳密に細分化すると9パターンあります。
よ
り
セ
キ
ア
よりセキュア
※もっと詳しく知りたい⽅方はこちら。
http://www.slideshare.net/iwashi86/webrtcnat-a-talk-on-nat-behind-webrtc
- 29. Copyright © NTT Communications Corporation. All right reserved.
TURNリレー
29
シンメトリック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か、怪しくないな!
クライアントはP2Pのつもり
- 30. Copyright © NTT Communications Corporation. All right reserved.
TURNを使っても通らない場合がある
30
シンメトリック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が存在する
おいおい、中⾝身が怪しいぞ!
- 31. Copyright © NTT Communications Corporation. All right reserved.
シグナリング
31
NAT
NAT
STUN
サーバ
Signaling
サーバ
STUN
サーバ
WebRTC Cli WebRTC Cli
• NAT越えに必要な情報を交換する仕組み
• プロトコルは定められていない
SIP over WebSocket/XHR,
XMPP over WebSocket/XHR,
独⾃自 over WebSocket/XHR等
• 情報の記述⽅方法は、SDPを⽤用いる
と定められている
- 32. Copyright © NTT Communications Corporation. All right reserved.
プロトコル・スタック
n UDPの上で温故知新
32
chimera.labs.oreilly.com/books/1230000000545/ch18.html#_̲real_̲time_̲network_̲transports
シグナリング 映像、⾳音声 データ
- 33. 33Copyright © NTT Communications Corporation. All right reserved.
WebRTCプラット
フォームを利利⽤用する
- 34. Copyright © NTT Communications Corporation. All right reserved.
NAT
NAT
SkyWay
34
n NTT Comが提供するWebRTCアプリ開発者向けプラットフォーム。
n 2013年年12⽉月5⽇日に提供開始
n 2000以上のアプリで利利⽤用
STUN
API
Signaling
API
STUN
API
ライブラリ ライブラリ
開発者はPeer to
Peer通信のプログラ
ミングに専念念できる
SkyWayが
シグナリングを
担うので、
- 35. Copyright © NTT Communications Corporation. All right reserved.
SkyWayのサンプルコード
n シンプルなビデオチャットならわずか⼗十数⾏行行で記述できる。
35
1. シグナリングサーバに接続する
4. (受信側の処理理) 相⼿手からビデオが送られてきたら、⾃自分のビデオを相⼿手に送る
3. (発信側の処理理) ブラウザの発信ボタンがクリックされたら、⾃自分のビデオを相⼿手に送る
2. カメラとマイクを起動し、⾃自分のビデオを表⽰示する
5. 相⼿手のビデオを表⽰示する
github.com/nttcom/peerjs/tree/master/examples/videochat
- 36. Copyright © NTT Communications Corporation. All right reserved.
SkyWayの機能⼀一覧
業界をリードするWebRTCプラットフォーム
36
分類 機能 説明 提供時期
API
Basic
シグナリング WebSocketとHTTPを併⽤用しP2P接続の確⽴立立を仲介 2013/12
NAT
越え
STUN
フルコーンNATに対し、UDPホールパンチングで
NAT越えを実現
2013/12
Pro TURN
UDPホールパンチングが不不可能な際に使⽤用するリ
レーサーバ
2015/01
SDK/
ライブラリ
Basic
JavaScript SDK ブラウザで動作するWebアプリ向けSDK 2013/01
iOS/Android SDK
iOS/Androidで動作するのネイティブアプリ向け
SDK
2015/05
IE/Safariプラグイン
対応
WebRTC未対応のIE/SafariでもSkyWayを利利⽤用可能
にするTemasys社提供のブラウザプラグインに対応
2015/06
Pro
⾳音声認識識ライブラリ ⾳音声認識識(Speech-to-Text)を実現 2015/06
多⼈人数接続ライブラリ
多⼈人数フルメッシュ接続のビデオ会議アプリを容易易
に開発可能
2015/06
画⾯面共有ライブラリ
画⾯面共有機能を提供するライブラリおよびブラウザ
拡張機能
2015/06
ポータル Basic
API設定変更更
APIキーの追加/削除、利利⽤用可能なドメインの追加/変
更更、TURN利利⽤用申請
2014/10
セキュリティ⽂文書
WebRTCのセキュリティ解説⽂文書をオープンソース
公開し企業でのWebRTC利利⽤用を促進
2015/06
- 38. Copyright © NTT Communications Corporation. All right reserved.
Amazon Mayday
38
www.youtube.com/watch?v=X40j57v5g6I
- 39. Copyright © NTT Communications Corporation. All right reserved.
楽天⽣生命 ネット保険デスク
39
www.rakuten-life.co.jp/videochat/
- 40. Copyright © NTT Communications Corporation. All right reserved.
ChatWork Live
40
blog-ja.chatwork.com/2013/05/chatwork-live.html
- 41. Copyright © NTT Communications Corporation. All right reserved.
MistCDN / フジテレビオンデマンド
41
fod.fujitv.co.jp/s/fodlabo/
著作権に配慮
- 42. Copyright © NTT Communications Corporation. All right reserved.
V-‐‑‒Sido
n ⼈人型ロボットを制御するミドルウェア
42
ぶ し ど う
www.asratec.co.jp/product/connect/webcon/
- 43. Copyright © NTT Communications Corporation. All right reserved.
Romoでみつける!⼦子どもの表情(⽇日本科学未来館)
n 遊び場の⼦子供の様⼦子を離離れた場所から⾒見見守る
43
www.miraikan.jst.go.jp/event/1503241118096.html
- 44. Copyright © NTT Communications Corporation. All right reserved.
BestieBox
n グループ向けコミュニケーションアプリの
無料料ビデオ通話機能に採⽤用
44
506506.ntt.com/smp_ap/bestiebox/
- 46. Copyright © NTT Communications Corporation. All right reserved.
ORTC / Object RTCとは
n 現⾏行行のWebRTCを改善すべく提案されたもう⼀一つのRTC API
n W3CのORTC(Object Real-‐‑‒time Communications) Community Groupで議論論
46
www.slideshare.net/yusukenaka52/webrtcortc-50153479
- 47. Copyright © NTT Communications Corporation. All right reserved.
IE / Microsoft Edgeは?
n Edgeはカメラ・マイクの利利⽤用(getUserMedia API)に対応済み!
ORTCも開発中!
n IEはダメっぽい。
47
dev.modern.ie/platform/status/
- 48. Copyright © NTT Communications Corporation. All right reserved.
Safari
n EricssonとTemasysが、WebKitのWebRTC実装を⼿手伝っている
48
- 50. Copyright © NTT Communications Corporation. All right reserved.
最後に
WebRTCを使って
世界を変えるサービスを作ろう!
50